您的位置：首页 > Web前端 > HTML5

HTML5排版 语义化标签

2014-04-04 00:40 477 查看
HTML中的所有标题标签，从
<h1>
到 
<h6>
均可用。

在标题内还可以包含
<small>
标签或
.
，可以用来标记副标题。

<small>元素变小

<strong>强调

<em>斜体

<b>
表示在不增加额外重要性的同时将词或短语高亮显示，
<i>
大部分用于发言、技术短语等情况。

<mark>高亮

<abbr>

<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。

通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<address>地址

<blockquote>引用 可通过<small>来注明来源

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

无序列表

<ul><li>...</li></ul>

有序列表

<ol><li>...</li></ol>

带有描述的短语列表

<dl><dt>变粗短的短语</dt><dd>描述类短语</dd></dl>

代码<code></code>

多行代码<pre></pre>

表格

<table></table>

<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

HTML5提供的<aside>元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，<aside>元素有两种使用方法：

n 被包含在<article>中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

n 在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

header元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6，或者hgroup元素标签)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

同一个页面中，每一个内容区块都可以有自己的<header>元素，

<header>
<h1>The most important heading on this page</h1>
</header>

<article>
<header>
<h1>Title of this article</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>

<header>元素通常包含一个标题标签(h1至h6)或是hgroup。另外，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片；根据最新的W3C HTML5规范更新，<nav>元素标签也可以在<header>中使用。

footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息，如作者、相关阅读链接以及版权信息等。

过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：

在同一个页面中可以使用多个<footer>元素，即可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如，我们可以将<footer>直接写在<section>或是<article>中：

address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。

nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用<footer>元素是最恰当的，而不需要<nav>元素。

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>


<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1> Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p> ...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航