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