清蒸HTML

清蒸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来处理更好一些。


语义化的第二个层面是选择正确的idclass命名。因为常用的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么?

编辑于 2017-06-19

文章被以下专栏收录

    iWeb学院依托国内最大的开发者社区HTML5梦工场,聚集百余位知名前端开发者共同打造 HTML5 精品学习课程,并为每位学员定制个性化教学。 iWeb学院与腾讯、百度、阿里、新浪、搜狐、网易、360等数百家大小互联网公司具有深度的人才合作关系,优秀学员将享受内推资格。