HTML5新增的语义化标签

---

一、HTML5 新增语义化标签

新增的语义化标签有下列几种：

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

表现形式如图所示：

注意：

• 这种语义化标准主要是针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在IE9中，需要把这些元素转换为块级元素
• 其实，我们移动端更喜欢使用这些标签
• HTML5还增加了很多其他标签，我们后面再慢慢学

二、新增的多媒体标签

1.音频标签：

书写语法：

<audio src="文件地址" controls="controls"></audio>

担心浏览器不支持格式，还可以有以下写法：

<audio controls="controls">
    <source src="文件地址.mp3" type="audio/mpeg" >
    <source src="文件地址.ogg" type="audio/ogg" >
    您的浏览器暂不支持<audio>标签。
</audio>

常见属性

属性和值	描述
autoplay:“autoplay”	如果出现该属性，则音频在就绪后马上播放
controls:“controls”	如果出现该属性，则向用户显示控件，比如播放按钮
loop:“loop”	如果出现该属性，则每当音频结束时重新开始播放
src:“url”	要播放的音频的URL

2.视频标签：

书写语法：

<video src="文件地址" controls="controls"></video>

担心浏览器不支持格式，还可以有以下写法：

<video controls="controls">
    <source src="文件地址.ogg" type="video/ogg" >
    <source src="文件地址.mp4" type="video/mp4" >
    您的浏览器暂不支持<video>标签播放视频。
</video>

常见属性

属性和值	描述
autoplay:“autoplay”	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls:“controls”	向用户显示播放控件
width:“pixels”	设置播放器宽度
height:“pixels”	设置播放器高度
loop:“loop”	播放完是否继续播放该视频，循环播放
preload:“auto(none)”	规定是否预加载视频（如果有了autoplay 就忽略该属性）
src:“url”	视频url地址
poster:“lmgurl”	加载等待的画面图片
muted:“muted”	静音播放

---

3.总结

• 音频标签和视频标签使用方式基本一致
• 浏览器支持情况不同
• 谷歌浏览器把音频和视频自动播放禁止了
• 我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
• 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性