前端面试题-HTML语义化标签

1、HTML5语义化标签

标签	描述
<article>	页面独立的内容区域。
<aside>	页面的侧边栏内容。
<bdi>	容许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	命令按钮，好比单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	对话框，好比提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	<figure> 元素的标题
<footer>	section 或 document 的页脚。
<header>	文档的头部区域
<mark>	带有记号的文本。
<meter>	度量衡。仅用于已知最大和最小值的度量。
<nav>	导航连接的部分。
<progress>	任何类型的任务的进度。
<ruby>	ruby 注释（中文注音或字符）。
<rt>	字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。
<section>	文档中的节（section、区段）。
<time>	日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

2、语义化标签的使用

2.1 <title></title> 页面主要内容

（1）<title> 标签的特色是简短、描述性、惟一，用于提高搜索引擎排名。

（2）搜索引擎会把 title 做为判断页面主要内容的指标，有效的 title 应该包含几个与页面内容密切相关的关键字，建议将 title 的核心内容写在前 60 个字符。

2.2 <header></header> 页眉

（1）HTML5 规范描述为“一组解释性或导航型性的条目”，一般有网站标志、主导航、全站连接以及搜索框。

2.3 <nav></nav> 导航

（1）页面的导航连接区域，用于定义页面的主要导航部分。

（2）导航一般使用 <ul> 无序列表。如果面包屑连接，则使用 <ol> 有序列表。

（3）HTML5 规范不推荐对辅助页脚连接使用 nav，除非页脚再次显示顶级全局导航、或者是招聘信息等重要连接。

2.4 <main></main> 主要内容

（1）网站页面的主要内容，而且一个页面只能使用一次 <main> 标签。

（2）如果 web 应用，则包含其主要功能。

2.5 <article></article> 文章标记

（1）表示的是一个文档、页面、应用或是网站中的一个独立的容器。

（2）HTML5 规范声明 <article> 标签适用于自包含的窗口小部件:股票行情，计算器，钟表，天气窗口小部件等。

（3）<article>这个标签能够嵌套使用，可是他们必须是部分与总体的关系。

2.6 <section></section> 区块

（1）一组类似主题的内容，通常会有一个标题。

（2）实现好比文章的章节，标签式对话框中的各类标签页等功能。

2.7 <aside></aside> 侧边栏

（1）表示一部份内容与页面的主体并无较大的关系，而且能够独立存在。

（2）实现好比升式引用、侧边栏、相关文章的连接、广告、友情连接等功能。

2.8 <footer></footer> 页脚

（1）和 <header> 标签对应，能够实现好比附录、索引、版权页、许可协议等功能。

2.9 <cite></cite> 引用

（1）表示它所包含的文本对某个参考文献的引用，好比书籍或者杂志的标题。

（2）按照惯例，引用的文本将以斜体显示。

（3）用 <cite> 标签把指向其余文档的引用分离出来，尤为是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。

2.10 <blockquote></blockquote> 块引用

（1）<blockquote> 与 </blockquote> 之间的全部文本都会从常规文本中分离出来，常常会在左、右两边进行缩进（增长外边距），并且有时会使用斜体。也就是说，块引用拥有它们本身的空间。

2.11 <q></q> 短的引用

（1）浏览器常常在引用的内容周围添加引号。

（2）根据 HTML 4.01 规范，q 元素应当使用分界引号来呈现，就是说，q 元素包含的文本必须以引号来开始和结束。

2.12 <time></time> 日期或时间

（1）若是未定义 datetime 属性，则必须在元素的内容中规定日期或时间。

2.13 <abbr></abbr> 简称或缩写

（1）经过对缩写进行标记，您可以为浏览器、拼写检查和搜索引擎提供有用的信息。

（2）能够在 <abbr> 标签中使用全局的 title 属性，这样就可以在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

2.14 <dfn></dfn> 特殊术语或短语的定义

（1）如今流行的浏览器一般用斜体来显示 <dfn> 中的文本。

（2）与其余许多基于内容的样式和物理样式标签同样，<dfn> 标签尽可能少用为妙。

2.15 <del></del> 删除的文本

（1）和 <ins> 标签配合使用，来描述文档中的更新和修正。

2.16 <ins></ins> 插入文本

2.17 <code></code> 源代码

（1）用于表示计算机源代码或者其余机器能够阅读的文本内容。

2.18 <pre></pre> 预格式化的文本

（1）被包围在 pre 元素中的文本一般会保留空格和换行符。而文本也会呈现为等宽字体。

（2）若使用 <pre> 标签来定义计算机源代码，好比 HTML 源代码，则使用符号实体来表示特殊字符，好比 "<" 表明 "<"，">" 表明 ">"，"&" 表明 "&"。

（3）能够致使段落断开的标签（例如标题、<p> 和 <address> 标签）毫不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，可是这种行为在全部浏览器上并不都是同样的。

（4）pre 元素中容许的文本能够包括物理样式和基于内容的样式变化，还有连接、图像和水平分隔线。

阅读更多