关于语义类标签的新理解

初衷:

本篇是看过极客时间里winter老师的文章《04 | HTML语义:如何运用语义类标签来呈现Wiki网页?》写的。 由于叶叶从事的工作原因,单纯写静态页面并非自己常态化工作,更多的是实现其中业务逻辑,于是便忽略了HTML的学习,直到看到这篇文章后,才意识到自己懂得真心少。

内容:

1.什么是HTML语义化?

简单理解就是:用恰当的HTML标签、class类名,让机器和人快速理解网页内容。

2.HTML语义化的好处?

  • 益于开发和维护;
  • 增加可阅读性,使页面更加结构化;
  • 利于SEO搜索引擎检索……

3.常见的HTML语义化标签有哪些?

body, article, nav, aside, section, header, footer, hgroup,h1-h6、address等

4.划重点

group: 标签用于对网页或区段(section)的标题进行组合(标题组);例:

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>
复制代码

abbr:标签指示简称或缩写,比如 "WWW" 或 "NATO"。 通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。 此标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。
小技巧:可以在 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。例:

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
复制代码

hr与 VS 下边框?
hr:标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。 但是阅读文章后,才意识到原来hr标签也表示故事走向的转变或者话题的转变。于是在选择hr或者使用border 的CSS时,也就有所区分了。例:

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
复制代码

关于blockquote, q, cite 引用标签的使用???

不得不承认,叶叶居然是第一次看见这三个标签。真感觉瑟瑟发抖……仔细看了一下MDN以及各种文档,最后还是不太清楚, 它是怎么实现鼠标点击上去,弹出右上角的提示框,类似于a标签的title属性。 如果有清楚的同学,麻烦告诉叶叶一声,不胜感谢! 至于它的使用,等叶叶熟悉了,再来补充。


5.附上一张图:

6.传送门

结语:

在实际生产中,我们需要用对的语义标签,用好语义标签,万一不懂、不会的,不用也是最佳的方案。最后,叶叶还是保持一颗“空杯心态”继续学习。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值