HTML5的常用新特性你必须知道
HTML5的常用新特性你必须知道
1 新的 声明
HTML 有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
1.1 常用的声明
HTML5
<!DOCTYPE html>HTML 4.01 混杂模式（该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 严格模式（该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2 Figure元素
figure 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
<img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>3 重新定义的small
small 标签呈现小号字体效果。
small 标签和它所对应的 big 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 small 标签将不起任何作用。
与 big 标签类似，small 标签也可以嵌套，从而连续地把文字缩小。每个 small 标签都把文本的字体变小一号，直到达到下限的一号字。
4 Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
5 html5表单新特性
5.1 autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 input 标签的类型。
User name: <input type="text" name="user_name" autofocus="autofocus" />5.2 form 属性
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 input 标签的类型。
form 属性必须引用所属表单的 id：
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />5.3 height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 input 标签。
<input type="image" src="img_submit.gif" width="99" height="99" />5.4 placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
<input type="search" name="user_search" placeholder="Search W3School" />6 Audio支持
HTML5提供了audio 标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio> 7 Mark元素
把 mark 元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>