聊聊前端入门（1）：HTML+CSS

最近有一些新老同学入门前端，找我问问题，我从他们身上发现了一些共性问题，今天拿出来总结一下，希望后来者能吸取经验。

前端三大件：HTML、CSS、JavaScript。这三位是根本，万变不离其宗，不管用多先进的技术，最终浏览器里跑的还是他们（不考虑 WASM、WebGL）。所以前端入门应该以这三种语言为基础，慢慢扩展到其它领域。

当然有些同学可能上来就用框架，拜现代化前端技术所赐，有些同学可能完全没认真学习过这三门语言，也怼出了功能、甚至怼出了产品。但我建议，无论从上限考虑还是从下限考虑，都应该好好学习这三门语言本身。

声明式语言

入门一般都从 HTML、CSS 开始，因为它们很简单，简单的原因是因为它俩是声明式语言。那什么是声明式语言呢？标准定义咱们略过不谈，简单来说有两大特点：

需要什么你就写什么，需要这里有一个文字，那就写一个文字；需要有一张图片，就写一张图片。
不写的就不会出现。没有逻辑推演、计算，不会因为环境变量而有所不同，没写的就没有。

于是它们有好处也有坏处：

好处：没有心智负担，不用理解全局，就看某一行、某一段，写了就是有，没写就是没有。
坏处：需要 100 个字就要写 100 个字。有 100 个元素共用一个属性，可能也要写 100 遍。

如何学习 HTML+CSS

有些同学上学期间学过编程，比如 C 语言、Java 语言。它们都是命令式语言，有更强的逻辑性，它们就像一本推理小说，你必须从头看到尾，不漏过一个线索，层层推理，才能得到结论。

他们会套用自己在命令式语言方面的经验去学习 HTML+CSS，然后发现，好难……命令式语言的语法元素很少，难在组合出合适的逻辑、设计合适的数据结构。声明式语言能实现的效果总数是固定的，没有预先设计的部分，就是实现不了，谁都实现不了。但是每种效果的实现可能都是不同的，需要大量经验和记忆。用上一段的类比，声明式语言就像诗歌，甚至上一行跟下一行都没联系，但是连到一起还真有点意思。

所以学习 HTML+CSS 就要有合适的方法。我个人的经验如下，

1. 首先要知道

HTML 标签 100+，CSS 属性 200+，这些都是知识性的内容，不知道就是不知道；不知道但是要用，那就做不出来。所以第一步是知道这些内容，方法大概是：

浏览文档，比如 MDN。
自己实验，加深记忆和理解
跟背单词一样，要经常性重复这个过程，才能真的记住

这个过程不需要了解的很透，重点在于知道这些标签和属性的存在，当你面对需求的时候，才会想到解决方案。

2. 接下来要多尝试

经常浏览 codepen.io 这样的网站，上面有很多别人做的范例，可以长很多见识，让你恍然大悟，原来可以这样做那个东西。

同时，也可以反过来用看到的范例指导自己的学习。比如，看到一个 css 规则，这个你刚好不熟悉，就可以找来文档仔细阅读理解一下，或者在论坛上询问其他前辈。

一段时间之后，相信你会对大部分 html、css 属性都了如指掌，看到人家的网站，也大概知道该怎么做。但是给你一个实际项目，你可能还做不出来，或者做不好。没关系，那是下一步的目标。

3. 紧跟社区步伐

跟其它语言不一样，声明式语言从诞生开始，语法上不会有太大变化，语法元素也很固定。升级换代主要来自增砖添瓦，即新规则、新属性。

比如 CSS，早年我们布局只能依靠 float。很难用，有各种诘屈聱牙的概念需要记忆。后来就有了 display:flex，也就是弹性盒模型，好用的多。后来又有了网络布局。然后因为各种内部弹性外部弹性，又有了 min-content、max-content、fit-content 等新属性。

这些东西，很新，有时候没有办法找到合适的学习资料。于是就要紧跟社区来，通过技术账号了解到新知识，通过技术文档学习新知识。

4. 突破自己

自学里面，最难的一件事其实就是突破自己。就好像我今天看到一个帖子，楼主说准备找到工作后就办张健身卡去健身，然后下面一群人歪楼，说“为什么健身要办健身卡？”

因为自己监督自己很难，自己给自己打分更难。所以学校才要安排各种考试，给学生打分，让大家知道自己的位置。

所以，做出来自己看觉得还行，没有用。这里有几个建议：

瞄准一个产品，比如微信，做到像素级复制。可以截图然后调到 50% 透明度，叠到一起慢慢看。
选择最合适的技术，坚持到底，不要因为某些环节难以突破就乱来。
邀请比较有经验的前辈帮自己做 code review

附加：最好找个靠谱的前辈做引路人

（我想了想还是把这条加上。）

互联网是个好地方，我们能免费获取几乎所有有价值的资料。但是对于 Web 开发、前端开发这种领域，长期积累的海量知识储备也可能成为大家学习的障碍——东西太多，不知道从何处下手。

所以，有个靠谱的引路人也很重要，会帮你节省很多时间。笔者不才，亦好为人师，有需要的可以找我：

新人常犯的错误

新人难免会犯错，这里列举一些常见的、可以规避的问题：

1. 沉迷细节无法自拔

有些同学沉迷细节，喜欢抠字眼，经常会提出一些奇奇怪怪的问题。很多问题其实没有准确答案，也不需要准确答案，尤其是对于新人来说，可能三两年内都不会真的需要解决。

尤其是 HTML、CSS，因为是声明式语言，很多时候，它们的行为就是这么设计的，不需要也没办法深究；有些设计，可能来自二十年前甚至更早，现在早已没有那个应用场景，新人难以理解也是正常的。

所以我建议大家以记用法积累经验为主，辅以实操验证，不需要像学命令式语言那样去强迫自己理解。

2. 遇到问题生拼硬凑

有些同学遇到问题就发慌，然后开始百度，看到一个方案就复制粘贴试一试，能行就继续，不能行就复制粘贴下一个。结果代码就补丁摞补丁，各种解决方案混合在一起，毛病越来越多。到最后可能完全超出掌控、无法解决。

这里大家需要明白，语言元素很多，组合方式也很多。同样的问题，可能来自不同的根源；类似的组合，也会产生不同的问题。绝大部分时候，我们都要先选择方案，然后围绕方案组织代码，解决遇到的问题。在不同方案间左右横跳，最后结果多半不是好处均沾，而是问题集中爆发。

如果能够找到最佳实践，那就坚持。如果几个方案都差不多，那就选好一个，坚持下去。遇到问题，面对多个搜索结果，要分析它们是怎么做的，解决了什么问题，不要直接拷过来试。坚持一段时间，会有很好的结果。

总结

我当年也是自学成才，走过不少弯路，希望这系列分享能帮大家节省一些时间。

有任何问题和建议，欢迎留言评论。下次聊聊 JS 方面的学习。