首页 > 代码库 > HTML5-语义化标签
HTML5-语义化标签
article
-- 解释
article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
-- 示列
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
section
-- 解释
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
-- 示列
<body>
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
</body>
aside
-- 解释
aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。
-- 示列
<body>
<aside>
热门文章
</aside>
<aside>
广告
</aside>
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
</body>
hgroup
-- 解释
hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
-- 示列
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup> <hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>
header
-- 解释
header 标签定义文档的页面组合，通常是一些引导和导航信息。
-- 示列
<header>
<p>this is the page Logo</p>
<nav>this is page navigation</nav>
</header>
footer
-- 解释
footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
-- 示列
<footer> ? 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>
nav
-- 解释
nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。
-- 示列
<nav>
<ul>
<li><a href=http://www.mamicode.com/”articles.html”>Index of all articles
<li><a href=http://www.mamicode.com/”today.html”>Things sheeple need to wake up for today
<li><a href=http://www.mamicode.com/”successes.html”>Sheeple we have managed to wake
</ul>
</nav>
time
-- 解释
time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
-- 示列
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
mark
-- 解释
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
-- 示列
<p>Do not forget to buy <mark>milk</mark> today.</p>
figure
-- 解释
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
-- 示列
<p>黄浦江上的的卢浦大桥</p> <img src="http://www.mamicode.com/shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
figcaption
-- 解释
figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
-- 示列
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="http://www.mamicode.com/shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
contextmenu+menu
-- 解释
contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持，很悲催的]
-- 示列
<div>添加到系统右键菜单< contextmenu=mymenu /div> <menu type="context" id="mymenu" />
<!--进度条progress 直接的 每个浏览器样式不一样-->
<progress></progress>
<!--0.1指的是进度到百分之10 这样其余是空白的 算是进度指示条-->
<!--100指的是进度数值为100 那么0.1指100分之0.1 默认为1-->
<!--进度条想动用JS啊-->
<progress class="myStyle" value="http://www.mamicode.com/0.1" max="100"></progress>
<!--我想体现一个数据（固定的）比如华东地区的房子购买比例那么用进度条显示-->
<!--这个时候我们用mate标签-->
<!--这个没有什么浏览器支持-->
<!-- Value：表示当前标量的实际值；如果不做指定，那么meter标签中的第一个数字就会被认为是其当前实际值，如果标签内没有数字，那么标量的实际值就是0。
Min：当前标量的最小值；如不做指定则为0。
Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。
Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。
High：当前标量的高值区。
Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区 -->
<meter min="0" max="100" low="40" high="90" optimun="100" value="http://www.mamicode.com/91">A+</meter>
</body>
</html>
HTML5-语义化标签