第 2 章 HTML：骨架语言

第二册综合演练里，你让 Claude 生成了一个最小的 index.html。现在把它请上解剖台。你的版本细节可能不同，骨架一定是这样：

html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>Charles 的主页</title>
  </head>
  <body>
    <h1>你好，世界</h1>
    <p>这是我从零上线的第一个网站。</p>
    <a href="https://github.com/charlestao">我的 GitHub</a>
  </body>
</html>

读懂一切 HTML，只需要三条规则。规则一：标签（Tag）。<p> 开、</p> 关，一对标签包住一段内容，名字就是身份：h1 大标题、p 段落、a 链接、img 图片、button 按钮、div 无名的通用盒子。少数标签自己包自己（<img>、<br>），因为它们没有"内容"可包。**规则二：嵌套成树。**标签里套标签，整个文件是一棵树——html 是树根，下分 head 和 body，一路分叉下去。缩进就是层级的可视化。你按 F12 在 Elements 面板里看到的正是这棵树；程序员说的 DOM，就是这棵树在浏览器内存里的活体。规则三：属性（Attribute）。开标签里的 名字="值" 是元素的设置项：href 是链接去哪，src 是图片在哪，id 是唯一编号，而 class 是给 CSS 认的名牌——下一章的主角，先记住它。

再看 head 和 body 的分工：head 里是给机器看的说明（标题、编码、要加载哪些样式文件），body 里才是给人看的内容。页面上看得见的一切都住在 body。

最后一个预告：我们自己的项目里其实很少见到裸的 .html 文件，因为 React（第一册第 2 章）把页面拆成了组件，你会在 .tsx 文件里看到"长在 JS 里的 HTML"——模样几乎一样，认出来就行，第 5 章正式介绍。

认脸卡

后缀 .html；满眼尖括号；标签成对；缩进成树。

关键领悟

HTML 只回答一个问题——页面上有什么、谁包着谁。它不管好不好看（那是 CSS 的事），也不管点了会怎样（那是 JS 的事）。

试一试

打开你的 index.html，挑三个标签说出各自的身份和属性的含义。然后故意删掉一个关闭标签，刷新浏览器看页面如何错乱——再改回来。破坏一次再修复，比读十遍都记得牢。

第 2 章 HTML：骨架语言 ​

第 2 章 HTML：骨架语言