您的位置：首页 > 其它

语义化标签及其示例1

2016-07-15 19:14 162 查看

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=”articles.html”>Index of all articles</a></li>

<li><a href=”today.html”>Things sheeple need to wake up for today</a></li>

<li><a href=”successes.html”>Sheeple we have managed to wake</a></li>

</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="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

figcaption

-- 解释

figcaption 标签定义 figure
元素的标题（caption）。"figcaption"
元素应该被置于 "figure"
元素的第一个或最后一个子元素的位置。

-- 示列

<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

contextmenu+menu

-- 解释

contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持，很悲催的]

-- 示列

<div>添加到系统右键菜单< contextmenu=mymenu /div> <menu type="context" id="mymenu" />

右击我试试

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航