语义化标签，和类名说再见

百度前端技术学院学习笔记

由于在第一阶段的任务一中，也就是编写页面结构中较多的使用了HTML5规范中新增的“语义化标签”，在任务二对页面增加样式时，明显感受到了这所带来的编码速度的提升，在此做些总结整理，加深记忆。

事实上，我在任务二中并没有定义任何类名，并且选择器只有两层，就完成了样式。可以查看我的源码

用到的新元素

由于任务一页面并不是很复杂，能用到的新元素大概有以下几个：

1. header
2. main
3. footer
4. article
5. time
6. figure
7. figcaption
8. aside
9. nav

了解更多的HTML5新标签可以访问火狐开发者网络

有什么好处

阅读更方便

这些单词的含义相信大家都理解，这就是语义，而不是一大波无意义的

div

，

span

，在自己或者别人阅读的时候就会更加直接，不会去一大堆属性里面找

class

，会减少定义大量的类名，减少代码量，节约时间，减小思考，相信如何命名有时候也会是一个令人头痛的问题。

默认的样式

body

的直接子元素

h1

和

article

下的

h1

默认字体大小是不同的，

figcaption

可以用来描述一个

figure

(例如一张图片），这个描述会显示在图片上方或下方，且易于增加样式。

一些人在编码时喜欢重写默认的样式，字体大小，链接显示效果，边距等，其中有些操作我是不赞同的，制定规范的人和浏览器开发者经过思考，辩论确定的默认样式，是有其合理之处的，不加思考的重写样式只会加大工作量。如果你不满意默认样式，可能是因为简单的

div

，

span

不能很好的表达你的意思，尝试HTML5的语义化标签，说不定会改变你的看法。

简化 CSS

在编写CSS时，一个选择器会使用很多次，这时候，一个很小的简化都会对效率有很大提升，如果充分利用这些新标签，甚至可以不用定义类名，就完成样式的编写，是不是很酷呢？

你可能会说，这么多新标签，怎么记得住，不想记！

我想说，看一遍，有意识的去使用，很好记的，这点学习成本，带来的效率提升是绝对值得的。