面试官：听说你精通 HTML 那你给我说一下你知道的语义化标签…

小小霜
824 阅读3分钟

语义化标签是自身带有含义的标签，能让人知道使用这个标签是用来做什么的，如 nav、section、aside、article 等，但是很多时候在日常开放中我们都是使用的 div、span 来代替的， 这样也是可以完成任务和需求的，而是对于语义化标签不用是比用错好的，但是作为一个有追求的前端工程师应该学会尽量用对语义化标签的。

正确使用语义化标签好处

  • 对开发者的阅读友好，不用看 css 也知道整篇网页的结构，便于团队开发和维护
  • 对机器阅读也适合，更利于搜索爬虫，搜索到更多有效的信息

作为自然语言的延伸

单纯的文字可能不足以表达一些我们想表达的东西，这时候就需要一些可以作为自然语言延伸的标签，比如说我想说我长胖了两斤，听到的人可以能就会想说才两斤自然浮动而已，这句话使用语义化标签改一下:我长胖了，em 表示语气的着重，看到的人可能就知道你强调的一个东西，这样一对比也就知道了 em 和strong 虽然看着差不多但是实际却不是一回事。总得来说就是语义化标签还能帮助我们消除一些歧义。

生成标题摘要的目录结构

使用正常的标题结构，可以让一篇文章生成一个完整的树形结构的目录，就想写 makedown 文档生成的结构一样 hgroup标题组标签

<hgroup>
  <h1>你好，世界</h1>
  <h2>经典问候语</h2>
</hgroup>

内在的结构是：你好，世界——经典问候语

section 代表一个独立的部分。它里面的标题会降一级

作为整体的语义标签

一个经典的 body

<body>
  <header>
    <nav>……</nav>
  </header>
  <aside>
    <nav>……</nav>
  </aside>
  <section>……</section>
  <section>……</section>
  <section>……</section>
  <footer>
    <address>……</address>
  </footer>
</body>

新闻文章页面

<body>
  <header>……</header>
  <article>
    <header>……</header>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>……</footer>
  </article>
  <article>……</article>
  <article>……</article>
  <footer>
    <address></address>
  </footer>
</body>

address 表示文章作者的联系方法

使用语义化组件呈现 Wiki 网页

image-20210923195504360.png

image-20210923200558047.png

abbr 表示缩写

<abbr title="World Wide Web">WWW</abbr>

hr 切分线，表示故事走向的转变或话题的转变

strong加粗，表示重要的信息

blockquote 和 q 表示直接引用

time 日期

cite 引述内容

interlinked by hypertext links, and accessible via the Internet.[1]

<cite>"What is the difference between the Web and the Internet?"</cite>. W3C
Help and FAQ. W3C. 2009. Archived from the original on
<time datetime="2015-07-09">9 July 2015</time>. Retrieved
<time datetime="2015-07-16">16 July 2015</time>.

figure 表示插入文章的内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内

figcaption表示插入内容的标题，不是必选

<figure>
  <img src="" alt="插入与文章相关的内容" />
  <figcaption>这里是表示上述内容的标题</figcaption>
</figure>

dfn 表示一段话里被定义的名词

The terms <dfn>Internet</dfn> and <dfn>World Wide Web</dfn> are often used
without much distinction.

pre表示已经预先排版好的，不需要浏览器再次排版

samp 表示示例输出

<pre><samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
</samp></pre>

code 显示的文本是代码

<pre><code>
        &lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
          &lt;/body&gt;
        &lt;/html&gt;
</code></pre>

还有一些没有用到的语义化的标签

small 表示补充评论，指细则，免责声明，注释，署名，版权。呈现为小号字体

s表示错误内容，常用与电商领域打折前的内容

i表示读的时候变调

b 表示关键字

u 表示避免歧义的标志

data 与time 类似，意义广泛可以自由定义

var 变量

kbd用户输入，表示键盘按键居多

sub 下标

sup 上标

mark表示高亮，内在高亮，读者的角度，不显示出来。呈现为黄色背景

wbr 可以换行的位置，当多个单词被粘得很长的时候用ss

menu 用于功能菜单的时候使用

dl dd dt 对一些术语进行定义

main 整个页面只有一个，表示主要内容，特殊的 div

avatar
文章
阅读
粉丝