资讯专栏INFORMATION COLUMN

HTML语义化标签探析

Steve_Wang_ / 2220人阅读

摘要:具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为,作用是定义列表中的项目。强调标签说明在上面的介绍中,已经介绍了和,个中差别,看英文既能分辨。

什么是HTML语义化

HTML语义化就是根据具体内容,选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别。

为什么要语义化

有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的,因此语义化标签能使爬虫抓取更多的有效信息。

CSS文件读取失败的准备:万一CSS文件挂了,语义化的HTML也能呈现较好的内容结构与代码结构。

方便其它设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。

便于团队开发和维护。

具体的语义化标签探析

本文主要是为了探析部分HTML标签在语义化中的差别。同时也探索HTML5新加入的语义化标签。

1. ul/ol(列表标签)

ul和ol虽然都是列表项,但是具体使用时,差别还是很大的。

A. ul(无序列表)

说明: ul的英文全称为unordered list,翻译成中文就是无序列表。表示列表中的项目。是没有先后顺序的。网页中大部分列表均为无序列表。

  • Lxxyx的博客
  • Lxxyx的评论
  • 联系Lxxyx
B. ol(有序列表)

说明: ol的英文全称为ordered list,表示列表中的项目。是有先后顺序的。这一点是ol和ul的本质区别。

  1. 1. Lxxyx的第一篇文章
  2. 2. Lxxyx的第二篇文章
  3. 3. Lxxyx的第三篇文章
2. dl,dt,dd(定义列表)

说明: dl,dt,dd是自定义列表,但是使用上又与前面的ul/ol有所不同。自定义列表不仅仅是一列项目,而是项目及其注释的组合。

dl: 英文意思为definition list,作用是定义列表。

dt: 英文意思为defines terms,作用是定义列表中的项目。

dd: 英文意思为defines description,作用是定义列表中项目的注释。

举例:

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

效果图:

C. b/strong , i/em(强调标签)

说明: 在HTML中,b和strong都是加粗,i和em都是斜体。但是从HTML4到HTML5中,又发生了转变。所以有必要写下来。

1. b/strong(加粗)

说明:虽然b和strong的展示效果一样,都是将字体加粗表示。但是b在HTML5中又发生了变化。

b标签(bold):

HTML4的定义:

The tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思为b标签仅仅表示加粗,不带有任何强调的意味。(只是为了排版或者好看)


HTML5的定义:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思为表示“文体突出”文字,通俗讲就是突出不安分的文字。像概要中的关键字,产品名。或者代表强调的排版方式

2.strong标签(全称是stronger emphasis):

represents a span of text with strong importance.a tag within another tag has even more importance.

// 意思为strong 标签是语气加重,更为重要的强调,如果两个strong标签嵌套还表示极度重要。strong的重要程度是要大于em标签的

总结:b仅仅只是加粗,并没有任何语义。但是strong标签则有语气加重的强调的意思。

2. i/em(斜体)

说明:就像b和strong的关系一样。i和em的对应关系也很容易理解。

i标签(全称是italic):

HTML4的定义:

The tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思为i标签仅仅只是将字体显示为斜体,无任何语义化意思


HTML5的定义:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思为i元素现在表现为在文章中突出不同意见或语气或的一段文本,例如外语,科技术语、或者是排版用的斜体文字

em(全称是emphasis):

The represents a span of text with emphatic stress.

// 意思是说em有强调的意思

总结:i仅仅只是斜体显示,并没有任何语义。但是em标签则有加强的语义在内。

3.em/strong(强调标签)

说明:在上面的介绍中,已经介绍了em和strong,个中差别,看英文既能分辨。
em的全称是:emphasis,意思为强调。
strong的全称是:stronger emphasis,意思就是语气更强的强调。
总结:em和strong标签均带有强调的语义,但是strong标签所表现的强调语气要大于em的。

总结与参考链接

这一部分,查阅的文档和资料太多了,看完了html4发现html5又更改了意思,只能跑去w3c去看规范。
总结:i和b在Html5中被赋予语义,不同于html4。em和strong的差别在于强调的程度。

参考链接:

Using and elements
HTML5: The Semantic Difference Between Bold and Strong

总结

暂时总结的就这么多了,重点在于b/strong , i/em几个标签的区别。也是目前前端学习中的盲点。
前两天看到一句话:

"很多人非常努力的学习JavaScript,认为学好了JavaScript就是一切。但是忽略了JavaScript其实是一门"胶水语言"的本质,它是用来粘合HTML和CSS的。"

看到这句话后,决定在寒假认真学习HTML与CSS。这些东西,虽说简单,但写好也很难。比如说最近学习的Sass,PS切图等。无论哪个,都属于技术盲点。

因为经验尚浅,所以如果有出错的地方,希望各位能帮忙指正。
最后附上本人博客地址和原文链接,希望能与各位多多交流。

Lxxyx的前端乐园
原文链接:寒假前端学习(2)——HTML语义化标签探析

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55370.html

相关文章

  • HTML语义标签探析

    摘要:具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为,作用是定义列表中的项目。强调标签说明在上面的介绍中,已经介绍了和,个中差别,看英文既能分辨。 什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别。 为什么要语义化 有利于SEO:搜...

    DandJ 评论0 收藏0
  • HTML语义

    摘要:近来看面试题的时候,经常看到一个问题语义化是什么意思里面有标签的含义。因为二者表示的含义不同。参考资料理解语义化语义化的革新语义化标签语义化标签探析 近来看面试题的时候,经常看到一个问题:HTML语义化是什么意思?w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改,由于不了解H5的新定义,就很容易弄错标签之间的意思。例如:既然i标签是指斜体的意思,那么为什么...

    Mike617 评论0 收藏0
  • HTML语义

    摘要:近来看面试题的时候,经常看到一个问题语义化是什么意思里面有标签的含义。因为二者表示的含义不同。参考资料理解语义化语义化的革新语义化标签语义化标签探析 近来看面试题的时候,经常看到一个问题:HTML语义化是什么意思?w3school里面有html标签的含义。然而HTML5中对一些标签进行了修改,由于不了解H5的新定义,就很容易弄错标签之间的意思。例如:既然i标签是指斜体的意思,那么为什么...

    stackvoid 评论0 收藏0
  • 静态分析安全测试(SAST)优缺点探析

    摘要:许多公司都投资于或之类的静态分析安全测试,解决方案。用静态分析方法确保编程安全一书详细描述了静态分析技术的基本原理。博士将静态分析无法找出的诸多安全问题归为瑕疵,而非程序错误。 静态分析安全测试(SAST)是指不运行被测程序本身,仅通过分析或者检查源程序的语法、结构、过程、接口等来检查程序的正确性,那么采用静分析安全测试的方法有什么优缺点呢,且让小编给你说道说道。 许多公司都投资于 H...

    codeKK 评论0 收藏0
  • ELF格式探析之三:sections

    摘要:,重定位节,包含入口,参见。如果是重定位节或,指向相应符号表的。如果是和类型的重定位节,是应用的节的节头索引。包含程序运行时未初始化的数据全局变量和静态变量。 前文链接: ELF格式探析之一:Segment和Section ELF格式探析之二:文件头ELF Header详解 今天我们讲对目标文件(可重定位文件)和可执行文件都很重要的section。 我们在讲ELF Header的时...

    FleyX 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<