HTML5的常用新特性你必须知道

时间:2022-04-02 19:36:50

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>