首页 > 代码库 > HTML5中的新增元素
HTML5中的新增元素
HTML5中新增了大量的元素与属性，这些新增的元素和属性使HTML5的功能变得更强大，使网页设计效果有了更多的实现可能。
新增的主体结构元素
section元素
<section>标签定义文档中的节，比如章节，页眉，页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6等元素结合起来使用，显示文档结构。
<section>
<h1>...</h1>
<p>...</p>
</section>
article元素
<article>标签定义外部的内容。外部内容可以是来自外部的新闻提供者的一篇新文章，来自Blog的文本，来自论坛的文本，或者是来自其他外部源的内容。
<article>
...
</article>
section元素与article元素的区别
article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。
section元素用于对网站或应用程序中页面上的内容进行分块。
aside元素
aside元素一般用来表示网站当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的广告，导航条，引用，侧边栏评论部分，以及其他区别于主要内容的部分。
aside元素主要有以下两种使用方法：
第一种：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料，名词解释等。
<article>
<h1>...<h1>
<p>...</p>
<aside>...</aside>
</artcile>
第二种：在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接，博客中的其他文章列表，广告单元等。
<aside>
<h2>...<h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
</aside>
nav元素
<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
<nav>
<a href="">home</a>
<a href="">previous</a>
<a href="">next</a>
</nav>
time元素
<time>是HTML5新增加的一个标记，用于定义时间和日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性datetime设为相应的时间或日期即可。
<p>
<time>
...
</time>
</p>
<p>
<time datetime="2014-3-17" pubdate="true">
...
</time>
</p>
pubdate属性表示时间是否为发布日期
新增的非主体结构元素
在HTML5中新增了一些非主体的结构元素，如:header,hgroup,footer等
header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的内容区块的标题，但也可以包含其他内容，例如数据表格，搜索表单或相关的logo图片。
<header>
<h1>...</h1>
<p>...</p>
</header>
hgroup元素
<hgroup>标签用于对网页或区段(section)的标题进行组合。hgroup元素通常会将h1~h6元素进行分组，譬如将一个内容区块的标题及其子标题分为一组。
<hgroup>
<h1>...<h1>
<h2>...<h2>
</hgroup>
footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读链接及版权信息等。
<footer>...</footer>
figure元素
figure元素是一种元素的组合，可带有标题。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片，统计图或代码示例。
<figure>
<h1>...<h1>
<p>...</p>
</figure>
用figcaption元素为其添加标题
address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者姓名，网站链接地址，电子邮箱，真是地址和电话号码等。
<address>
<a href="">...</a>
...
</address>
新增其它常用元素
除了结构元素外，在HTML5中，还新增了其它元素，如progress元素，command元素，embed元素，mark元素和details元素等。
mark元素
mark元素主要用来呈现需要突出显示或高亮显示的文字。
<mark>...</mark>
rp,rt与ruby元素
ruby元素由一个或多个字符和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持ruby元素时显示的内容。
progress元素
progress元素表示运行中的进程，可以使用progress元素来显示javascript中耗费时间的函数进程。
command元素
command元素表示用户能够调用的命令，可以定义命令按钮，比如单选按钮，复选框或按钮。
<command type="command">...</command>
使用command元素标记标记一个按钮
<html>
<body>
<menu>
<command onclick="alert(‘hello world‘)">click me!</command>
<menu>
</body>
</html>
注意：只有当command元素位于menu元素内时，该元素才是可见的，否则不会显示这个元素，但是可以用它规定键盘快捷键。
embed元素
embed元素用来插入各种多媒体，格式可以是midi，WAV，au，MP3等。
<embed src=""/>
details与summary元素
details元素表示用户要求得到并且可以得到的细节信息，与summary元素配合使用。summary元素提供标题或图例。标题是可见的，会显示出细节信息。summary元素应该是details元素的第一个子元素。
<details>
<summary>...</summary>
...
</details>
datalist元素
datalist用来辅助文本框的输入功能，它本身是隐藏的，与表单文本框中的list属性绑定，即可将list属性值设置为datalist的ID号，类似suggest组件。目前只支持opera浏览器
新增全局属性
HTML5中新增了许多全局属性
contenteditable属性
contenteditable属性是HTML5中新增的标准属性，其主要功能是指定是否允许用户编辑内容。该属性有两个值：TRUE和FALSE
spellcheck属性
spellcheck属性是HTML5中的新属性，规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为text的input元素中的值（非密码），textarea元素中的值，可编辑元素中的值。
tabindex属性
tabindex属性克设置或返回按钮的Tab键控制次序。打开页面，连续按下Tab键，会在按钮之间切换，tabindex属性则可以记录显示切换的顺序。
新增的其他属性
新增属性主要分为三大类：表单相关的属性，链接相关的属性和其他新增属性
表单相关的属性
autocomplete
autocomplete属性规定form或input域应该拥有自动完成功能。autocomplete适用于<form>标签，以及以下类型的<input>标签：text，search，URL，telephone，Email，password，datepickers，range以及color。
使用autocomplete属性的实例
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp"method="get"autocomplete="on">
姓名:<input type="text" name="姓名"/><br/>
性别:<input type="text" name="性别"/><br/>
邮箱:<input type="text" name="email" autocomplete="off"/><br/>
<input type="submit"/>
</form>
</body>
</html>
autofocus属性
autofocus属性规定在页面加载时，域自动的加载焦点。autofocus属性适用于所有<input>标签的类型
<input type="text" name="user_name" autofocus="autofocus"/>
form属性
form属性规定输入域所属的一个或多个表单。form属性适用于所有<input>标签的类型，必须引用所属表单的id。
form overrides attributes
表单重写属性允许重写form元素的某些属性设定
height和width
height和width属性用于规定image类型的input标签的图像高度和宽度。
<input type="image" src="" width="99" height="99"/>
list属性
list属性规定输入域的datalist。datalist是输入域的选项列表，list属性适用于以下类型的<input>标签：text，search，URL，telephone，Email，datepickers，number，range以及color。
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp"method="get">
主页:<inpout type="url" list="url_list"name="link"/>
<datalist id="url_list">
<option label="baidu" value="http://www.mamicode.com/www.baidu.com"/>
<option label="qq" balue="www.qq.com"/>
</datalist>
<input type="submit"/>
</form>
</body>
</html>
max,min,step属性
max，min,step属性用于为包含数字或日期的input类型规定限定（约束）。max属性规定输入域所允许的最大值；min属性规定输入域所允许的最小值；step属性为输入域规定合法的数字间隔（如果step=“3”，则合法的数是-3,0,3,6等）
max，min，step属性适用于以下类型的<input>标签：data pickers,number以及range。
<input type="number" name="points" min="0"max="10"step="3"/>
multiple属性
multiple属性规定输入域中可选择多个值。multiple属性适用于以下类型的<input>标签：Email，file。
<input type="file" name="img" multiple="multiple"/>
pattern属性
pattern属性规定用于验证input域的模式（pattern）。pattern属性适用于以下类型的<input>标签：text，search，URL，telephone，Email以及password。
placeholder属性
placeholder属性提供一种提示（hint），描述输入域所期待的值。该属性适用于以下类型的<input>标签：text，search，URL，telephone，Email以及password。
<input type="search" name="user_search" placeholder="baidu"/>
required属性
required属性规定必须在提交之前填写输入域(不能为空).required属性适用于以下类型的<input>标签：text,search,url,telephone,email,password,date pickers,number以及checkbox,radio,file.
<input type="text" name="usr_name"required="required"/>
链接相关属性
media属性
media属性规定目标URL是为哪种类型的媒介/设备进行优化的，只能在href属性存在时使用。
type属性
在HTML5中，为area元素增加了type属性，规定目标URL的MIME类型，仅在href属性存在时使用
<input type="value">
sizes属性
为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小。
target属性
为base元素增加了target属性，主要目的是保持与a元素的一致性。
<a href="" target="_blank">新连接</a>
------------------------------------------------------------