HTML之语义化标签

最新推荐文章于 2024-05-25 10:19:26 发布

banggan

最新推荐文章于 2024-05-25 10:19:26 发布

阅读量758

点赞数

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

本文链接：https://blog.csdn.net/bangbanggangan/article/details/86607076

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文地址：https://banggan.github.io/2019/01/25/重学前端之HTML语义/
HTML的语义类标签在我们的工作中经常遇见的，语义是我们说话表达的意思，多数的语义实际是从文字继承而来的。语义类的标签是纯文字的补充。

为什么要用语义标签？

正确使用语义标签的好处在于：

语义类标签对开发者更为友好：增强可读性，清晰的网页结构，方便团队的开发和维护。
有利于SEO搜索引擎检索。

并不是说不管什么场景都尽量使用语义类标签，不恰当的使用反而会造成冗余，如ul无序列表，很多时候我们都给并列关系的元素套上ul:

I have lived in the following countries:

China
Norway
UT

由此可见，ul出现在行文中间，它的上文多数在于提示列举的某些项，但如果所有并列关系都用ul，会造成冗余标签。

重要的几个使用场景

作为自然语言的延伸

作为自然语言和纯文本的补充，用来表达一定的结构。
如在HTML5中提出的特定文档级别的语义：

ruby语义化

ruby是一种排版注释系统，位于横排基础文本上方的简短文字，如下图：
在这里插入图片描述

ruby设计的元素包括ruby、rt、rp,使用ruby指定一个具体的表达式，rt提供说明，rt部分将显示子表达式的上方：

<ruby>
    友<rt>bi</rt>
    善<rt>shi</rt>
    的眼神
<ruby>

但是在不支持ruby的浏览器中需要使用rp对这两个区块进行视觉上的隔离。

 <ruby>
    友
    <rp>
        <rt>bi</rt>
    </rp>
    善
    <rp>
        <rt>shi</rt>
    </rp>
    的眼神
</ruby>

略微改变的元素

比如使用em和strong来强调一段重要的文本，cite用来为对参考文献的引用进行定义，比如书籍或杂志的标题。small不仅仅指的是小字体，它还同样为法律声明增添不具有重要性的旁注或小字。hr现在表达的是主体性的间断，不再仅仅是分割版面的一条水平线。

mark高亮标记

可以使用mark元素来标记出网页里被搜索的关键词或是用于高亮显示一段解释性的代码。

作为标题摘要

作为文章的结构的提现，语义化的HTML还能支持自动生成目录结构；
如h1-h6是html中基础的标题，表示了文章不同层级的标题。有时候，会有副标题，为了避免副标题产生额外的层级，使用hgroup标签：

作为整体结构

应用语义结构的页面，可以明确的提示出页面信息的主次关系，能让浏览器更好的支持阅读视图功能：
如一个典型的body结构：

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

header，出现在头部，表示导航或者介绍性的信息。
footer,出现在尾部，包含作者信息、相关的链接。
nav，表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分.

<nav>不但可以作为页面独立的导航区域存在，我们还可以在<header>标签中使用。此外，<nav>标签还可以显示在侧边栏中。由此可见，一个页面之中可以有多个<nav>标签。

根据HTML5标准，<nav>标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在<nav>标签中,我们只要将主要的，基本的链接组放进<nav>即可,对于有辅助性的页脚链接则不推荐使用<nav>标签。

aside,所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。
article,表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

<article>标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下，一个<article>元素包括标题、正文和脚注。和<nav>标签一样，该标签同样不能用在<address>标签中

实际分析布局

通过一个很论文很像的例子来深入理解语义类标签，如下页面：https://en.wikipedia.org/wiki/World_Wide_Web

重要的布局我已经用红框框出来了:
在这里插入图片描述

简要分析一下：

aside：左侧的侧边栏属于aside，一般是具有导航性质的内容。
article:文章的主体部分，属于一段独立的内容
hgroup，h1~h6:hgroup属于标题组，这里的实现：

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

abbr：缩写，这里的WWW是WWorld Wide Web的缩写，这里的实现：<abbr title="WWorld Wide Web">www</abbr>
hr:水平分割线，在标准的定义中，是故事走向的转变或话题的转变，应该使用border实现
strong：加粗blockquote
blockquote，q，cite：表示引述，blockquote表示段落级的引述内容，q表示行内的引述内容，cite表示引述的作品名
figure，figcaption:用于表示与主文章相关的图像,这里的实现：

<figure>
    <img src="" />
    <figcaption>The.......</figcaption>
</figure>

dfn:包裹白定义的名词，这里的实现：The <dfn>Internet</dfn> is a ....
nav，ol,ul:目录的链接，使用nav标签，ol和ul是区分有无顺序
pre,samp,code：pre预先排版内容，samp用于计算机的程序输出，

这里嵌入的代码和预先编号的段落，是一段灰色背景的文字，这里的实现：

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

附上其他一些标签及说明：

在这里插入图片描述

banggan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML之语义化标签

HTML的语义类标签在我们的工作中经常遇见的，语义是我们说话表达的意思，多数的语义实际是从文字继承而来的。语义类的标签是纯文字的补充。为什么要用语义标签？正确使用语义标签的好处在于：语义类标签对开发者更为友好：增强可读性，清晰的网页结构，方便团队的开发和维护。有利于SEO搜索引擎检索。并不是说不管什么场景都尽量使用语义类标签，不恰当的使用反而会造成冗余，如ul无序列表，很多时...
复制链接

扫一扫