本篇是看过极客时间里winter老师的文章《04 | HTML语义:如何运用语义类标签来呈现Wiki网页?》写的。
因为叶叶从事的工做缘由,单纯写静态页面并不是本身常态化工做,更多的是实现其中业务逻辑,因而便忽略了HTML的学习,直到看到这篇文章后,才意识到本身懂得真心少。浏览器
1.什么是HTML语义化?ide
简单理解就是:用恰当的HTML标签、class类名,让机器和人快速理解网页内容。学习
2.HTML语义化的好处?ui
3.常见的HTML语义化标签有哪些?搜索引擎
body, article, nav, aside, section, header, footer, hgroup,h1-h六、address等指针
4.划重点:rest
group: 标签用于对网页或区段(section)的标题进行组合(标题组);例:code
<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 属性,这样就可以在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。例:blog
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.传送门
在实际生产中,咱们须要用对的语义标签,用好语义标签,万一不懂、不会的,不用也是最佳的方案。最后,叶叶仍是保持一颗“空杯心态”继续学习。