HTML5新特性
兼容性 IE9+ 浏览器支持, 但是不会影响页面布局,可以放心使用。
HTML5 的新增特性主要是针对于以前的不足。
增加了一些新的标签、新的表单和新的表单属性等。
语义化标签
以前我们用 div 布局时对于搜索引擎来说，是没有语义。
所以HTML5新增了语义化的标签，用于布局。
- < header >：头部标签
- < nav >：导航标签
- < article >：内容标签
- < section >：定义文档某个区域
- < aside >：侧边栏标签
- < footer >：尾部标签
- 注意：
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在 IE9 中，需要把这些元素转换为块级元素
- 移动端更喜欢使用这些标签
- HTML5 还增加了很多其他标签
多媒体标签
方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。
- 音频：< audio >
- 视频：< video >
- 使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 给视频标签添加 muted 属性来静音播放视频
- 音频通过JavaScript解决
- 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
音频 audio
以原生的支持音频格式文件的播放，支持的格式是有限的。
图片来源
- 语法：
<audio src="文件地址" controls="controls"></audio>
在谷歌中需要写入JS实现自动播放。
视频 video
< video > 元素支持三种视频格式： 尽量使用 mp4格式
图片来源
- 语法：
<video src="文件地址" controls="controls"></video> - 语法：
<video src="文件地址" controls="controls"></video>
谷歌浏览器自动播放需要加：muted=“muted”
input类型
新增类型
| 类型 | 只能输入的类型 |
|---|---|
| 邮箱类型 | |
| url | 链接类型 |
| number | 数字类型 |
| range |
min="1" max="10" 一定范围内数字值，显示为滑动条
|
| Date pickers（日期选择器） | date, month, week, time, datetime, datetime-local。 |
| search | 搜索框 |
| color | 生成一个颜色选择表单 |
新增的表单属性
| 属性 | 值 | 解释 |
|---|---|---|
| autocomplete | off/on | 自动完成域中开始输入时，浏览器应该在该域中显示填写的选项 |
| autofocus | autofocus | 自动聚焦属性，页面加载时自动聚焦 |
| form | 所属表单的 id | form 属性适用于所有 标签的类型 |
| required | required | 内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值时不显示input::placeholder{color: 颜色; }修改文字颜色 |
| min, max 和 step | 数字 | 最小值，最大值，步进 |
| height 和 width | px | 高和宽 |