HTML 5是近年來網(wǎng)頁開發(fā)領(lǐng)域最重要的一個(gè)版本，它引入了許多新的元素和功能，使網(wǎng)頁的開發(fā)更加靈活和簡單。本文將介紹一些常用的HTML 5網(wǎng)頁代碼，方便讀者快速了解和運(yùn)用。 第一種：視頻元素 使用HTML 5的video元素可以輕松地在網(wǎng)頁上嵌入視頻。下面的代碼就是一個(gè)簡單的例子：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

其中，width和height屬性控制視頻的大小，controls屬性生成默認(rèn)的控制條，source元素指定了視頻文件的地址和格式，最后的文本用于在不支持video元素的瀏覽器上顯示備用信息。 第二種：音頻元素 類似地，使用HTML 5的audio元素可以嵌入音頻文件。下面是一個(gè)例子：

<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

這里的controls屬性同樣生成默認(rèn)的控制條，source元素指定了音頻文件的地址和格式。 第三種：canvas元素 HTML 5的canvas元素可以用來在網(wǎng)頁上繪制圖形。下面的代碼展示了一個(gè)最簡單的用法：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>

這個(gè)例子中，canvas元素包含了一個(gè)id屬性和一個(gè)width/height屬性，使用JavaScript獲取到該元素的上下文對象后，就可以使用其中的方法繪制矩形，填充顏色等。 第四種：地理位置API HTML 5還提供了地理位置API，可以在網(wǎng)頁上獲取用戶的位置。下面的代碼展示了如何使用：

<p id="demo"></p>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById('demo').innerHTML = 'Geolocation is not supported by this browser.';
}
function showPosition(position) {
document.getElementById('demo').innerHTML = 'Latitude: ' + position.coords.latitude + '<br>Longitude: ' + position.coords.longitude;
}
</script>

在這里，當(dāng)前的位置通過調(diào)用navigator.geolocation.getCurrentPosition()方法獲取。如果成功，則調(diào)用showPosition()函數(shù)將經(jīng)度和緯度輸出到id為“demo”的p元素中。如果失敗，則輸出提示信息。 總之，HTML 5為網(wǎng)頁的設(shè)計(jì)和開發(fā)提供了更多的可能性和工具，這些例子只是其中的一部分，歡迎讀者在實(shí)踐中探索更多的功能和實(shí)現(xiàn)方法。