波仔
🕸️ 第二章 Web特有的架构
📄 一句话概括

HTML 是网页的骨架：它不描述【好不好看】，只描述【这一块是什么】——标题、段落、列表、链接，各归各位。

📝 本节和前面几节的关系

2-2 讲了人怎么把网站做出来，从这一条起进入具体的零件。教科书把网页分成主要部分和次要部分：主要部分是 HTML（内容与结构），次要部分是 CSS（外观）。先有内容再谈样子，这个顺序本身就说明了优先级。

一、标签是给机器看的注释

一份 HTML 文件读起来像这样：文字被一对尖括号包着，尖括号里那一段叫标签。

人读的是中间的文字，机器读的是标签。同一个【标题】两个字，加上标题标签之后，浏览器知道该把它放大，搜索引擎知道它是这一页的主题，读屏软件知道该把它先念出来。

这解释了一个常被问的问题：为什么不能直接用大号字体假装标题？——因为那样只有人看得出，机器看不出来。

二、一页文档的骨架

HTML 的结构是嵌套的：一页文档从外到里分几层，每层各管一段事。

先分【头】和【身】：头部（head）不显示给用户看，它装的是这一页的元信息——标题、字符编码、要加载的样式和脚本；身体（body）才是用户看到的东西。

身体里再按语义分节：页头、导航、主体、侧栏、页脚。这些标签名本身就是说明书——看一眼就知道这一块是干什么的，不需要去猜类名。

三、动手 Demo：量一量标签到底占多少

import re
snippet = ('<article class="post"><h1>为什么要写标签</h1>'
           '<p>标签是给机器看的注释。</p><a href="/next">下一篇</a></article>')
tags = re.findall(r"<[^>]*>", snippet)
text = re.sub(r"<[^>]*>", "", snippet)
print(len(tags), sum(len(t.encode()) for t in tags), len(text.encode()))

实跑输出：

--------------------------------------------------------------------
D3  Web 网页的主要部分：HTML 与标签
--------------------------------------------------------------------
  先拿一小段真文件来量一量，标签到底占了多少：

  原文（排成三行看，共 131 字节）：
    <article class="post"><h1>为什么要写标签</h1>
    <p>标签是给机器看的注释。</p><a href="/next">下一篇</a>
    </article>

  拆开一量（按 UTF-8 字节算，一个汉字 3 字节）：
  ----------------------------------------------------------------------------------------
  部分          内容                              字节    占全文
  ----------------------------------------------------------------------------------------
  标签          共 8 个                           68      52%
  正文          共 21 个字                        63      48%
  ----------------------------------------------------------------------------------------

  这段里标签比正文还多。真实的网页不会这么极端，但方向一样：
  一份 20 KB 的 HTML 文件里，人真正读到的文字通常只有 6~7 KB。

  ⚠️ 注意：标签多不等于浪费。标签是【机器读的部分】：
    没有标签，浏览器不知道哪里是标题、哪里是段落、哪里能点。
    没有标签，搜索引擎和读屏软件也不知道这一页在讲什么。

  一个典型博客页会用到的标签，大约二十几个：
  ----------------------------------------------------------------------------------------
  用途            标签                                                个数
  ----------------------------------------------------------------------------------------
  页面骨架        html / head / body                                  3
  元信息          title / meta / link / script                        4
  语义分节        header / nav / main / article / aside / footer      6
  标题分层        h1 / h2 / h3                                        3
  文字与段落      p / ul / li / strong / em / br                      6
  链接与图片      a / img / figure / figcaption                       4
  ----------------------------------------------------------------------------------------
  合计                                                                26
  ----------------------------------------------------------------------------------------

  HTML 规范里定义的元素有 110 多个，但常用的翻来覆去就是这 20 多个。
  学 HTML 的窍门不是背标签，是记住【一页文档从外到里分几层】。

  ⚠️ 2026 现状：HTML 早就没有版本号了。
    现在的正式名字叫 HTML Living Standard（活标准），
    由 WHATWG 维护，改动直接并入，不再有 HTML6 这种说法。
    行业里还挂在嘴边的 HTML5，今天只是【当前标准】的俗称。

读这个输出：这一段里标签的字节数比正文还多。真实的网页不会这么极端，但方向是一样的——标签与属性的开销，通常要多占掉一半上下的文件体积。

不过要注意：标签多不等于浪费。它换来的正是上面说的那三件事（浏览器能画、搜索引擎能认、读屏软件能读）。把标签去掉，文件是变小了，可这一页也就只剩一堆看不懂排版的文字。

顺带一提：HTML 规范里定义的元素有一百多个，常用的翻来覆去就是二十多个。学 HTML 的窍门不是背标签，是记住一页文档从外到里分几层。

四、⚠️ 2026 现状

HTML 早就没有版本号了。现在的正式名字叫 HTML Living Standard（活标准），由 WHATWG 维护，改动直接并入，不再有 HTML6 这种说法。

行业里还挂在嘴边的 HTML5，今天只是【当前标准】的俗称：它不是一个可以【升上去】的版本，而是指【现在浏览器都认的那一套】。

30 秒实验

  1. 随便打开一个网站，按 F12 打开开发者工具，切到 Elements 面板。
  2. 找出一页里出现的标题标签一共有几个，看看它们的序号是不是从大到小、有没有跳级。
  3. 再把某一个标签删掉（直接在面板里按 Delete，只改你本机的显示，不影响网站），看页面发生了什么变化。

常见误区

  1. 错误：标签越多越乱，能少写就少写。——纠正：标签是给机器读的，省掉它同时省掉了可读性。省标签的代价通常不会立刻显形，而是在搜索引擎不知道这页讲什么、读屏软件念不出重点的时候才浮出来。
  2. 错误：HTML 和 Word 差不多，都是排版文字。——纠正：HTML 不描述长什么样，只描述是什么。字体多大、颜色多深，那是 CSS 的事（下一节）。把这两件事混在一起写，是新手最容易踩的第一个坑。
  3. 错误：HTML5 是 HTML 的下一个版本，以后还有 HTML6。——纠正：版本号这套机制早就废了。现在的标准是活的，改一处并入一处。所以【我是学 HTML4 还是 HTML5】这个问题本身就已经过时了。
  4. 错误：标签就是给排版用的。——纠正：标签的第一用途是说明结构，排版只是结果之一。一个正确使用标签的页面，即使把样式全部去掉，读起来依然条理清楚——这就是所谓【语义化】最直接的检验方法。
自测三问（点开对答案） 1. 为什么说标签是【给机器看的注释】？ —— 因为**人看的是标签中间的字，机器看的是标签本身**。同一个词，包上标题标签之后，浏览器知道该突出、搜索引擎知道它是主题、读屏软件知道要优先念。**这三种【知道】，靠字号大小是给不出来的。** 2. head 和 body 的分工是什么？ —— **head 装的是这一页的说明，body 装的是这一页的内容**。head 里的东西用户看不见（标题、编码、要加载的文件清单），但它决定了这一页**怎么被解读、要不要加载别的东西**——所以它虽然不显示，却是最不能写错的一段。 3. 怎么快速检验一个页面的 HTML 写得好不好？ —— **把 CSS 全部关掉再看一眼**。如果去掉样式之后，标题、段落、列表还分得清，说明标签用对了；如果一关样式就糊成一团，那就说明**结构其实是靠样式撑起来的**，机器读不出重点。

相关笔记