第 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 · 骨架语言