2. 语义化标签

1. HTML 新增标签

常见的布局标签

• section: 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、h2……等元素结合起来使用，表示文档结构。

• article: 表示页面中一块与上下文不相关的独立内容。比如一篇文章。

• aside: 表示一个页面的一部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。aside元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，相关链接，当前页内容简介等。

• header: 表示页面中一个内容区块或真个页面的标题。

• footer: 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

• nav: 表示页面中导航链接的部分。

• figure: 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

更多语义化标签和介绍详见 HTML5元素周期表

2. 多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

HTML5 新增 audio 标签 和 video 标签来解决音视频的问题;

• audio 音频

• video 视频

常用属性 :

• autoplay 自动播放
• controls 是否显示默认播放控件
• loop 循环播放
• width 设置播放窗口宽度
• height 设置播放窗口的高度
• muted 设置静音
• poster 设置图片为视频封面, 图片大小不可改变

<!-- 音频 -->
<audio src="晴天.mp3" autoplay controls loop muted></audio>

<!-- 视频 -->
<video src="美食.mp4" autoplay controls loop  width="600" height="600"
        poster="../07-项目实战/shopping/static/images/bg1.jpg"></video>
<!-- 自动播放需要开启静音属性 -->

不同的浏览器可支持播放的格式是不一样的:

多浏览器支持方案:

 <video controls>
     <source src="美食.mp4">
     <source src="美食.ogg">
     <source src="美食.webm">
     <p>该浏览器不支持以上格式</p>
 </video>