最近看了 web.dev 出的 HTML 和 CSS 教程，结构非常清晰，内容也很丰富，适合入门。

• Learn HTML：https://web.dev/learn/html/🔗
• Learn CSS：https://web.dev/learn/css/🔗

还有些其他的教程，比如 Privacy、Accessibility 和 Responsive Design 等，都十分言简意赅。

网站开发首要需要遵循的原则，也是 《HTML5 与 CSS3 基础教程》🔗 《HTML5 与 CSS3 基础教程》调的原则：渐进增强。

用 HTML 控制内容（Model），CSS 控制样式（View），JavaScript 控制行为（Controller）。

1. HTML

HTML 是超文本标记语言（HyperText Markup Language）的简称，现在通常使用的是第五代，即 HTML5。

作为前端三剑客（HTML、CSS 和 JavaScript）的第一剑，HTML 是最重要，但通常也是最容易被忽略的。HTML 谁不会写？

严格来说，HTML 不应算作是一门图灵完备的编程语言（CSS 也不算），但在前端开发中占据的位置，举足轻重。

因为正是 HTML，构建了网页的内容。

现在的网页技术发展很快，网站的界面和动画效果也都很酷炫，但抛开这些表面的浮华，对于用户来说真正重要的是，这个网站能不能提供我所需要的信息。

帮助开发者更好的组织网站内容，尽可能提供所有用户可访问性（accessibility），就是 HTML 想要做的。

朝着这个目标，HTML 大致做了这么几件事，简单来说就是分而治之，递归解决。

1. 借助 tag 标记内容。这样以来，文本不仅多了 meta 描述信息，而且“栈”这种结构，可无限递归，对于内容结构的表达能力接近无限。
2. 对于网站整体的描述，借助诸如 meta、title、lang 等 tag
3. 对于结构的描述，有 header、main、article、footer 等 tag
4. 对于不同的内容，像是链接、表格、表单等，都有标准化的 tag，好处是只需要写一次，就可以跨端执行
5. 因为 tag 的抽象能力较强，为了进一步具象化，提供标准化 attribute 和自定义的方式
6. 通过 DOM 将扁平的文档（人读）转换为嵌套的数据结构（机读），并借助一系列丰富的 HTML API 提供和 DOM 的交互接口

2. CSS

有了语义结构良好的 HTML，下一步需要考虑的，就是怎么使得呈现效果更好看。

这是 CSS 负责的部分。

从这个方面看，HTML 和 CSS 解耦得相当好。HTML 只需要用合适的 tag 将网站内容标记，剩下的样式就交给 CSS。

这也是渐进增强的含义：即便 CSS 的功能浏览器没有完全支持，用户得到的，最差也只是一个不那么好看的网页，基础内容都还在。

CSS 的全称是层叠样式表（Cascading Style Sheets）。所谓层叠，按照我的理解，就是一种样式最终确定的 算法🔗：

1. 出现的位置和顺序（子样式继承父样式；后出现的覆盖前出现的）
2. 特殊性（特殊的覆盖一般的）
3. 起源（来自不同源的 CSS 规则优先级不同，基本遵循：越是特殊的，优先级越高）
4. 优先级（优先级高的覆盖优先级低的）

CSS 最经典的模型就是盒模型（box model），通过控制不同盒子的样式决定最终呈现。

盒模型是个表达能力很强大的模型，主要原因在于，它是可以递归和嵌套的。

盒模型是个比较经典，也是个比较老的模型。在一些场景，尤其是响应式设计中，不是很灵活。

因此又有了 Flex 和 Grid 两种专门用于 Layout 的模型。这俩布局模型，后面有时间会专门写写。

CSS 的功能很丰富，甚至单独针对字体这一领域都可以写一本书。

重要的是了解其基本理念，具体可以在使用的时候再去学习。

3. 总结

HTML 和 CSS 都不算是专门的编程语言，上手也比较轻松。但如果想深入进去，依然有很多值得学习和思考的地方。

直至今天，HTML 和 CSS 都还在不断地进行着标准化，越来越多的功能和接口被加进来。

前端的发展的确可称得上是日新月异。

当然，我们应该做的，是以不变应万变，掌握其出现的背景，要解决的问题，以及解决问题的思路和方式。

这些才是真正值得我们去学习的。

（完）

参考

1. https://web.dev/learn/html/🔗
2. https://web.dev/learn/css/🔗
3. https://book.douban.com/subject/25878992/🔗