第10章 构建Web内容的技术
理解HTML、CSS、动态HTML、DOM、CGI、Servlet以及XML、RSS/Atom和JSON在Web内容生成与发布中的分工
第10章 构建Web内容的技术
本课程对应[日]上野宣《图解HTTP》，于均良译，人民邮电出版社/图灵教育，2014年4月首版，308页，双色印刷，ISBN 9787115351531；原书《HTTPの教科書》，ISBN 9784798126258。图灵官方资料标明出版日期为2014年4月22日、172张图解；正式目录为11章、202个节/小节节点。本页严格按该首版章次组织，不用后续规范替换原书语境。
学习目标
- 能解释“第10章 构建Web内容的技术”全部正式节点，并把概念定位到真实请求、响应或应用状态。
- 能绘制客户端、中介、服务器之间的消息方向、主体边界和关键状态转移。
- 能设计单变量实验，验证“从一个URL返回页面时，能区分服务器端生成、传输格式、浏览器DOM构建、样式应用和脚本修改五个阶段”。
- 能写出并提交包含原始报文、失败反例、恢复条件和版次边界的独立证据包。
机制总览
第10章 构建Web内容的技术：机制路径
- 1
从一条可证伪的HTTP交换开始
先预测：把HTTP、HTML、JavaScript与服务器程序视为同一层，会把传输错误、生成错误和客户端渲染错误混在一起。把预测写成“请求输入、线上消息、接收方状态、响应输出、最终副作用”五列，再运行实验。若结果与预测不同，先修正模型，不要只截取一个状态码证明自己。
- 2
核心词汇与首版边界
这些词汇按2014年首版语义使用。SPDY、HTTP/2.0、X-XSS-Protection、P3P等保留出版时状态；HTTP/2最终规范、HTTP/3、JWT、OAuth、SameSite等后续技术只能作为另行标注的现代补充，不改变本书目录分母。
- 3
核心机制深读
浏览器按Content-Type选择解析器，把HTML标记解析成文档树，再依据CSS选择器和层叠规则计算表现。HTML版本演进改变可用元素与解析规则，但HTTP只负责传输表示，不替页面决定布局。
章级决策实验
第10章 构建Web内容的技术：机制与证据
切换《第10章 构建Web内容的技术》的三个关键教学阶段，先解释机制，再用运行与失败证据验证结论。
选择推理阶段
当前阶段 · 从一条可证伪的HTTP交换开始
先预测：把HTTP、HTML、JavaScript与服务器程序视为同一层，会把传输错误、生成错误和客户端渲染错误混在一起。把预测写成“请求输入、线上消息、接收方状态、响应输出、最终副作用”五列，再运行实验。若结果与预测不同，先修正模型，不要只截取一个状态码证明自己。
可核验证据
保存「从一条可证伪的HTTP交换开始」的原始请求与响应报文，用 curl 和浏览器网络面板复现成功、重定向、缓存及拒绝路径，并核对状态码与首部。
学完《第10章 构建Web内容的技术》后，应能从输入和前置条件推导状态变化，并用可重复的构建、运行或边界测试证明结果。
失效—证据矩阵
第10章 构建Web内容的技术：失效与核验
从一条可证伪的HTTP交换开始
典型失效
若只背诵「从一条可证伪的HTTP交换开始」字段而不区分请求语义、缓存边界和安全上下文，代理或浏览器状态变化后会得到错误响应或泄露数据。
核验证据
保存「从一条可证伪的HTTP交换开始」的原始请求与响应报文，用 curl 和浏览器网络面板复现成功、重定向、缓存及拒绝路径，并核对状态码与首部。
核心词汇与首版边界
典型失效
若只背诵「核心词汇与首版边界」字段而不区分请求语义、缓存边界和安全上下文，代理或浏览器状态变化后会得到错误响应或泄露数据。
核验证据
保存「核心词汇与首版边界」的原始请求与响应报文，用 curl 和浏览器网络面板复现成功、重定向、缓存及拒绝路径，并核对状态码与首部。
核心机制深读
典型失效
若只背诵「核心机制深读」字段而不区分请求语义、缓存边界和安全上下文，代理或浏览器状态变化后会得到错误响应或泄露数据。
核验证据
保存「核心机制深读」的原始请求与响应报文，用 curl 和浏览器网络面板复现成功、重定向、缓存及拒绝路径，并核对状态码与首部。
从一条可证伪的HTTP交换开始
先预测：把HTTP、HTML、JavaScript与服务器程序视为同一层，会把传输错误、生成错误和客户端渲染错误混在一起。把预测写成“请求输入、线上消息、接收方状态、响应输出、最终副作用”五列，再运行实验。若结果与预测不同，先修正模型，不要只截取一个状态码证明自己。
本章的主问题是：理解HTML、CSS、动态HTML、DOM、CGI、Servlet以及XML、RSS/Atom和JSON在Web内容生成与发布中的分工。原书以图解建立直觉，本课程把图解升级为可操作轨迹：每个箭头必须注明方向、协议对象和完成点；每个安全结论必须附一条攻击或误配置反例。
验收不变量是：从一个URL返回页面时，能区分服务器端生成、传输格式、浏览器DOM构建、样式应用和脚本修改五个阶段。浏览器页面“看起来正常”只能说明某个终点出现，不能单独证明DNS、连接、TLS、缓存、认证或授权中的哪一段正确。
核心词汇与首版边界
↡描述Web文档结构和语义的超文本标记语言、↡把表现规则从文档结构中分离并应用到元素的样式语言、↡把文档解析为可由程序读取和修改的节点树接口、↡Web服务器启动或调用外部程序生成HTTP响应的通用接口、↡源自JavaScript对象表示法、适合数据交换的轻量文本格式
这些词汇按2014年首版语义使用。SPDY、HTTP/2.0、X-XSS-Protection、P3P等保留出版时状态；HTTP/2最终规范、HTTP/3、JWT、OAuth、SameSite等后续技术只能作为另行标注的现代补充，不改变本书目录分母。
核心机制深读
HTML负责结构，CSS负责表现
浏览器按Content-Type选择解析器，把HTML标记解析成文档树，再依据CSS选择器和层叠规则计算表现。HTML版本演进改变可用元素与解析规则，但HTTP只负责传输表示，不替页面决定布局。
动手试：先写下预期请求、响应与状态变化，再捕获一次正常交换和一次只改一个变量的失败交换。比较状态码、首部、主体、缓存或会话状态，确认结论来自证据而非浏览器表象。
动态HTML发生在客户端
脚本读取或修改DOM节点、属性和事件，使已加载页面改变内容和交互。DOM是语言中立的文档接口，不等同于HTML源文本；运行时树可能已被解析器修正或被脚本改写。
CGI与Servlet发生在服务器端
CGI把请求信息放入环境变量和标准输入，由外部程序输出状态、首部和主体，进程启动成本较高；Servlet常驻Java容器，由线程处理多个请求，减少反复启动并提供会话等服务。
发布格式选择取决于语义
XML可由命名空间和模式表达结构化文档，RSS/Atom面向更新订阅，JSON用对象、数组和标量表达轻量数据。它们都需匹配正确Content-Type、字符编码和转义规则，格式本身不自动提供信任。
原书目录核对清单
本页承担15个目录或复习节点，正文、图解、实验和题目必须能反向定位每一项：
- 10.1 HTML
- 10.1.1 Web页面几乎全由HTML构建
- 10.1.2 HTML的版本
- 10.1.3 设计应用CSS
- 10.2 动态HTML
- 10.2.1 让Web页面动起来的动态HTML
- 10.2.2 更易控制HTML的DOM
- 10.3 Web应用
- 10.3.1 通过Web提供功能的Web应用
- 10.3.2 与Web服务器及程序协作的CGI
- 10.3.3 因Java而普及的Servlet
- 10.4 数据发布的格式及语言
- 10.4.1 可扩展标记语言
- 10.4.2 发布更新信息的RSS/Atom
- 10.4.3 JavaScript衍生的轻量级易用JSON
复原正常协议轨迹
固定URI、客户端、网络和服务端状态，标出请求行、首部、主体、中介与最终响应。
可复现实验
<!doctype html>
<link rel="stylesheet" href="/site.css">
<main id="result">loading</main>
<script>document.querySelector('#result').textContent='ready'</script>request -> Web server -> CGI process -> response
request -> Servlet container -> worker thread -> response{
"title": "HTTP",
"chapters": 11,
"available": true
}独立证据门
第10章 构建Web内容的技术 的最小证据包包含：首版目录节点、请求与响应原文、连接/中介方向、主体边界、缓存或会话状态、一个单变量失败、最终副作用、已知限制、恢复步骤、责任人与复核人。
练习
练习
问题 1：为什么“第10章 构建Web内容的技术”必须固定2014年首版语境？
问题 2：怎样构造“把HTTP、HTML、JavaScript与服务器程序视为同一层，会把传输错误、生成错误和客户端渲染错误混在一起”的最小反例？
问题 3：何时可以认为本页完成独立交接？
本章回顾
“第10章 构建Web内容的技术”的核心是理解HTML、CSS、动态HTML、DOM、CGI、Servlet以及XML、RSS/Atom和JSON在Web内容生成与发布中的分工。真正掌握不止是认出术语，而是能让一条请求在消息、连接、中介、表示、身份和攻击边界之间闭环，并用失败实验说明边界一旦被破坏会发生什么。
名词解释
本章出现的专业名词，用大白话再讲一遍。
- HTML
描述Web文档结构和语义的超文本标记语言。掌握标准是能在原始请求或响应中定位它，并构造一条最小反例。
- CSS
把表现规则从文档结构中分离并应用到元素的样式语言。掌握标准是能在原始请求或响应中定位它，并构造一条最小反例。
- DOM
把文档解析为可由程序读取和修改的节点树接口。掌握标准是能在原始请求或响应中定位它，并构造一条最小反例。
- CGI
Web服务器启动或调用外部程序生成HTTP响应的通用接口。掌握标准是能在原始请求或响应中定位它，并构造一条最小反例。
- JSON
源自JavaScript对象表示法、适合数据交换的轻量文本格式。掌握标准是能在原始请求或响应中定位它，并构造一条最小反例。
← 上一页：第9章 基于HTTP的功能追加协议 · 下一页：第11章 Web的攻击技术 →
原版目录概念补充核对
以下条目补齐官方目录中容易被示例主线掩盖的概念。它们不重复罗列目录，而是明确每项概念的机制、适用边界和验收证据。
10.1.1 Web页面几乎全由HTML构建：机制、边界与证据
第10章 构建Web内容的技术中的10.1.1 Web页面几乎全由HTML构建描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.1.2 HTML的版本：机制、边界与证据
第10章 构建Web内容的技术中的10.1.2 HTML的版本要放进一次完整 HTTP 交换中判断：请求行与首部给出前置条件，状态码和响应首部说明处理结果，消息体承载表示。复核时保存原始报文并改变方法、资源状态或连接复用条件，确认客户端、代理与服务端对语义的解释一致。
10.1.3 设计应用CSS：机制、边界与证据
第10章 构建Web内容的技术中的10.1.3 设计应用CSS描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.2 动态HTML：机制、边界与证据
第10章 构建Web内容的技术中的10.2 动态HTML描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.2.1 让Web页面动起来的动态HTML：机制、边界与证据
第10章 构建Web内容的技术中的10.2.1 让Web页面动起来的动态HTML描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.2.2 更易控制HTML的DOM：机制、边界与证据
第10章 构建Web内容的技术中的10.2.2 更易控制HTML的DOM描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.3 Web应用：机制、边界与证据
第10章 构建Web内容的技术中的10.3 Web应用描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.3.1 通过Web提供功能的Web应用：机制、边界与证据
第10章 构建Web内容的技术中的10.3.1 通过Web提供功能的Web应用描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.3.2 与Web服务器及程序协作的CGI：机制、边界与证据
第10章 构建Web内容的技术中的10.3.2 与Web服务器及程序协作的CGI描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.3.3 因Java而普及的Servlet：机制、边界与证据
第10章 构建Web内容的技术中的10.3.3 因Java而普及的Servlet描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.4 数据发布的格式及语言：机制、边界与证据
第10章 构建Web内容的技术中的10.4 数据发布的格式及语言描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.4.1 可扩展标记语言：机制、边界与证据
第10章 构建Web内容的技术中的10.4.1 可扩展标记语言描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.4.2 发布更新信息的RSS/Atom：机制、边界与证据
第10章 构建Web内容的技术中的10.4.2 发布更新信息的RSS/Atom描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。
10.4.3 JavaScript衍生的轻量级易用JSON：机制、边界与证据
第10章 构建Web内容的技术中的10.4.3 JavaScript衍生的轻量级易用JSON描述 Web 组件之间的一项可观察契约。先写出发送方、接收方和中间节点各自保存的状态，再以一组成功报文和一组边界/拒绝报文核对字段、时序与最终表示，防止把实现习惯误认为协议保证。