语义标签

语义化标签兼容问题

低版本浏览器，会自动将这些标签识别成行内元素

• 解决方式1：在该标签的css中设置标签的display: block，通过DOM的方式创建这个标签document.createElement("header")
• 解决方式2：低版本 IE 浏览器引入插件

<!-- [if lte IE 8] >
<script src="html5shiv.js"></script>
<! [endif] -->

hgroup、h1、h2

• <hgroup>标签用于对网页或区段（section）的标题进行组合。
• 在hgroup中的h1-h6被视为同一标题的不同组成部分。

abbr

• <abbr>标签指示简称或缩写，可与title属性配合使用，为浏览器、拼写检查和搜索引擎提供有用的信息。

hr

• hr 标签在 HTML 页面中创建一条水平线，没有结束标签，表示段落级元素之间的主题转换。

aside、nav

• <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
• <nav> 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。只用来将一些热门的链接放入导航栏。

article

• <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

blockquote、q、cite

• <blockquote> 元素，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。
• <q> 标签表示一个封闭的并且是短的行内引用的文本，请不要引入换行符。
• <cite> 标签定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

figure、figcaption

• <figure> 元素代表一段独立的内容, 经常与说明 <figcaption> 元素（表示与其相关联的图片的说明/标题）配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

dfn

• <dfn> 标签可标记那些对特殊术语或短语的定义，通常用斜体来显示。

pre、samp、code

• <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
• <samp> 元素用于标识计算机程序输出，定义样本文本。
• <code> 元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示。

i、em、b、strong、mark

• i 和 em 标签包围的文字将会以斜体呈现，b 和 strong 标签包围的文字则会加粗显示，mark 标签包围的文字有黄色背景。
• <i>： 表示不同语态或特性的文本，被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用
• <em>：被强调的文本，突出强调的位置会改变语句本身的意义
• <b>：为了突出显示关键词、产品名称等，在没有其他标记比较合适时使用它
• <strong>：重要的文本，突出包含文本的重要性、严重性和紧急性等
• <mark>：被标记的或者高亮显示的文本