HTML&CSS 学这些就够了

你知道吗？

• HTML 大概有 100+ 标签。

• CSS 至少有 60+ 选择器。

• CSS 已经有接近 1000+ 的属性。

这么多，你学得完吗？

假如你有大毅力，能学完，你记得住吗？

假设你很牛，全都能背下来，全部都能用得到吗？

那既然这样，我们应该怎么学呢？

答案是，只需要学习那些最常用的知识点，剩下的等你需要用到的时候，可以随时找得到就行了。

之道前端的 L1 等级主要的学习目标就是 HTML&CSS。让我们来看下学习路线的目录：

可以看到，差不多只有 34 个知识点，你只需要学会这些知识点，就可以达到 L1 水平了。

在初入前端的学习之路，关于 HTML & CSS，你只需要学这些就够了！

为什么学这些就够了？

虽然 HTML 标签很多，CSS 选择器语法很多，CSS 的属性就更多了。

但是我们平常工作中真正能用到的是很少的一部分。根据二八原则，也就是只有 20% 的知识点是常用的。

因此我们只需要学会这里的 20% 就行了。

剩下的，在真实的开发过程中，几乎用不到，学了就是白学，只能过过脑瘾，并没什么用。

可能你觉得我是在开玩笑，下面我给你举 2 个证据。

首先是第一个证据，为了这个，我花了不到半天时间开发了一个工具。

我把这个工具称为站点 CSS 源码分析工具，现在还是简易版。

简单给你说明一下这个工具的原理，

• 给这个工具输入一个 url，这个工具会先爬这个 url 的 HTML 文件内容。
• 然后分析这个 HTML 文件内容，把所有 CSS 链接爬出来。
• 然后把所有 CSS 文件下载下来，然后分析这些 CSS 文件源码使用到的 CSS 属性，汇总统计。

就是这么简单，后面还能补充更多的功能，不过现在已经可以满足我的要求了。

后面这个工具也会是我们的原创项目之一，属于爬虫类工具，敬请期待

直接来看结果吧，我挑了一些大家耳熟能详的站点：

先来看淘宝和京东，可以关注一下 10次以上的属性，是不是耳熟能详？

再来看博客类站点，掘金，也差不多吧。

再看一个飞书的品宣页，是有一个表单的，也是类似：

最后再来看官网类站点，比如小米的：

其他站点就不列举了，因为结果是一致的，排在前列，使用次数最多的那些属性，都是我们常用的知识点。

再来看一个有意思的地方：

这是京东 PC 和 H5 首页的统计情况，可以明显看到，float 在 PC web 使用得更多，排名也更靠前。

float 是旧时代更多用来布局的，在移动时代，有其他更好的方案，因此，在之道前端这里，不推荐你学习 float 知识点。

上面的统计是不全面的，因为在大型站点，很多模块和组件都是动态加载的，因此这部分 CSS 代码并没有被统计到，不过对于已有的内置样式的统计数据，已经可以说明问题了。

好了，再给你举一个证据。

这是真实的案例，因为这是我们之道前端的第 2 个原创项目。

在这个项目中的阶段 2，我们通过模仿实现天猫 PC 端首页来练习我们的 HTML & CSS。

你可以先打开之道前端的参考答案，感受一下，是不是有一点复杂度？元素挺多的，也需要一定的布局。

之道前端所有原创项目的参考答案都会在 Github 中公开，你可以自行查阅。

现在，让我们使用刚刚的工具来分析我们的 CSS 源码，这次是全部的源码了，看看结果：

通过这个结果，可以看到：

• 上面所有属性都涵盖在之道前端学习路线中的知识点中
• 没有使用 float

通过上面这些证据，已经可以充分证明我的观点：

HTML&CSS 学这些就够了！

具体学哪些？跟着之道前端(戳此加入)来学就行了！

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。