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

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

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

网站开发首要需要遵循的原则，也是《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/🔗