HTML5 中常用的新特性

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

1、新增的语义化标签

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

<header>头部标签</header>

<nav>头部标签</nav>

<article>内容标签</article>

<section>定义文档某个区域</section>

<aside>侧边栏标签</aside>

<footer>尾部标签</footer>

2、新增的多媒体标签

2.1 视频标签 <video>

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

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签
</video>

在上面的代码块中，包含了两个类型不同的 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 音频标签 <audio>

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

<audio controls="controls">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签
</audio>

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： 该属性必填，不能为空

<input type="email" required />

2. placeholder：表单的提示信息

<input type="email" placeholder="请输入邮箱" />

3. autofocus： 自动聚焦

<input type="email" placeholder="请输入邮箱" autofocus/>

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

<input type="email" placeholder="请输入邮箱" name="email" autocomplete="on" />

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

<input type="file" multiple />