• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

语义化标签

无序列表 ul

并不是所有的并列关系的数据都要使用到ul无序列表,ul他大多数出现在行文中间,也就是在ul的上部,我们一般会有文字说明,如列举一些选项啥的。

所以,对于语义标签,我的态度是:‘“用对" 比“不用” 好,“不用" 比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。

所以,有时候用其他元素替换ul,反倒可以减少冗余的标签。

(感觉我就是那种,为了所谓的语义而去大量使用的这种,这种习惯以后要改了)

em强调倾斜和strong强调加粗

em可能常常和strong标签概念混淆,而strong的大量使用,其实原因就是他不倾斜,文本加粗,在日常使用中,这种情况更多一些,即便可以用em,我们也不想多书写一条重置样式的css而去使用em

而em的代表了这个文字是重音,所以从理解上可以这么去读:em会对文本含义有改变作用,类似于读一段话时,里面的重音部分,重点部分。

我吃了一个<em>苹果</em>
我吃了<em>一个</em>苹果

两句话,不同的重音意思也不一样。

第一句突出我吃的是苹果

第二句突出我只吃了一个

所以文字的重音其实和strong是完全不一样的。

那么strong又是什么意思?

strong表达的是文本的重要性、严重性和紧急性等

比如:一条重要的通知,一个特别的价格,一段不能忽视的文本,这个作用着重于强调重要性,对文本的理解并不会产生语义上的变化。他更多的是一个作用。

这里说的比较绕,仔细理解下就会明白。

标题和hgroup

h1-h6是不同层级的标题,不同层级的标题按照顺序排列,我们可以生成目录树的结构

<h1>一级目录</h1>
<p>一级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>

他会生成如下格式的目录:

  • 一级目录

    • 二级目录
    • 二级目录

这种是最基本的标题,而当我们的标题出现副标题的时候,其实很多人会使用span啊,这种行内元素,但其实html5已经考虑到这种情况,给了一个hgroup元素。

<hgroup>
  <h1>标题</h1>
  <h2>副标题</h2>
  <p>其他内容</p>
</hgroup>

他会生成如下格式目录:

  • 标题 - 副标题

    • 其他内容

可以看到,在hgroup中,h1-h6被视为标题的组成部分,而不是独立标题。

为什么会生成这种目录结构

html标准中专门规定了生成目录结构的算法,所以说,即便我们不打算深入,也应该尽量在大的层面上保证这些元素的语义化使用。

section元素

section不仅仅是一个有语义的div标签,虽然大部分时候,我们对他的理解是混淆的,但是它会改变h1-h6的语义。

在section元素中,标题元素h1-h6会下降一级。

也因此,我们只需要section和h1-h6就足以形成文档的树形结构。

<section>
  <h1>section的语义</h1>
  <p>xxxx</p>
  <section>
    <h1>语义1</h1>
    <p>xxxx</p>
  </section>
  <section>
    <h1>语义2</h1>
    <p>xxxx</p>
  </section>
</section>

生成:

  • section的语义

    • 语义1
    • 语义2

section表示的是一个内容的区块,区域,比如内容章节区块,页眉,页脚。

section容易和article混淆,在原则上,能用section就能用article,但是如果情景上article更合适,那么就应该使用article。

那么什么情形使用article更合适?

一篇博客文章的文章部分,包含标题,内容等

论坛的帖子文章

单条评论部分

等等...

article

我们需要明确article内容的独立性,该内容本身独立于上下文,即便是周围所有的内容被移掉,也不会影响该内容的阅读。

在article中,可以存在header和footer,这两个标签语义就是头部和底部。

这种也适合拿来做博客的mini文章卡片展示。

针对 section和artcle,dive,我们可以按照以下原则:

  1. 内容是否独立完整,是,用article;
  2. 如果该内容上下文相关,考虑使用section;
  3. 仅仅是个块内容,使用div。

header和footer

header: 如其名,常出现在头部,表示导航或者介绍性内容

footer: 通常出现在底部,包含一些作者信息,相关链接,版权信息

header和footer-般都是放在article或者body的直接子元素,但是标准中并没有明确规定,footer也 可以和aside, nav, section相关联 ( header不存在关联问题)。

aside

可以理解为侧边栏,实际上aside可以是侧边栏,但不仅仅是侧边栏。

aside中的导航,虽然和header一样都可以有nav,但是,aside的导航一般是一些相关性的导航,最典型的就是博客的侧边栏了,什么相关文章啊,tag标签云啊,这些。

address

footer中一般包含address标签,这是个非常容易被误用的标签,address用于表示文章的联系方式或作者的联系方式,它明确的只关联article和body元素。

HTML 的<address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。

  • 当表示一个和联系信息无关的任意的地址时,使用<p>元素而不是<address>元素。
  • 这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<time>元素中)。
  • 通常,<address>元素可以放在当前section的<footer>元素中,如果存在的话。

time

time标签用于表示时间,方便机器抓取理解

例子:

<time itemprop="date" datetime="2016-08-12">下一周</time> 

addr

addr用于表示缩写

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

hr

hr表示的是故事走向的转变或者话题的转变,类似于这篇文章已经完事了,或者讲的内容不同了,就用hr进行分隔。

像那种主标题和副标题之间有横线的,那种就用border实现,因为他只是个样式,内容是没有发生转变。

blockquote、q、cite

cite 用于作品名称的引述,如果某药物名啊,某文章标题啊,这种。

blockquote 用于表示一大段引述的内容,比如你从别人的文章里copy的文字,就应该是使用该标签表示

q 在本质上与 blockquote标签是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。

q元素会给文本加上引号

figure、figcaption

用于表示与主文章相关的图像,照片流等,比如文章的说明插图,医学文章的示例图等等这种

figcaption表示的是内容的标题,比如图片的名字,当然也可以没有标题。

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

dfn

dfn用于包裹一个被定义的词汇,比如:

<dnf>Internet </dnf>是一个由相互连接的计算机网络组成的全球系统。

Internet 是一个被定义的词汇,他表示是一个由相互连接的计算机网络组成的全球系统

<dfn>万维网</dfn>是文档和其他资源的全球集合,它们相互链接

万维网也是一个被定义的词汇

也可以简单理解为,如果这个名词我们需要后面进行解释,那么这个名词就需要被dfn包裹。

nav、ul、ol

nav表示的是一个导航,导航里面可以有ul或者ol,而ul和ol的区别就在于内容是否有顺序关系,有顺序使用ol,无顺序ul

无论使用ol还是ul,不要因为默认的视觉的效果,也就是默认样式,而去改变本身的语义而去使用。

比如: 一个本来是有序列表的关系,但是要显示无序列表的样式,我们不能使用ul,而是ol,然后用css去调整默认样式。

pre、samp、code

pre表示格式化文本,不需要浏览器进行格式化,如换行,空格

而pre常常作为格式化文本的容器,里面包裹samp或者code元素

samp: 表示系统的输出,比如 shell 、浏览器控制台等的输出,除了放在pre中使用,本身也可以作为行内高亮使用,虽然默认样式和普通文本没啥区别

code则表示计算机代码,也可以行内表示

其他的一些标签

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

尽量只用自己熟悉的语义标签,并且只在有把握的场景引入语义标签。这
样,我们才能保证语义标签不被滥用,造成更多的问题。

0
  • 本文分类:重学前端
  • 本文标签:html标签前端语义化
  • 流行热度:已超过 189 人围观了本文
  • 最后更新:2020年12月15日 - 0时28分23秒
  • 发布日期:2020年12月15日 - 0时26分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码