HTML、CSS 和 JavaScript

在浏览器里，frontend 恰好由三种语言搭起来。你不需要亲手去写它们，但你需要知道每一种各自管什么。

HTML（超文本标记语言）是结构——内容以及它的骨架。它说 "这里是一个标题，这里是一个段落，这里是一个按钮"。它是页面的名词；HTML 单独存在时，是一份朴素、没有样式的文档，就像一个带标签的文本文件。浏览器会把你的 HTML 变成一棵存在内存里、活的对象树，叫做 DOM（Document Object Model，文档对象模型）；当代码 "改变页面" 时，它其实是在改变 DOM，然后浏览器重新绘制以保持一致。

CSS（层叠样式表）是样式——一切看起来是什么样。颜色、字体、间距、布局、靠左还是居中、小屏幕还是大屏幕。CSS 不会改变页面上有什么，只改变它怎么呈现。如果说 HTML 是名词，那 CSS 就是形容词。

JavaScript（JS）是行为——你交互时发生了什么。它监听点击、把数据发给 backend、显示一个加载转圈、在答复回来时更新 DOM。HTML 和 CSS 是静态的；JavaScript 让一个页面做事情。它是动词。（同一种语言通常也用来跑 backend，这就是为什么你到处都会看到它。）

有一种方式可以想象这种分工：HTML 搭起一棵树（DOM），CSS 给它上色，而 JavaScript 伸进去改动它：

   HTML ─▶ 构建 DOM 树               CSS ─▶ 为其设置样式    JS ─▶ 改变它
   ┌──────────────────────────┐
   │  page (document)          │
   │  ├── header               │      为每个节点          点击时,
   │  │   └── "My App"         │      应用颜色、字体、      更新某个节点
   │  └── form                 │      间距                → 浏览器重绘
   │      ├── input  (name)    │
   │      └── button "Save"    │
   └──────────────────────────┘