HTML5

HTML5新增的特性主要是针对以前的不足，增加了一些 新的标签、新的表单和 新的表单属性等
但是这些新特性都有 兼容性问题，基本都是IE9+以上的版本的浏览器才支持

1.HTML5新增的语义化标签

以前的布局中，我们基本是div来做的，但是对于搜索引擎来说，div是没有语义的
<div class="header> </div>
<div class="nav"> </div>
<div class="content"> </div>
<div class="footer"> </div>

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <aside>：侧边栏标签
• <footer>：尾部标签
  
  注意：
• 这些语义化标签主要是针对搜索引擎的
• 这些新标签，页面中可以多次使用
• 在IE9中，需要将这些元素转换为块级元素
• 在移动端更喜欢使用这些标签

1.2HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：
1. 音频：<audio>
2. 视频：<video>
使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件

1.2.1视频<video>

当前<video>元素支持三种视频格式，尽量使用MP4格式

语法：
<video src="文件地址" controls="controls"><video>

1.2.2音频<audio>

当前<audio>元素支持三种音频格式，尽量使用MP3格式
语法：
<audio src="文件地址" controls="controls"></audio>

• 谷歌浏览器把音频和视频自动播放禁止了

1.2.3多媒体标签总结

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

1.3HTML新增的表单元素类型

重点记住：number tel search这三个

1.4HTML新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：
input: placeholder { color: pink; }