1.html5概述
html5是超文本標(biāo)記語言(html)的第五次重大修改,理解為是html的第五個大版本频伤。我們平時所說的html5其實(shí)是包含了html5晌该,css3的新特性戒祠,以及新增的JavaScript接口成玫。
2.html5布局標(biāo)簽
在此前我們學(xué)習(xí)的內(nèi)容中加酵,網(wǎng)頁布局一直都是使用div作為容器,html5新標(biāo)準(zhǔn)中哭当,為了讓容器元素有語義猪腕,讓網(wǎng)頁更具可讀性,新增了
header
nav
aside
article
section
footer
header標(biāo)簽和nav標(biāo)簽的作用與之前的div的作用完全相同荣病,只不過標(biāo)簽的名字具有語義化而已码撰。
3.html5媒體標(biāo)簽
在html之前的版本中,如果我們需要在網(wǎng)頁中插入音頻或是視頻个盆,需要安裝額外的插件,但是從html5版本之后朵栖,我們就可以直接通過一個標(biāo)簽來實(shí)現(xiàn)音頻和視頻的展示功能颊亮。
3.1音頻標(biāo)簽
audio標(biāo)簽,在網(wǎng)頁中嵌入音樂播放器陨溅,audio標(biāo)簽的src屬性可以指定音樂文件
<audio src="XXX.mp3"></audio>
并不能直接播放音樂终惑,為了讓網(wǎng)頁打開的時候同時播放音樂,
我們可以為audio標(biāo)簽添加一個autoplay屬性
<audio src="XXX.mp3" autoplay></audio>
音樂播放器停止音樂门扇,設(shè)置音量雹有。我們可以為audio標(biāo)簽添加一個controls屬性
<audio src="XXX.mp3" autoplay controls></audio>
JavaScript,我們還可以利用JavaScript調(diào)用audio標(biāo)簽的接口臼寄,自定義音樂播放器霸奕。
3.2視頻標(biāo)簽
視頻標(biāo)簽(video),我們可以在網(wǎng)頁中添加video標(biāo)簽來為網(wǎng)頁嵌入視頻吉拳。
<video src="xxx.mp4" controls autoplay></video>
video標(biāo)簽同樣可以使用controls屬性設(shè)置播放器的控制器质帅,通過autoplay屬性控制其自動播放。
控制視頻播器放尺寸
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
video{width:50%;}
</style>
</head>
<body><video src="media/video.mp4" controls autoplay></video>
</body>
</html>