HTML、CSS 和 JavaScript 分别做什么

你正在读的这一页就是教材。它由三层叠成：内容、外观、行为。分清这三层，你就知道「改一个错别字」「换个颜色」「加个按钮」分别要动哪里，也知道为什么浏览器会问网页要不要权限。

HTML is what it says. CSS is what it looks like. JavaScript is what it does. This page is all three.HTML es lo que dice. CSS es cómo se ve. JavaScript es lo que hace. Esta página es las tres cosas.

左边是作者写的，右边是读者看的

网页是三层

必须掌握

层	管什么	像 Word 里的
HTML	内容和结构：这是标题、这是段落、这是链接	正文和样式名
CSS	外观：颜色、字号、间距、深色模式	样式的定义
JavaScript	行为：点一下发生什么，搜索、折叠、切换	宏

三层分开，是Word 一章里「内容归内容、格式归样式」的同一个道理，只是网页把它做到了底：内容、外观、行为是三种文件。

右键「检查元素」，看这一页的骨头

必须掌握

你什么时候会遇到这个问题：想知道一个网页到底是什么做的。

最简单可靠的做法：

Chrome 或 Edge：在页面任何地方右键，「检查」。
Safari：先在「设置」，「高级」里勾上「显示网页开发者功能」，然后右键，「检查元素」。

窗口里会出现这一页的 HTML。你会看到 <h2> 包着每个小标题，<p> 包着每个段落，<a> 是链接。双击任何一段文字，改掉它，页面上马上变。刷新页面，一切恢复：你改的是你浏览器里的那份，不是网站。

这个窗口对普通读者只有一个用处：知道网页不是图片，是一份能读的文字结构。

这一页是一个 Markdown 文件

必须掌握

网站的作者不写 HTML。这一页在仓库里是一个叫 web.md 的纯文本文件，开头长这样：

---
title: HTML、CSS 和 JavaScript 分别做什么
description: 网页是三层……
---

## 网页是三层

| 层 | 管什么 |
|---|---|
| **HTML** | 内容和结构 |

三层分开，是[Word 一章](/office/word/)里……

--- 之间是这一页的信息，下面就是正文。## 是小标题，** 包起来是粗体，[文字](地址) 是链接，| 画表格。这套写法叫 Markdown，比 Word 轻，比 HTML 好读，用任何文本编辑器都能写。

一个叫 Astro 的工具在发布时把每个 .md 文件翻译成 HTML：

你写	变成
`## 网页是三层`	`<h2>网页是三层</h2>`
`HTML`	`<strong>HTML</strong>`
`[Word 一章](/office/word/)`	`<a href="/office/word/">Word 一章</a>`

所以改这本手册的一个错别字，改的是 .md 文件里的一个字，不用碰 HTML。怎么改在 Git 一章。

CSS：这个网站的颜色在一个文件里

知道即可

整个网站的外观在一个叫 custom.css 的文件里。其中几行：

:root {
  --sl-color-accent: #2b5797;
  --sl-content-width: 46rem;
}

第一行是站点的主色，那个深蓝。改成别的值，全站的标题、链接、侧栏高亮一起变。深色模式另有一行，要一起改。第二行是正文宽度。四十多页共用一个文件，这就是「外观和内容分开」的好处：改一处，处处变。

#2b5797 是颜色的写法，六位十六进制，两位红两位绿两位蓝。不用记，让 AI 给。

JavaScript：这一页里哪些是它做的

知道即可

右上角切换深浅色，搜索框，手机上折叠侧栏，点击标题旁的链接图标。这些都是 JavaScript。把它关掉，这一页照样能读，只是不能切换、不能搜。

网页里的 JavaScript 能做的事很多：读你输入的内容，请求你的位置、摄像头、通知。这是浏览器一章里浏览器为什么会弹窗问你的原因：它在问，这个网页的 JavaScript 能不能碰这个东西。

网页和应用的边界

知道即可

现在很多「应用」其实是网页：在线文档、网页版微信、大多数 AI 工具。它们的三层和这一页一样，只是 JavaScript 那层大得多。所以它们也一样：内容存在别人的服务器上，外观随时会改，行为需要权限。

练习

在这一页上右键「检查」，找到最上面那个 <h1>，双击把标题改成你的名字，截一张图。然后刷新，看它变回来。你刚刚改了一个网页，而且什么都没弄坏。