HTML5 的新增特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 但是这些新特性往往都村子兼容性问题，比较老的版本浏览器可能不支持。
新增特性很多，今天主要介绍一些开发中常用的新特性。

1.HTML5 新增的结构元素

我们之前布局时，基本都是使用 div 来做的。但是div 对于搜索引擎来说，是没有语义的。而新增的结构元素虽然作用与div大致一样，但是增加了语义化，方便后期的维护。

 

①<header>：头部标签    <!-- 一般是用在头部信息上 -->
②<main>：主体标签       <!-- 使用main来包裹主体的内容 -->
③<nav>：导航标签         <!-- 一般用于包裹导航的内容 -->
④<section>：定义文档某个区域      <!-- section一般可以包裹一个内容区域块 -->
⑤<aside>：侧边栏标签    <!-- aside一般用作侧边栏 -->
⑥<article>：内容标签       <!-- article一般用来包裹正文的内容 -->
⑦<footer>：尾部标签       <!-- 页面或页面中某一个区块的脚注 -->

注意：
①以上这些结构元素，具有的语义化标准，主要是针对搜索引擎的 
②这些新标签页面中可以使用多次 

2.HTML5 新增的网页元素

HTML5 新增的网页元素主要包含有：视频：<video> 、音频：<audio> 。

因为有了这元素，所以HTML5 在不使用插件的情况下，也可以原生的支持视频和音频格式文件的播放，但是可能会存在一定的兼容性问题。 

2.1 视频<video>

video标签是用于定义视频，如电影片段或其他视频流

语法：

<video src="文件地址" controls autoplay="autoplay" loop muted>
        您的浏览器不支持video视频
</video>

<!-- controls="controls" 或者直接写controls  只有加上这个才会出现控制菜单 -->

<!-- autoplay="autoplay" 可以实现自动播放，但是在部分浏览器会存在兼容问题，自动播放实现不了 -->

<!-- 加上loop属性，可以实现循环播放效果 -->

<!-- 加上muted属性，会自动静音 -->

<!-- video 里面的字只有在不支持video 标签的浏览器才会显示在页面上 -->

 以上是video标签最常使用的属性以及对应的作用。

2.2 音频<audio>

audio标签用于定义音频，如音乐或其他音频流

语法：

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

 音频audio 的属性和视频video的属性用法基本一致。