HTML5新增特性

======================================================================

• 以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的

• ： 头部标签
• ： 导航标签
• ： 主题标签

• ： 独立的内容标签

• ： 区段标签
• ： 侧边栏标签
• ： 尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎的

• 这些新标签页面中可以多次使用

• 在IE9中，需要把这些元素转换为块级元素

• 其实，移动端更喜欢用这些标签

• HTML5还有很多其他标签

[](()HTML5新增多媒体音频标签

========================================================================

HTML5在不适用插件的情况下也可以原生的支持音频格式文件的播放，当然支持的格式是由限的

• 音频格式：

| 格式 | MIME-type | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |

| — | — | — | — | — | — | — |

| Ogg | audio / mpeg | | √ | √ | √ | |

| MP3 | audio / ogg | √ | | | √ | √ |

| Wav | audio / wav | | √ | √ | | √ |

• 音频标签语法格式

您的浏览器暂不支持audio标签

• 音频标签常见属性

| 属性 | 值 | 描述 |

| — | — | — |

| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |

| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |

| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |

| preload | preload | 如果出现该属性，则音频在页面加载时进行预加载，并预备播放。如果使用"autoplay"，则忽略该属性 |

| src | url | 要播放的音频的URL |

[](()HTML5新增多媒体视频标签

========================================================================

HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是由限的

• 视频格式

| 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari |

| — | — | — | — | — | — | — |

| Ogg | video/ogg | x | 3.5+ | 10.5+ | 5.0+ | x |

| MP4 | video/mp4 | 9.0+ | x | x | 5.0+ | 3.0+ |

| WebM | video/webm | x | 4.0+ | 10.6+ | 6.0+ | x |

您的浏览器暂不支持audio标签

• 视频标签常见属性

| 属性 | 值 | 描述 |

| — | — | — |

| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |

| controls | controls | 向用户显示播放控件 |

| loop | loop | 放完是否继续播放该视频，循环播放 |

| preload | auto(预先加载视频)；none(不应加载视频) | 规定是否预加载视频（如果有了autoplay就忽略该属性） |

| src | url | 视频url地址 |

| width | pixels(像素) | 设置播放器宽度 |

| height | pixels(像素) | 设置播放器高度 |

| poster | Imgurl | 加载等待的画面图片 |

| muted | muted | 静音播放 |

总结

• 音频标签和视频标签使用基本一致

• 浏览器支持情况不同

• 我们可以给食品标签添加muted属性进行自动静音播放视频，音频不可以

• 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件

[](()HTML5新增input表单

========================================================================

H5新增表单类型

| 属性值 | 描述 |

| — | — |

| type=“email” | 限制用户输入必须为Email类型 |

| type=“url” | 限制用户输入必须为URL类型 |

| type=“date” | 限制用户输入必须为日期类型 |

| type=“time” | 限制用户输入必须为时间类型 |

| type=“month” | 限制用户输入必须为月类型 |

| type=“week” | 限制用户输入必须为周类型 |

| type=“number” | 限制用户输入必须为数字类型 |

| type=“range” | 滑动条 |

| type=“tel” | 手机号码 |

| type=“search” | 搜索框 |

| type=“color” | 生成一个颜色选择表单 |