第3章-HTML5新增元素和属性

HTML5废除了很多元素，主要包括：

1.可以用CSS代替的元素

big、center、font、strike、basefont、s、tt、u等元素，它们均是纯粹地定义显示效果的元素，而在HTML5中，提倡把定义显示效果的代码统一放在CSS样式表中，因此以上元素在HTML5中不再使用，而是使用CSS样式替代。

2.frame、frameset她noframes

由于frame框架对网页可用性存在负面影响，所以HTML5中已经不支持frame框架，只支持iframe框架，或者使用服务器创建的由多个页面组成的复合页面形式。

3.不被所有浏览器支持的元素

对于applet、bgsound、marquee等元素，由于只有部分浏览器支持这些元素，因此HTML5中这些元素被废除。其中，<applet>元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可由JavaScript编程方式替代。

HTML5新增了一些改善文档结构的元素，使文档的结构更清晰、明确：

如header、footer、article、aside、section等，这使得开发人员可以更加语文化地创建文档，而在HTML4中，开发者实现这些功能时一般都使用div。HTML5的主体结构元素主要包括：article元素、section元素、nav元素、aside元素、time元素。

HTML5主体结构元素：

1.article元素

article元素表示独立、完整、可独自被外部引用的内容（如文章、帖子、评论或者独立的插件等）。article元素可以嵌套使用，内层内容原则上需要与外层内容关联。例如，针对一篇文章的评论就可以用嵌套article元素的方式，呈现文章评论的article元素嵌套在表示文章整体内容的article元素的里面。

<article>
	<header>
		<a href="http://www.w3.org/html/logo/">HTML5 TECHNOLOGY</a><br/>
	</header>
	<p>
		Imageination,meet implementation.HTML5 is the cornerstone of the W3C's open web platform;
		a framework designed to support innovation and foster the full potential the web has to offer.?......
	</p>
	<section>
		<h2>评论</h2>
		<article>
			<header>评论者：张三</header>
			<p>HTML5 identity system provides the visual vocabulary to clearly classify and  communicate our collective efforts.</p>
		</article>
	</section>
</article>

2.section元素

section元素用于对网站或应用程序中页面上的内容进行分块，通常由标题及内容组成，但session元素并非一个普通的容器元素，当一个容器需要被直接定义样式或行为时，推荐使用div，而非session元素。section元素强调分段和分块，而article元素则是强调独立性。注意：a.不要用section做设置样式的容器，这时应该用div；b.如果article、aside、nav元素更适合，就不要用section；c.不要给没有标题的内容区块使用session，可以使用HTML5轮廓工具检查页面中是否有没有标题的section。

<section>
	<h1>HTML5</h1>
	<p>HyperText Markup Language 5</p>
</section>

 3.nav元素

nav元素用于表示页面导航链接的部分。nav的使用场合主要有：a.传统导航条；b.侧边栏导航；c.页内导航；d.翻页操作。注意：不要用menu元素代替nav，menu是交互性元素，使用在Web程序中。

<h1>HTML5</h1>
<nav>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">课程介绍</a></li>
	</ul>
</nav>

 4.aside元素

aside元素用于表示article元素的内容之外的，与article元素的内容相关的页面或文章附属信息。aside元素使用场合包括：a.包含在article中，作为主要内容的附属信息，表示与当前文章相关的参考资料、名词解释等；b.在article之外使用，作为页面和站点全局的附属信息。

<article>
	<h2>章节列表</h2>
	<ul>主要内容</ul>
</article>
<aside>
	<section><h3>HTML5新增元素</h3></section>
	<section><h3>HTML5新增属性</h3></section>
</aside>

  5.time元素

time元素代表24小时中的某个时刻或某个日期，表示时刻时允许时差。它可以定义很多格式的日期和时间。它的datetime属性用于定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上<time>8:00</time>开始上课。</p>
<p>HTML5于<time datetime="2014-10-29">2014年</time>制定完成。</p>

HTML5非主体结构元素：

1.header元素

header元素是具有引导和导航作用的辅助元素，表示页面中一个内容区块或整个页面的标题。

<header>
	<h1>Welcome to my homepage</h1>
	<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

2.hgroup元素

hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。因为页面中有时候除了主标题，可能还需要子标题、副标题、宣传语，这时就需要对标题进行组合。

<article>
	<header>
		<hgroup>
			<h1>文章主标题</h1>
			<h2>文章子标题</h2>
		</hgroup>
		<p><time datetime="2013-03-20">2013年10月29日</time></p>
	</header>
	<p>文章正文</p>
</article>

 3.footer元素

