HTML5的常用新特性你必须知道
1 新的<!DOCTYPE> 声明
HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 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>