波仔
⌨️ 第六章 Web技术与安全
📄 本篇一句话

HTML 是网页的骨架（说有什么），HTTP 是网页的快递（说怎么送）——一个管内容长什么样，一个管内容怎么从服务器到你眼前。Web 的一切都建立在这一对搭档之上。

📝 在本章的位置

上游：网络 4.2 · HTML 与 4.5/4.6 已把两者各讲过一遍；本篇把它们并成一张全景图，作为第六章的地基。下游：6-3 给骨架穿上 CSS 外衣，6-4 让无状态的 HTTP 记住你是谁，6-7 用 DOM 操纵骨架。

一、HTML：骨架（说有什么）

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，是标记语言——它不写逻辑，只给内容贴标签：

<!DOCTYPE html>              <!-- 声明：这是 HTML5 -->
<html>                       <!-- 根元素 -->
<head>                       <!-- 头部：给浏览器看的元信息 -->
  <meta charset="UTF-8">     <!-- 字符编码（3-9/3-10 的知识在这里落地） -->
  <title>成绩单</title>
</head>
<body>                       <!-- 身体：给用户看的内容 -->
  <h1>期中成绩</h1>           <!-- 一级标题 -->
  <table>                    <!-- 表格 -->
    <tr><td>波仔</td><td>88</td></tr>   <!-- 行 / 单元格 -->
  </table>
  <a href="next.html">下一页</a>        <!-- 超链接：Web 的「超」就来自它 -->
</body>
</html>

三个要点： - 标签成对出现（<h1>...</h1>），内容夹在中间；少数自闭合（<meta>）。 - <a> 的 href 是 Web 的灵魂——点击跳到另一个 URL，把全网连成一张网，「超文本」由此得名。 - 浏览器收到 HTML 后解析并渲染成你看到的页面；HTML 写错了浏览器多半不报错，只是默默按容错规则画出来（调试靠 6-7 的开发者工具）。

二、HTTP：快递（说怎么送）

HTTP（HyperText Transfer Protocol，超文本传输协议）是浏览器和服务器之间一问一答的规矩：

浏览器                                    服务器
  |  ---- GET /index.html HTTP/1.1 ---->  |   ① 请求：要什么
  |                                        |   ② 服务器找文件/跑程序
  |  <--- HTTP/1.1 200 OK ----            |   ③ 响应：给你 + 状态码
  |       Content-Type: text/html         |
  |       <html>...</html>                |

三、HTTPS：快递上了锁

明文 HTTP 的内容在网线上裸奔，任何中间节点都能偷看、篡改。HTTPS ＝ HTTP ＋ TLS 加密层（默认 443 端口，HTTP 是 80）。今天浏览器把纯 HTTP 网站直接标记为「不安全」——2026 年，新网站没有理由不用 HTTPS。

动手 Demo：亲眼看一次 HTTP 对话

# 用 Python 的标准库模拟一次「请求-响应」
from urllib.request import urlopen

resp = urlopen("https://example.com")       # 发 GET 请求
print(resp.status)                           # 200 —— 状态码
print(resp.headers["Content-Type"])          # text/html; charset=UTF-8
html = resp.read().decode("utf-8")
print(html[:60])                             # 正文开头

看到什么算成功：打印出 200、内容类型，以及 HTML 开头一段 <!doctype html>——一次完整的 HTTP 对话尽收眼底。

读结果：urlopen 帮你封装了请求报文的书写与响应报文的解析；换 resp.read() 为任何 URL，你就是在「编程式地刷网页」——爬虫、接口调用的原型都是这一行。

30 秒实验

打开浏览器按 F12 → 切到「网络（Network）」标签 → 刷新任意网页：列表里每个条目就是一次 HTTP 请求。点第一条，能看到完整的方法、状态码、响应头——服务器和你浏览器之间的全部对话就摊在这。

常见误区

自测三问（点击展开） 1. **HTML 和 HTTP 各管什么？** 答：HTML 管内容结构（有什么），HTTP 管传输规则（怎么送）。 2. **为什么说 HTTP 是无状态的？后果是什么？** 答：服务器不记得两次请求之间的关联；后果是登录态、购物车都得靠 6-4 的 Cookie/会话补。 3. **200/404/500 分别什么意思？** 答：成功／资源不存在／服务器内部错误。

相关笔记