Skip to main content

语义化标签

知识点​

语义化的作用:

  • 根据内容的结构 选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构
  • 同时也可以让机器更好地解析代码

传统

各标签应用场景​

用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

应用场景：

  • 网页头部单元
  • 文章标题，顶部等
  • 卡片标题，顶部等

实例：

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

与<header>对应，主要负责一些页脚，页眉，文章尾部信息，网页底部信息等

<header>元素定义导航链接集合。

实例：

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

<aside>

元素页面主内容之外的某些内容（比如侧栏）

<article>​

<article>元素定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

应用场景：

  • 包裹一个独立的博客文章、报纸文章、网页文章
<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

<section>​

<section> 元素定义文档中的节。根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。可以将网站首页划分为简介、内容、联系信息等节。

应用场景：

  • 包裹卡片
  • 首页的布局单元

实例：

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

<figure> 、 <figcaption> ​

这两个元素常常配搭使用

应用场景：

实例：

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

文献​