标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。即：文本斜体显示，具有语义功能，表示内容需要重读
<cite>
表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。
<blockquote>
定义块引用、长引用，代表其中的文字是引用内容。在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上（如：<blockquote cite="http://xxx.com"></blockquote>），若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素
<q>
定义短的引用，样式方面内容两边会显示出双引号。 <q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签
<code>
用于表示计算机源代码或者其他机器可以阅读的文本内容。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 标签
<mark>
代表突出显示的文字，默认内容的背景为黄色。例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词
<time>
定义日期或时间，或者两者。此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点
HTML5语义化兼容
不认识HTML5语义元素的浏览器不知道应该把它们显示为块级元素，所以很可能会把它们都挤到一起。为了解决这个问题，只要在样式表中添加一条 “超级规则” 即可：
article, aside, figure, figcaption, footer, header, main, nav, section, summary{
display:block;
}
然而上面的方法有自己的局限性，因为一些浏览器（ie8及ie8以下）并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：
<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<noscript>
<strong>警告！</strong>
您的浏览器不支持HTML5，我们需要运行JavaScript脚本来给您提供更好的服务；
可惜的是您的浏览器已禁用了JS脚本，请启用它显示此页；
</noscript>
<![endif]-->
语义化实战
简化版语义结构图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>语义化实战结构模型</title>
<meta content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
最全面的语义结构理解图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>语义化实战结构模型</title>
<meta content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<p>作者：怪诞咖啡</p>
<nav>
<h2>text</h2>
<ul>
<li>1</li>
<li>2</li>
<li>...</li>
</ul>
</nav>
</header>
<aside>...</aside>
<main>
<article>...</article>
<article>...</article>
<article>
<h2>h2标题</h2> ...
<section>
<h3>h3标题</h3> ...
</section>
<section>
<h3>h3标题</h3> ...
<section>
<h4>h4标题</h4> ...
</section>
</section>
</article>
</main>
<div>
<aside>
<!-- “胖”页脚的内容 -->
<img src="xxx.jpg" alt="图片"> ...
</aside>
<footer>
<!-- 标准页脚的内容 -->
<p>页脚</p>
</footer>
</div>
</body>
</html>
关于站点的标题结构
一个页面中可以有多个一级标题吗？这样做到底好不好？
根据HTML的官方说法，一个页面中可以有任意多个一级标题。
但是，很多网站开发人员更倾向于每个页面只使用一个一级标题，因为这样能保证网页的无障碍性。（因为使用屏幕阅读器的人在从一个二级标题跳到另一个二级标题的时候，有可能错过中间的一级标题。）
也有不少网络维护人员认为，每个页面就应该只有一个一级标题，这个一级标题在整个网站是独一无二的，可以明确地告诉搜索引擎网站中有什么内容。
不过，在页面中每个主要部分都使用一级元素，比如侧边栏、文章等，同样是允许的。
简言之，如何设计站点的标题结构是一个没有唯一答案的命题。不过，随着HTML5获得胜利并统治Web，好像多个 <h1> 的设计会越来越时髦。
不过现在，很多开发人员为了让屏幕阅读器开心，仍然坚持只使用一个 <h1>。
相关文章
精彩导读
热门资讯
关注我们
