HTML5標(biāo)簽代碼練習(xí)

HTML5是最新的HTML標(biāo)準(zhǔn)，其中新增了很多標(biāo)簽，這里我們來練習(xí)使用一些新增的標(biāo)簽。

新增的語義化標(biāo)簽

HTML5中新增了許多語義化標(biāo)簽，比如header、footer、nav等，這些標(biāo)簽可以讓我們更加清晰地表達(dá)頁面結(jié)構(gòu)。

<header>
<h1>這是頁面頭部</h1>
</header>
<nav>
<ul>
<li><a href="#">鏈接1</a></li>
<li><a href="#">鏈接2</a></li>
<li><a href="#">鏈接3</a></li>
</ul>
</nav>
<footer>
<p>這是頁面底部</p>
</footer>

視頻和音頻標(biāo)簽

HTML5中新增了video和audio標(biāo)簽，可以用來嵌入視頻和音頻內(nèi)容。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持視頻播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的瀏覽器不支持音頻播放。
</audio>

畫布標(biāo)簽

canvas標(biāo)簽是一個(gè)畫布，可以用JavaScript繪制各種圖形。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 100, 50);
</script>