【第741期】清蒸HTML

前言
在分享之前，我们来回味一下汪涵叔叔在《偶像来了》那句经典的语录：“翻炒就是情感的升温，糖醋就是情感中的蜜意，做一碗面条何尝不是柔情”。看到今天的标题，是不是已经很有画面感了，哈，今天的分享来自@王德福的授权分享。

正文从这开始~

人人都知道，前端有三门功课：HTML，CSS，JS

人人都说，HTML是最简单的，大概在w3school上看一下午就算是学会了。

有好几个初学者和我说，两天时间学会了HTML，学到CSS渐渐才感觉到难度，不知道怎么用选择器，盒模型和定位。花时间攻克了CSS，发现前面的JS才是大BOSS。

所以HTML就只是学习路上新手村门口送经验的小白兔，看一遍教程，背一下标签，就算是学会了HTML么？

HTML叫做“超文本标记语言"，首先，它是一门语言，没有变量，没有循环，没有函数，但确确实实是一门语言。这门语言是静态的，它所描述的东西也是静态的，比如标题，比如段落，比如图片。

我们对于语言的“学习”，其实是学习翻译。如何把我们熟悉的语言翻译成新学习的语言，那么HTML是负责翻译什么的呢？我们首先来看一下HTML究竟做了什么事情。

浏览器会根据HTML的描述去绘制DOM，HTML写起来像是文章，但是执行之后就更像是画面。可以理解为HTML是剧本，浏览器是导演，而我们看到的页面是导演根据剧本拍出的影片。

比如我们来看一张图，试着用语言描述一下：

在页面的中间有个标题，下面有张图，图下面有三个圈，圈下面有三个标题，每个标题底下三段说明。再往下有两个按钮，一个橙底白字，一个白底橙字。

这段如果结合图片来看这段描述，也还算贴切。但是对于浏览器来说，它需要一个足够精确的描述，比如页面中间的标题，是主标题还是二级标题？下面的三个圈是什么图？下面的说明中哪些文字需要强调？这些都是HTML要表述的。配上CSS来精确的描述字体的颜色，粗细，大小，图片的宽高，按钮的位置。

有兴趣的话可以和朋友玩一下这样你说我画的游戏，如果掌握了前端的基本知识，就可以几乎完全准确的用语言指导朋友画出指定页面。而普通人往往没有办法量化准确的描述。

因为有这样的规范，所以浏览器才能准确的渲染出我们看到的页面，所以HTML最重要的一点就是：语义化。

我们对于HTML的学习，背标签记属性只是表象，背后的是学习如何去用语义化分析页面，做出合理的HTML文档结构。

语义化的第一个层面是选择正确的标签。比如在HTML5标准中新增了很多语义化的标签，利用好这些标签可以更清晰的表达页面的内容。再比如我们要加粗一段文字，可以选择用strong标签，或者用CSS的font-weight属性加粗，选择哪一种方式呢？如果是为了强调内容，那么我们选择标签加粗，如果是设计样式，并不表示着重和强调，选用CSS来处理更好一些。

语义化的第二个层面是选择正确的id和class命名。因为常用的HTML标签只有大约50个，比如title，subtitle，close这种也很常见的语义并没有对应的标签，要通过class的方式体现出来。HTML标准中有两个无意义的标签：div和span，纯粹的块级元素和行内元素。我和学生说，永远不要不带class或者id裸写div元素，div元素不能单独表意，我们通过class去命名它，并不是为了要给CSS去用，而是真实的为了表明它在这个页面的结构中扮演了什么角色。比如它是个标题（title），或者是个备注（note），这些HTML标签覆盖不到的语义，我们用class来补充。

id和class又有什么区别？class指的是一个类别，比如程序员，电脑，键盘。而id指的是某一个具体的东西，比如我这个程序员，公司的电脑，我家的机械键盘。初学者往往会混淆两个概念，不知道什么时候要用id，或者用命名id的原则命名class，比如设置一个class名为“my_photo_1”，这很明显是一个具体的东西，我们先来看这个元素是不是需要被选中，如果确实需要的话，能不能用更通用的选择器，而不需要设置一个这样特殊的类名。

这里还要说到class的命名策略。有一段时间很流行BEM命名法，追捧的人很多，诟病的人也很多，虽然略显繁琐，但是确实也是语义化的一个很好实践。与之相对的另一种极端的原子类命名法，命名的原则更多的受样式影响，语义被样式左右，就完全背离了HTML+CSS这种分离语义和样式的初衷。

如何来做语义化的训练呢？

找一个网页，去猜页面各个部分用了什么标签，看看是不是和猜想的一样。通过这个练习来培养对元素使用的感觉，熟悉和了解各个HTML标签所代表的语义。

语义化第三个层面是文档结构。作家写作是从大纲到章节，画家作图是从框架到细节。而我们切图的原则同样是从大到小，从外到内。

（借鉴一下绘画的方式）

从上到下画出来，那是打印机，人类绘画的方式通常是先勾画轮廓，然后再去处理各个细节。借鉴到HTML的书写中，也是先做框架，比如顶栏，侧栏。然后细分顶栏里面还有logo和导航栏，一直分割到内部全部由基本标签构成，再来精细的雕琢样式。class命名没有灵感可以去参考bootstrap一类框架的class命名策略，有很多好用的关键词可以借鉴学习。

另一个很好的练习HTML的方式是做纯粹的代码练习，就是抛开CSS，单纯的书写HTML，最终的目的是他人可以通过阅读这个HTML文件理解到页面是怎样的结构，甚至可以通过HTML代码来画出大概的页面。

我们课程中，HTML的讲课花了两天，但是后面的练习持续了两周，并且目前还在做讲评。在这个过程中，能感觉到大家渐渐有了从整体到部分的意识，同时class的命名更加合理，可以按照正确的语义，正确的结构和顺序来书写HTML。

我们遇到的很多CSS的问题甚至是JS的问题，其根源是HTML结构的不合理，语义的不清晰。要把HTML写好真的并不是件容易的事情，以往很多时候其实是依赖了CSS来修补自己HTML上的不足。

就好像新鲜的食材往往清蒸就很好吃，而不太新鲜的食材做成麻辣口味的话，也不太吃出来有什么问题。所以，你们不想来点可以清蒸的HTML么？

关于本文
作者：@王德福
链接：https://zhuanlan.zhihu.com/p/22909445

iWeb学院是由HTML5梦工场创立的前端培训品牌。