1. HTML5的新特性
HTML5的新增特性主要是针对以前的不足，添加了一些新标签、新的表单和新的表单属性等。
1.1 HTML5新增的语义化标签
|
<header>：头部标签。 |
|
<nav>：导航标签。 |
|
<article>：内容标签。 |
|
<section>：定义文档某个区域。 |
|
<aside>：侧边栏标签。 |
|
<footer>：尾部标签。 |
注意：
这种语义化标准主要是针对搜索引擎的，在新标签页面中可以使用多次。在IE9中，需要把这些元素转换为块级元素。
1.2 HTML5新增多媒体标签
使用它们可以很方便的在页面中嵌入音频和视频，而不在去使用flash和其他浏览器插件。
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。
1.2.1 视频<video>
视频<audio>元素支持三种音频格式：
|
浏览器 |
MP4 |
WebM |
Ogg |
|
Internet Explorer |
YES |
NO |
NO |
|
Chrome |
YES |
YES |
YES |
|
Firefox |
YES 从 Firefox 21 版本开始 |
YES |
YES |
|
Safari |
YES |
NO |
NO |
|
Opera |
YES 从Opera 25版本开始 |
YES |
YES |
语法：
|
<video src="文件地址" controls="controls"></video > <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > |
视频<video>——常见属性
|
属性 |
值 |
描述 |
|
autoplay |
autoplay |
视频就緒自动插放（谷歐浏览器需要添加muted来解 |
|
controls |
controls |
向用户量示播放控件。 |
|
width |
pixels(像素） |
设置播放器宽度。 |
|
height |
pixels(像素） |
设置插放噐高庋。 |
|
loop |
loop |
播放完是否继续播放该视频，循环播放。 |
|
preload |
auto（预先加载视频) none(不应加载视频） |
规定是否预加载视频(如果有了autoplay 就忽路该属 |
|
src |
url |
视频ur地址。 |
|
poster |
Imgurl |
加载等待的画面图片。 |
|
muted |
muted |
静音播放。 |
1.2.2 音频<audio>
<audio>元素支持三种音频格式：
|
浏览器 |
MP3 |
Wav |
Ogg |
|
Internet Explorer |
YES |
NO |
NO |
|
Chrome |
YES |
YES |
YES |
|
Firefox |
YES |
YES |
YES |
|
Safari |
YES |
YES |
NO |
|
Opera |
YES |
YES |
YES |
语法：
|
<audio src="文件地址" controls="controls"></audio> < audio controls="controls"> <source src="happy .mp3" type="audio/mpeg"> <source src="happy.ogg" type="audio/ogg"> |
音频<audio>——常见属性
|
属性 |
值 |
描述 |
|
autoplay |
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
loop |
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
src |
url |
要播放的音频的 URL。 |
1.3 HTML5 新增的 input 类型
|
属性值 |
说明 |
|
type="email" |
限制用户输入必须为Email类型。 |
|
type="url" |
限制用户输入必须为URL类型。 |
|
type="date" |
限制用户输入必须为日期类型。 |
|
type="time" |
限制用户输入必须为时间类型。 |
|
type="month" |
限制用户输入必须为月类型。 |
|
type="week" |
限制用户输入必须为周类型。 |
|
type="number" |
限制用户输入必须为数字类型。 |
|
type="tel" |
手机号码。 |
|
type="search" |
搜索框。 |
|
type="color" |
生成一个颜色选择表单。 |
1.4 HTML5 新增的表单属性
|
属性 |
值 |
说明 |
|
required |
required |
表单拥有该属性表示其内容不能为空，必填。 |
|
placeholder |
提示文本 |
表单的提示信息，存在默认值将不显示。 设置方式修改placeholder里面的字体颜色： input::placeholder {
}
|
|
autofocus |
autofocus |
自动聚焦属性，页面加载亮成自动聚焦到指定表单。 |
|
autocomplete |
off / on |
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 |
|
multiple |
multiple |
可以多选文件提交。 |