波仔
📘 第十章 构建Web内容的技术
📄 一句话概括

浏览器收到的那串字节，几乎全是 HTML。 它用标签把内容包起来，告诉浏览器「这段是标题、这段是链接、这张是图」。 整页 342 字节里，真正的文字只有 32 个字。

📝 本节和前面几节的关系

前九章讲的都是「怎么把字节送到」。 从这一章开始换到字节那一头：送到的东西长什么样、由什么拼起来。

一、标签是给机器看的

一个页面打开来看是文字和图片，但传到浏览器的其实是一段纯文本。 里面除了你要看的字，还有一堆 <h1>、<p>、<li> 之类的东西。 这些东西叫标签，作用是告诉浏览器这段内容是什么，而不是告诉它「长什么样」。 <h1> 的意思是「这是一级标题」，至于字号多大、要不要加粗，那是另一套规则（CSS）决定的。 这个分工是慢慢定下来的。 九十年代的页面里到处是 <font size="3"> 这种「连长相一起写死」的标签，改一次样式要动几十个文件。 后来才把「结构」和「表现」拆开。

二、一页里到底有什么

Demo 拿一段三十来行的 HTML 数了一遍：13 个标签、12 种不同的标签、8 种属性。 最多的不是 div 也不是 span，是 li——两个列表项。 属性里出现的有 id、class、src、href、alt、charset、lang、rel。 这八个基本覆盖了日常页面要交代的全部信息：叫什么、属于哪一类、引用了哪个文件、链接去哪、 图片的替代文字是什么。 整页 342 字节，抽出来的文字一共 32 个字。 也就是说九成以上的字节都是标记——这不是浪费，是为了让机器看得懂而付的费。

三、三层各管一件事

HTML 管结构：这段是标题，那段是段落，这个是个列表。 CSS 管表现：标题多大、段落行距多少、列表要不要小圆点。 JavaScript 管行为：点了按钮之后发生什么、数据怎么拉。 这三层分开写，好处是改一层不用动另外两层。同一份 HTML 换一个 CSS就能变成手机版； 同一个 CSS 套在不同 HTML 上也能用。所以「一个页面三种文件」不是麻烦，是刻意的设计。

四、动手 Demo：数一数一页 HTML 里有什么

写一段最普通的 HTML，用 Python 自带的解析器数标签、数属性、抽文字， 看看「结构」到底占了多大的比例。

class Counter(HTMLParser):
    def handle_starttag(self, tag, attrs):
        self.tags[tag] = self.tags.get(tag, 0) + 1
        for k, v in attrs:
            self.attrs[k] = self.attrs.get(k, 0) + 1

    def handle_data(self, data):
        if data.strip():
            self.text.append(data.strip())

实跑输出：

--------------------------------------------------------------------
一页 HTML 里到底有什么
--------------------------------------------------------------------
  标签       出现次数
  li       2
  body     1
  h1       1
  head     1
  html     1
  img      1
  link     1
  meta     1
  p        1
  strong   1
  title    1
  ul       1

  属性         出现次数
  alt        1
  charset    1
  class      1
  href       1
  id         1
  lang       1
  rel        1
  src        1

  标签总数                   13 个
  不同标签                   12 种
  整页字节                   342 字节
  纯文本片段                 7 段，共 32 字

  抽出来的文字按顺序是：示例页／图解 HTTP／这一页／几乎／全是 HTML 写的。／第一项／第二项

  两件事值得注意：一、页面里没有一行「指令」，全是标签和文字，服务器发过来的就是这么一串字节；
  二、整页 342 字节里，真正的文字只占 32 个字——剩下的都是标签和属性。

标签总数 13 个，不同标签 12 种——只有 li 出现了两次。 这个小样本恰好说明：一页里真正重复的标签并不多，真实页面里成千上万个标签，是靠模板循环出来的。 整页 342 字节，文字 32 字。 所以「页面很轻」这种感觉是错的：一个纯文字页面，标记大约要占八九成。 属性一共 8 种。 id 只有 1 个，class 也只有 1 个——真实项目里这两个会多得多，因为它们正是 CSS 和 JS 的抓手。 抽出来的文字按顺序是「示例页／图解 HTTP／这一页／几乎／全是 HTML 写的。／第一项／第二项」。 注意 <strong> 里的「几乎」被单独抽出来了——它不是分段，是同一段里的一部分。 这一点在读 DOM 时会很重要（10.2.2）。

30 秒实验

  1. 给自己常看的一个网页按 Ctrl+S 存下来，用记事本打开，数数它有多少字节。
  2. 把 <!DOCTYPE html> 那一行删掉再打开，看页面的间距有没有变——这是 10.1.2 的事。
  3. 想一想：如果没有标签，浏览器怎么知道哪一行是标题？

常见误区

  1. 「HTML 是编程语言」——它是标记语言，没有变量、循环、判断。
  2. 「标签是用来控制样式的」——标签说的是「这是什么」，不是「长什么样」。
  3. 「页面里大部分字节是内容」——标记通常占八九成，内容只是小头。
自测三问（点开对答案） 1. HTML 标签的作用是什么？ —— 告诉浏览器这段内容是什么（标题、段落、列表），不负责它长什么样。 2. 结构、表现、行为分别由什么负责？ —— HTML 管结构，CSS 管表现，JavaScript 管行为。 3. 为什么说「一个页面三种文件」是刻意的？ —— 改一层不影响另外两层，同一份结构可以配不同样式。

HTML 自己也在变。那行决定版本的 doctype，为什么能从两行长串变成五个词？

相关笔记