html5新特性

新特性

一、新增语义化标签:

签	描述
	头部标签 定义文档的页眉（介绍信息）。
	导航标签 定义导航链接的部分。
	内容标签 定义外部的内容。
	块级标签
	侧边栏标签
	尾部标签 定义文档或节的页脚。

1、header和footer以及中间内容区

<header>标题</header>
....内容区...
<footer></footer>

2、aside

常用例子：页面侧边栏、广告、友情链接、文章引语（内容摘要）.

<aside>
    侧边内容
</aside>

2、section

一个主题性的内容分组，通常包含一个头部（header），可能还包含一个尾部（footer）。

第一组内容
<section>
    <header><h2>标题</h2></header>
    ...其他内容...
</section>
第二组内容
<section>
    <header><h2>标题</h2></header>
    ...其他内容...
</section>

注意：div与section的比较：div应用更广泛，只要你想为一个区域定义一个样式，就可以使用div标签，section包含的内容是一个更明确的主题，通常有标题区域。

3、main

显示页面的主体内容，每个页面只能包含一个main标签main标签中不包含网站标题、logo、主导航、版权声明等信息。

<main>
<article>文章内容1</article>
    <article>文章内容2</article>
    <article>文章内容3</article>
    <article>文章内容4</article>
</main>

4、figure figcaption

figure:用于对元素进行组合

figcaption:定义 figure 元素的标题，“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
<img src="xx" />
    <figcaption>图片描述</figcaption>
</figure>

二、增强型表单

1、新的表单元素

datalist、keygen、output

1.1、datalist

（1）datalist 元素规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的；

（2）如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

搜索: <input type="url" list="url_list" name="link" />
		<datalist id="url_list">
		<option label="W3School" value="http://www.W3School.com.cn" />
		</datalist>

注意：option 元素永远都要设置 value 属性

1.2、keygen

（1）keygen 元素的作用是提供一种验证用户的可靠方法

（2）keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

（3）目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form action="demo_form.asp" method="get">
		Username: <input type="text" name="usr_name" />
		Encryption: <keygen name="security" />
		<input type="submit" />
		</form>

1.3、output

（1）output 元素用于不同类型的输出，比如计算或脚本输出：

<output id="result" onforminput="resCalc()"></output>

2、表单属性

2.1、 form 属性：

1、autocomplete

（1）规定 form 或 input 域应该拥有自动完成功能

（2）适用于 标签，

（3）当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

<form action="demo_form.asp" method="get" autocomplete="on">
	 <input type="email" name="email" autocomplete="off" /><br />
		<input type="submit" />
		</form>

2、novalidate

（1）novalidate 属性规定在提交表单时不应该验证 form 或 input 域

（2）novalidate 属性适用于 以及以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
		E-mail: <input type="email" name="user_email" />
		<input type="submit" />
		</form>