HTML5 中常用的新特性

HTML5 针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

1、新增的语义化标签

以前布局，基本使用 div 来做，但 div 对于浏览器来说，是没有语义的。HTML5 中新增了一批语义化标签。

头部标签

头部标签

内容标签

定义文档某个区域

侧边栏标签

尾部标签

2、新增的多媒体标签

2.1 视频标签

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

在上面的代码块中，包含了两个类型不同的 source，还有一行文字。如果浏览器支持 mp4 类型的文件，就可以直接播放 movie.mp4 这个视频；如果不支持，则尝试播放 ogg 类型的视频；如果这两种类型的文件都不支持，则会显示文字 “您的浏览器不支持 video 标签”。

video 标签常见的属性有：

属性	值	说明
autoplay	autoplay	视频就绪自动播放（Google 浏览器需要添加 muted 属性才能自动播放）
controls	controls	显示播放控件
width	像素值	设置播放器宽度
height	像素值	设置播放器高度
loop	loop	循环播放视频
preload	auto / none	是否预加载视频。 auto - 预先加载视频｜none - 不预先加载视频
src	url	视频的地址
poster	image url	加载时等待画面的图片地址
muted	muted	静音播放

2.2 音频标签

音频标签和视频标签的使用方式及属性相差无几。

3、新增的 input 标签

属性值	说明
type="email"	限制用户输入必须为 email 格式
type="url"	限制用户输入必须为 url 格式
type="date"	限制用户输入必须为日期
type="time"	限制用户输入必须为时间
type="month"	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	限制用户输入必须为手机号码
type="search"	搜索框
type="color"	颜色选择器

4、新增的表单属性

1. required： 该属性必填，不能为空

2. placeholder：表单的提示信息

3. autofocus： 自动聚焦

4. autocomplete：当用户开始键入时，浏览器基于之前输入过的值，是否显示出该字段中填写的选项。默认 autocomplete="on"，可以设置为关闭 autocomplete="off"。如果放在表单内，需要加上 name 属性并且成功提交。

5. multiple：可以多选文件提交