语义化标签的使用
1.<title></title> 页面主要内容
（1）<title> 标签的特点是简短、描述性、唯一，用于提升搜索引擎排名。
（2）搜索引擎会把 title 作为判断页面主要内容的指标，有效的 title 应该包含几个与页面内容密切相关的关键字，建议将 title 的核心内容写在前 60 个字符。
2. <header></header> 页眉
（1）HTML5 规范描述为“一组解释性或导航型性的条目”，通常有网站标志、主导航、全站链接以及搜索框。
3. <nav></nav> 导航
（1）页面的导航链接区域，用于定义页面的主要导航部分。
（2）导航通常使用 <ul> 无序列表。若是面包屑链接，则使用 <ol> 有序列表。
（3）HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。
4. <main></main> 主要内容
（1）网站页面的主要内容，并且一个页面只能使用一次 <main> 标签。
（2）若是 web 应用，则包含其主要功能。
5. <article></article> 文章标记
（1）表示的是一个文档、页面、应用或是网站中的一个独立的容器。
（2）HTML5 规范声明 <article> 标签适用于自包含的窗口小部件:股票行情，计算器，钟表，天气窗口小部件等。
（3）<article>这个标签可以嵌套使用，但是他们必须是部分与整体的关系。
6. <section></section> 区块
（1）一组相似主题的内容，一般会有一个标题。
（2）实现比如文章的章节，标签式对话框中的各种标签页等功能。
7. <aside></aside> 侧边栏
（1）表示一部分内容与页面的主体并没有较大的关系，并且可以独立存在。
（2）实现比如升式引用、侧边栏、相关文章的链接、广告、友情链接等功能。
8. <footer></footer> 页脚
（1）和 <header> 标签对应，可以实现比如附录、索引、版权页、许可协议等功能。
9. <cite></cite> 引用
（1）表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
（2）按照惯例，引用的文本将以斜体显示。
（3）用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。
10. <blockquote></blockquote> 块引用
（1）<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
11. <q></q> 短的引用
（1）浏览器经常在引用的内容周围添加引号。
（2）根据 HTML 4.01 规范，q 元素应当使用分界引号来呈现，就是说，q 元素包含的文本必须以引号来开始和结束。
12. <time></time> 日期或时间
（1）如果未定义 datetime 属性，则必须在元素的内容中规定日期或时间。
13. <abbr></abbr> 简称或缩写
（1）通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
（2）可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
14. <dfn></dfn> 特殊术语或短语的定义
（1）现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。
（2）与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙。
15. <del></del> 删除的文本
（1）和 <ins> 标签配合使用，来描述文档中的更新和修正。
16.<ins></ins> 插入文本
17. <code></code> 源代码
（1）用于表示计算机源代码或者其他机器可以阅读的文本内容。
18 <pre></pre> 预格式化的文本
（1）被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
（2）若使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，则使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
（3）可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
（4）pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。
更多学习分享，欢迎关注下面的公众号，每天更新更多新内容哦！
网友评论