总结HTML语义化标签

最新推荐文章于 2022-11-25 21:01:44 发布

Welkin_qing

最新推荐文章于 2022-11-25 21:01:44 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/Welkin_qing/article/details/87889660

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

一、语义化标签
二、运用语义化标签来呈现页面
三、其他标签补充说明

最近在看winter的重学前端，讲到语义化标签（我看的太慢了，捂脸）于是总结一下。

一、语义化标签

1. 语义化标签是什么，使用的好处是什么？

语义类标签也是大家工作中经常会用到的一类标签，它们的特点是视觉表达上都互相差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的 section、nav、p，这些都是语义类标签。

语议是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

好处：

语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

但使用语义化标签的前提是需要正确的使用，如果不能正确使用语义化标签，那还不如直接使用div和span。

2. 作为整体结构的语义类标签

在学习h5时，就出现了一种典型的body：

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

除此之外，还有artidle, article 是一种特别的结构, 它表示具有一定独立性质的文章。所以，article 和body具有相似的结构，同时，一个HTML页面中，可能有多个article存在。

一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用article来组织。

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

body里面有自己的header和footer,然后里面是竖篇的article,每-个article里面都有自己的header、section、footer。这是一个典型的多文章结构。

aside 表示跟文章主体不相关的部分，可能包含导航，广告工具性质的内容；aside很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是aside，aside不一定是侧边栏
aside和header中都可能出现导航(nav 标签)，二者的区别是，header 中的导航多数是到文章自己的目录，而aside中的导航多数是到关联页面或者是整站地图。

最后footer中包含address,这是个非常容易被误用的标签。address 并非像date一样，赫一个给机器阅读的地址，是示“文章(作者)的联系方式”，address 明确地只关联到article和body。

3. 是否要语义化

我们应该分开些场景来看语义, 把它用在合适的场景下，可以获得额外的效果。本篇文中，我们至少涉及了三个明确的场景:

自然语言表达能力的补充;
文章标题摘要;
适合机器阅读的整体结构。

二、运用语义化标签来呈现页面

在文章中，winter列举了一个wiki的文章来做分析
页面副本：http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html

1. aside

导航性质的工具内容
wiki文章页面

2. article

文章的主体部分，因为主体部分具有明确的独立性，所以可用article来包裹
article

3. hgroup、h1、h2

hgroup是标题组，h1是一级标题，h2是二级标题

代码应如下所示：

<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>

4. abbr

abbr标签表示缩写，考虑到 WWW 是 World Wide Web 的缩写
abbr

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

5. hr

如下图所示，出现了一条横线，但这这篇文章里没有使用hr标签，因为hr 表示故事向的转变或者话题的转变，显然此处两个标题并非这种关系，所以我们应该使用CSS的border来把它当作纯视觉效果来实现，所以这里是不需要用hr的。

6. p

红色框圈起来的属于注记，在文章中作额外注释。
但是HTML中没有note相关的语义，所以通过普通的p标签，加上class="note"来实现。后面的多数自然段都是普通的段落，则用p标签来实现。

7. strong

字体呈现黑体，表示这个词很重要，所以使用strong标签
strong

<p> 
A global map of the web index for countries in 2014
<strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong>,
......

8. blockquote、q、cite

在文章中有个[1]，当鼠标移入时，出现了引述的相关信息

在HTML中，有三个跟引述相关的标签

blockquote表示段落级引述内容
q示行内的引述内容
cite 表示引述的作品名。

这里的作品名称"What is the difference between the Web and the Internet?"，应当用cite标签。
如果是直接引用的内容，那么，我们还应该加上 blockquote或者q标签。

9. time

出现日期，加上time标签，可以使机器阅读更方便
time

<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>.

10. figure、figcaption

红色框中不仅仅是一个img标签，它和图片下面的文字组成了一个figure，figure是一种用于表示与主文章相关的图像、照片等流内容的标签。

<figure>
 <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
 <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>

这种插入文章中的内容，不仅限图片，代码、表格等，只要是具有一自包含性(类似独立句子)的内容,都可以用figure.这里面，我们用figcaption表示内容的标题，当然，也可以没有标题。

11. dfn

dfn
在这段文字中观察代码可以看到：

The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. 
The <dfn>Internet</dfn> is a global system of interconnected computer networks.
In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources, linked by hyperlinks and URIs.

Internet 和 World Wide Web被标签包裹了，所以dfn标签是用来包裹被定义的名词。

12. nav、ol、ul

这里的目录链接到文章的各个章节，我们可以使用nav标签。因为这里的目录顺序不可随意变化，所以我们这里使用多级的ol结构。

<nav>
  <h2>Contents</h2>
  <ol>
    <li><a href="...">History</a></li>
    <li><a href="...">Function</a>
      <ol>
        <li><a href="...">Linking</a></li>
        <li><a href="...">Dynamic updates of web pages</a></li>
        ...
      </ol>
    </li>
    ...
  </ol>
</nav>

ol 和ul的区分是内容是否有顺序关系，每一项的前面不论是数字还是点，都不会影响语义的判断。所以，你可以注意一下这里，不要因为视觉表现效果，而改变语义的使用。

13. pre、samp、code

代码段标签可保证不适用浏览器自动换行，也不需用浏览器进行排版

因为这是一段计算机程序的示例输出，所以我们可以使用 samp标签

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

三、其他标签补充说明

Welkin_qing

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录