职责被分成了三份
上一篇说过，浏览器从服务器接收文件并画出画面。接收的就是这三个文件。
HTML 写的是展示什么：这个画面上有标题、有列表、有登录按钮。CSS 写的是长什么样：那个按钮在右上角、背景是黄色、字号是多少像素。JavaScript 写的是按下去发生什么：点这个按钮就播放视频。
不同浏览器能画出同样的画面，原因就在这里。无论 Chrome、Edge 还是 Firefox，收到这三类文件后都按约定好的规则组合成画面。过去确实有过同一份 CSS 在不同浏览器里显示不同的年代，如今基本消失了。
HTML — 有什么
<button class="btn">登录</button>
CSS — 长什么样
.btn { background: #ffcc00; font-size: 16px; }
JavaScript — 按下去发生什么
document.querySelector('.btn').addEventListener('click', ...)CSS 为什么被单独拆出来
先纠正一个常见说法。CSS 不是因为 HTML 无法表达样式才出现的。
在 HTML 里也能写样式，给每个标签加上 style 属性即可。问题在于文档会因此变得难以承受地长。一个按钮就要写颜色、尺寸、间距、边框，这样的元素有几百个，文档就没法读了。
所以样式被单独拆了出来。有什么放在 HTML，长什么样放在 CSS。同一份样式能被多个元素复用，这个好处也是从同一次拆分中来的。
样式不生效时，别先怀疑语法
CSS 里第一道真正的坎是优先级，因为多条规则可以同时落在同一个元素上。
指向一个按钮的方式有好几种：按标签名写 button，按类名写 .btn，或者更窄地写成 button 里的 span。当这些规则同时落在同一个元素上时，指得更窄的那条获胜。
所以颜色不变时先找语法错误是在浪费时间。通常语法没问题，而是别处一条更窄的规则已经胜出。在浏览器开发者工具里点开那个元素，哪条赢了、哪条被划掉了，一目了然。
让智能体来改时这个区分同样有用。「这个类上的背景色好像被别的规则压过了」比「颜色改不动」结束得快得多。
| 指向的方式 | 示例 | 有多窄 |
|---|---|---|
| 标签名 | button { } | 宽 |
| 类名 | .btn { } | 中 |
| 用关系收窄 | button span { } | 窄 |
TypeScript 不是 JavaScript 的别名
JavaScript 本是为了让画面动起来而生的，但因为它是编程语言，也开始被用在服务端。能计算、能存值、能循环，我们就叫它语言，JavaScript 满足这些条件。HTML 只描述画面结构，所以叫标记而不叫语言。
随着要处理的事情变大，问题浮现了：没有事先钉住某个值是数字还是文字，填错了值也要等到运行时才有人发现。
于是在上面加了一层规则。声明这个值是数字、那个值是文字，对不上就在运行前被拦下。这就是 TypeScript。它不是要重新学一门语言，而是给 JavaScript 加上了形态声明。
氛围编程产出的项目多半是 TypeScript，原因也在这里。代码越是由智能体而非人来写，这种在运行前拦下错配的机制就越值钱。