footer元素用于表示整个页面或页面中一个内容区块的脚注，可以做一个区块的尾部内容，通常包括一些附加的信息，如文档作者、创作日期、联系信息、相关链接及版权信息。

<footer>
	<ul>
		<li>版本信息</li>
		<li>站点地图</li>
		<li>联系方式</li>
	</ul>
</footer>

 4.address元素

address元素用于呈现联系信息，如姓名、地址、网站、邮箱等联系方式。

<footer>
	<div>
		<address>
			<a title="文章作者:张三" href="#">张三</a>
		</address>
		发表于<time datetime="2015-08-01">2015年08月01日</time>
	</div>
</footer>

HTML5新增表单新功能：

HTML5表单新增了许多控件及其API，方便我们做更复杂的应用，而不用借助其他前端脚本语言，如JavaScript。需要放在<form>标签中的诸如input、button、select、textarea等标签元素在HTML5中完全可以放在页面的任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可把表单和表单元素关联起来。

<form id="myform"></form>
<input type="text" form="myform" value=""/>

HTML5表单新的输入类型：

1.email输入类型<input type="email" name="email">

2.url输入类型<input type="url" name="url">

3.日期时间相关输入类型<input type="date"/"time"/"month"/"week"/"datetime"/"datetime-local">

4.number输入类型<input type="number" max="10" min="0" step="1" value="5"/>

5.range输入类型<input type="range" max="10" min="0" step="1" value="5"/>，显示为滑动条

6.search输入类型<input type="search">，此输入类型用于输入一个搜索关键字，显示为常规的文本域

7.tel输入类型<input type="tel" pattern="\d\d\d- \d\d\d\d\d">，输入电话号码

8.color输入类型<input type="color">，颜色选择器，结果反馈到value值中

HTML5表单新的属性：

1.placeholder属性

placeholder属性提供一种提示(hint)，描述输入域所期待的值。提示会在输入域为空时显示，在输入域获得焦点时消失。它适用于<input>的如下标签：text、search、url、telephone、email、password。<input type="search" name="user_search" placeholder="Search W3School"/>

2.required/pattern属性

这是HTML5新加的验证属性。required属性规定必须在提交之前填写输入域，required属性适用于以下类型的<input>标签：text、search、url、telephone、email、password、date、pickers、number、checkbox、radio、file。pattern属性规定用于验证input域的模式，pattern类型为正则表达式，可以完成各种复杂的验证。pattern属性适用于以下类型的<input>标签：text、search、url、telephone、email、password。

<input name="required" required>
<input name="required1" required="required">
<input name="required2" pattern="^[1-9]\d{5}$">

 3.autofocus自动聚集属性

autofocus属性规定在页面加载时，域自动获得焦点，可在页面加载时聚焦到一个表单控件，类似于JavaScript的focus()方法。autofocus属性适用于所有<input>标签的类型。<input autofocus="true">

4.autocomplete自动完成属性

autocomplete属性规定form或input域应该拥有自动完成功能。一般来说，此属性必须启动浏览器的自动完成功能。autocomplete属性适用于<form>标签，以及以下类型的<input>标签：text、search、url、telephone、email、password、date、pickers、range、color。<input autocomplete="on/off">

5.novalidate属性

navalidate属性规定在提交表单时不应该验证form或input域。novalidate属性适用于<form>以及以下类型的<input>标签：text、search、url、telephone、email、password、date pickers、range、color。<form action="demo_form.asp" method="get" novalidate="true">

6.multiple属性

multiple属性规定在输入域中可选择多个值。multiple属性适用于以下类型的<input>标签：email、file。<input type="file" name="img" multiple="multiple" />

7.表单重写属性

表单重写属性允许重写form元素的某些属性设定。表单重写属性适用于以下类型的<input>标签：submit、image。表单重写属性有以下5个：formaction:重写表单的action属性；formenctype:重写表单的enctype属性；formmethod:重写表单的method属性；formnovalidate：重写表单的novalidate属性；formtarget:重写表单的novalidate属性。

8.list属性

list属性规定输入域的datalist。datalist是输入域的选项列表。list属性适用于以下类型的<input>标签：text、search、url、telephone、email、date pickers、number、range、color。<datalist>标签用于定义选项列表，要与input元素配合使用该元素，定义input可能的值。datalist及其选项不会被显示出来，它仅是合法的输入值列表。使用input元素的list属性绑定datalist，如下：

<input list="cars" />
<datalist id="cars">
	<option value="BMW"></option>
	<option value="Ford"></option>
	<option value="Volvo"></option>
</datalist>