（1）HTML5的经常使用新特性你必须知道

时间 2020-05-23

标签 html5 html 经常使用特性必须知道栏目 HTML5 繁體版

原文原文链接

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

1 新的<!DOCTYPE> 声明

HTML 有多个不一样的版本，只有彻底明白页面中使用的确切 HTML 版本，浏览器才能彻底正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。javascript

1.1 经常使用的声明

HTML5html

<!DOCTYPE html>

HTML 4.01 混杂模式（该 DTD 包含全部 HTML 元素和属性，包括展现性的和弃用的元素（好比 font）。不容许框架集（Framesets）。）html5

<!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）。）java

<!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 标签的类型。this

User name: <input type="text" name="user_name"  autofocus="autofocus" />

5.2 form 属性

form 属性规定输入域所属的一个或多个表单。注释：form 属性适用于全部 input 标签的类型。 form 属性必须引用所属表单的 id：url

<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 标签。spa

<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>