如何运用语义类标签来呈现网页？

最新推荐文章于 2021-11-23 13:07:40 发布

置顶 stormzi

最新推荐文章于 2021-11-23 13:07:40 发布

阅读量184

点赞数

分类专栏： HTML 文章标签： HTML 语义标签

本文链接：https://blog.csdn.net/stormzi/article/details/89742653

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 的标签可以分为很多种，比如 img、video、audio 之类的替换型媒体标签。我今天要讲的标签是：语义类标签。

语义类标签也是大家工作中经常会用到的一类标签，主要的区别在于它们表示了不同的语义，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标
签代为表达。

我们现在写代码，很多都不用复杂的语义标签，只靠 div 和 span 就能撸个页面。这样做实际通上也行的，但是在很多情况下语义类标签也有它们自己无可替代的优点：语义类标签对开发者更为友好，使用语义类标签增强了代码的可读性，便于团队的开发和维护；除了对人类友好之外，语义类标签也十分适宜机器阅读，更适合搜索引擎检索（SEO）。但是如果错误地使用语义标签，就会给机器阅读造成混淆、增加嵌套，给 CSS 的编写加重负担。

作为整体结构

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

aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等性质的内容。侧边栏是 aside，但是aside 不一定是侧边
栏。

除此之外，还有 article，它是一种特别的结构，它表示有独立性质的文章，在文章主体部分，若主体部分具有明确的独立性，则可以用 article 来包裹。。多文章结构可以用article来组织：

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

hgroup, h1, h2

h1-h6 表示了文章中不同层级的标题。有时我们会有副标题，为了避免副标题产生额外的一个层级，我们使用 hgroup 标签，hgroup 是标题组。

abbr

abbr 标签表示缩写

<abbr title="Republic Company">REC</abbr>

hr

如果我们需要表示一条很长的横线，而我们都知道 hr 标签表示横向分隔线，那么是否要用 hr 呢？因为hr 表示故事走向的转变或者话题的转变，所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现，是不需要用hr的。

blockquote,q,cite

三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。

figure,figcaption

插入文章中的内容(图片，代码、表格等)，只要是具有一定自包含性（类似独立句子）的内容，都可以用 figure。我们用 figcaption 表示内容的标题，也可以没有标题。

<figure>
 <img src=""/>
 <figcaption>nowadays's polution</figcaption>
</figure>

dfn

dfn 标签是用来包裹被定义的名词

pre, samp, code

pre 元素可定义预格式化的文本，即不需要浏览器帮我们做自动换行，因此可以使用 pre 标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在<pre> 所定义的块里。

<samp> 标签是一个短语标签，对文档中的文本进行格式化：<samp>计算机样本</samp>，用来定义计算机程序的样本文本。

提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容

补充

标签	说明
small	之前表示字体缩小的废弃标签，现在H5表示补充评论
s	之前表示划线的废弃标签，现在H5表示错误的内容，常用于电商表示打折前的价格
i	之前表示斜体的废弃标签，现在H5表示读的时候变调
b	之前表示黑体的废弃标签，现在H5表示关键字
u	之前表示下划线的废弃标签，现在H5表示避免歧义的标记
data	跟time标签类似，给机器阅读的内容，意义广泛，可以自由定义
kbd	用户输入，表示键盘按键居多
sub	下标，多用于化学/物理/数学领域
sup	上标，多用于化学/物理/数学领域
bdi,bdo	用于多语言混合时指定语言或者书写方向(左到右或者右到左)
mark	表示高亮，这里并非指显示为高亮，而是从读者的角度希望的高亮(与strong的区分)
wbr	表示可以换行的位置，主要是英文等不允许单词中间换行，这个标签一般把多个单词粘成很长的单词的时候用
main	整个页面只出现一个，表示页面的主要内容，可以理解为特殊的div