今天跟了一下 winter 老师的课程,学了下语义化。
在我们的日常工作开发中,用的最多的就是 div 还有 span,可能其他用的稍微多一点的也就还有 p 标签,ul标签, li 标签。其实在日常工作开发中,用vue、react 框架的时候,基本上 div 标签 和 span 标签就能够满足我们的需求了。
然后我去翻了翻腾讯、淘宝、网易的主页,甚至是老师用来展现例子的 wikipedia。我发现,这些国内主流网站,也没有对 HTML 语义化用的特别极致。但是有一点,就是这些网站的 html 的 class 属性写的都非常的简洁明了,让人一眼看过去就知道写了些什么。
如果要写出一个完美的符合 HTML 语义化的网页,说句实话,真的要下很大的功夫。
对于 HTML语义化,总结下来就是,用比不用好,不用比用错好。
别瞎用!!!大不了就不用
对,要是你实在是拿不准的时候,反而不如来个 div 加个简洁明了的 class 好。
不过既然都到了这里,那么就总结一下 HTML 的语义标签吧。
来,看这里。
Tag | Description |
---|---|
header | 通常出现在前部,表示导航或者介绍性的内容。 |
nav | 导航链接的部分。 |
aside | 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。 |
article | 它表示具有一定独立性质的文章。 |
main | 整个页面只出现一个,表示页面的主要内容,可以理解成特殊的 div。 |
section | 一个文档或应用程序的通用部分。 |
time | 时间 |
address | 表示“文章(作者)的联系方式”,address 明确地只关联到 article 和 body。 |
footer | 通常出现在尾部,包含一些作者信息、相关链接、版权信息等。 |
figure | 这个就是用来展示图片下面环绕文字的标签 |
figcaption | 用来存放图片下面的文字 |
dfn | 用来包裹定义, define terms |
cite | 存放引用 |
顺便来看看 dl dd dt
这个以前是真的没有接触过(见都没见过)
<dl>
<dt></dt>><!--defination term-->
<dd></dd><!--defination description-->
</dl>
dl 就是 dfn 的一个列表形态。
dt 用来区分标题,里面的内容为所要阐明的术语
dd 就用来对 dt 里面的 term 进行进一步的补充说明。
真的要搞语义话,那就去看看 markdown 里面能够生成的 html 里有哪些标签。研究那些能用的标签就够了。