HTML5 新增元素的用法
一、结构元素
1、header
用法
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6）。
例子
<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>
2、nav
用法
nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
比如说页脚底部如果有个版权申明，我们就不建议使用nav元素，而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航。
例子
<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>
nav的多层嵌套，我们可以在下面新建一个独立的区块，我们使用article。
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>
总结nav元素的方法
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作
3、article
用法
article代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复，总之article它所表示的所展现的内容，是外表独立出来的内容，所以它有自己独立的标题、页脚。
例子
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<titile></title>
</head>
<body>
<article>
</header>
<h1>我是Article</h1>
<p>创建时间：<time pubdate=”pabdate”>2014/09/27</time></p>
</header>
<p>
<b>Article</b>是一个独一的区域
</p>
<footer>
<p><small>麦子学院版权所有</small></p>
</footer>
</article>
</body>
</html>
嵌套用法：在内容区域的下面添加一个section元素.
<section>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：朱朝兵</h3>
<p>
<time pudate datetime=”2014/09/27T21:00”>2小时前</time>
</p>
</header>
<p>
文章很好！
</p>
</article>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：小星星</h3>
<p>
<time pudate datetime=”2014/09/27T21:00”>2小时前</time>
</p>
</header>
<p>文章非常好！</p>
</article>
</section>
4、aside
用法
aside 标签定义其所处内容之外的内容，其内容应该与附近的内容相关，aside标签中的内容可用作文章的侧栏，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
例子
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
5、section
用法
section 字面上理解为“块”，“部分”，section元素代表一个页面或一个内容块的部分，一般作为主题块列表，在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。
section标签是成对出现的,以<section>开始,以</section>结束。section标签通常带有一个标题和一个内容块。
例子
<!doctype html>
<article>
<h1>Web编程语言比较</h1>
<p>web编程语言常用的有asp,asp.net,php,jsp</p>
<section>
<h2>asp</h2>
<p>asp全称Active Server Page</p>
</section>
<section>
<h2>asp.net</h2>
<p>asp的颠覆版本</p>
</section>
<section>
<h2>php</h2>
<p>草根动态语言，免费，强大</p>
</section>
</article>
使用section标签需要注意事项：
1、不要将<section>作为用来设置样式或行为的“钩子”容器，那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况，不要使用<section>。
3、不要为没有标题的内容区块使用<section>。
6、footer
用法
footer标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
例子
<header>
<h1>整个页面的头部</h1>
</header>
<article>
<header>
<h2>article的头部</h2>
</header>
<section>
<header>
<h3>section的头部</h3>
</header>
<p>section的内容部分</p>
<footer>
<h3>section的尾部</h3>
</footer>
</section>
<footer>
<h2>article的尾部</h2>
</footer>
</article>
<footer>
<h1>整个页面的尾部</h1>
</footer>
二、分组元素
1、figure和figcaption
figure用法
<figure> 标签用于对元素进行组合。
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
figcaption用法
<figcaption> 标签定义 figure 元素的标题（caption），“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
例子
不带有标题的figure元素：
<figure>
<img alt="Web前端之家" src="logo.png"/>
</figure>
带有标题的figure元素：
<figure>
<img alt="Web前端之家" src="logo.png"/>
<figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption>
</figure>
多个图片，同一个标题的figure元素
<figure>
<img alt="Web前端之家1" src="logo1.png"/>
<img alt="Web前端之家2" src="logo2.png"/>
<img alt="Web前端之家3" src="logo3.png"/>
<figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption>
</figure>
3、hgroup
用法
<hgroup> 标签用于对网页或区段（section）的标题进行组合。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
例子
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
三、页面交互元素
1、details
用法
<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。
例子
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
2、summary
用法
<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
例子
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
3、progress
用法
标签运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。
例子
<progress>
<span id="objprogress">85</span>%
</progress>
4、meter
用法
在全新的HTML 5中，可以使用< meter >标记元素实现百分比效果。< meter >是HTML 5中新增的标记，用于表示在一定数量范围中的值，例如，投票中各个候选人各占比例情况及考试分数等。< meter >元素仅是帮助浏览器识别HTML中的数量，而不对该数量做任何的格式修饰。在< meter >元素中有6个属性，通过这些属性会根据浏览器的特征以最好的方式展示这个数量。
例子
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
四、文本层次语义元素
1、time
用法
time是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time 元素</title>
</head>
<body>
<time datetime="2017-3-6">2017/3/6</time>
</body>
</html>
2、mark
用法
mark元素是HTML 5中新增的元素，主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。其使用方法与<em>和<strong>有相似之处，但相比而言，HTML 5中新增的<mark>元素在突出显示时，更加随意与灵活。
例子
<p>Do not forget to buy <mark>milk</mark> today.</p>
注意：虽然<mark>元素在使用效果上与<em>或<strong>元素有相似之处，但三者的出发点是不一样的。<strong>元素是作者对文档中某段文字的重要性进行的强调；<em>元素是作者为了突出文章的重点而进行的设置；<mark>元素是数据展示时，以高亮的形式显示某些字符，与原作者本意无关。
3、cite
用法
<cite>元素可以创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
例子
<p>
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>
五、全局属性
1、draggable
用法
在HTML5中要想实现拖放操作，至少要经过两个步骤：
1.将想要拖放的对象元素的draggable属性设为true，这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。
2.编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示：
dragstart开始拖放操作。
drag 拖放过程中。
dragenter 拖放过程中鼠标经过的元素，被拖放的元素开始进入本元素的范围内。
dragover 拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动。
dragleave 拖放过程中鼠标经过的元素，被拖放的元素离开本元素的范围。
drop拖放的目标元素，有其他元素被拖放到了本元素中。
dragend 拖放的目标元素，拖放操作结束。
例子
<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>施放示例</title>
<script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="../js/dragdrop.js"></script>
</head>
<body>
<h1>简单拖放示例</h1>
<div id="dragme" draggable="true" style="width:200px; border:1px solid gray; ">请施放</div>
<div id="text" style="width:200px; height:200px; border:1px solid gray; "></div>
</body>
</html>
2、hidden
用法
hidden 属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关，浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）
当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间。
例子
<div hidden> You can't see me!</div>
3、spellcheck
用法
spellcheck 属性规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为 text 的 input 元素中的值（非密码）；textarea 元素中的值；可编辑元素中的值。
属性值：
true 规定应当对元素的文本进行拼写检查；
false规定不应对元素的文本进行拼写检查。
例子
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
4、contenteditable
用法
contenteditable 属性规定是否可编辑元素的内容。
<element contenteditable="value">
属性值：
true规定可以编辑元素内容；
false规定无法编辑元素内容；
classname 继承父元素的 contenteditable 属性。
例子
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
