一、先把名字拆开：HTML 是什么

HTML = Hyper Text Markup Language = 超文本标记语言。

这四个词，每一个都有用：

二、标签：HTML 的全部家当

标签（tag）长这样：

<p>这是一段文字</p>
│            │
开标签      闭标签（多个斜杠）

三条规则：

1. 成对出现：开头 <p>、结尾 </p>，中间夹着内容
2. 可以带属性：<a href="https://example.com">点我</a>——href 是属性名，引号里是值。属性写在开标签里
3. 空元素不成对：<img src="logo.png" alt="图片">、<br>、<meta>——它们不包内容，只交代一件事

标签名大小写不敏感（<P> 和 <p> 效果一样），但大家都写小写，这是习惯也是规范。

一个网页的标准骨架（图一）

任何一个网页，剥到最外面都是这个架子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一张网页</title>
</head>
<body>
  这里放人看得见的内容
</body>
</html>

逐行说清：

（对应上面第一张图）

常用标签清单（够写一个网站首页了）

记忆窍门：标签名基本都是英文的缩写——p = paragraph（段落），h = heading（标题），img = image，a = anchor（锚点，链接的原名）。

三、超链接：Web 之所以是"网"

<a href="https://www.example.com">点我去看看别的地方</a>

这个小小的 <a> 标签，是整件事的起点：

链接有几种写法，都脱不开 4.1 拆过的那五段 URL：

四、图片是"引用"不是"嵌入"

这一点和 4.1 的"上百次请求"直接对上：

<img src="images/logo.png" alt="公司标志">

HTML 文件里没有图片本身，只有一行"图片在哪"的地址。 浏览器读到这行，再单独发一次请求去把图取回来。

所以一个页面里的每一个 <img>、每一个 <link> 引用的 CSS，都等于一次新的请求：

这就是 4.1 说的"一次打开网页 = 几十上百次请求"的具体来源——不是网络玄学，是文件本来就这么多。

五、标签嵌套 → 一棵树

标签是一层套一层的：<html> 里装 <head> 和 <body>，<body> 里装标题和段落。这种嵌套不能交叉：

<p><a href="#">点我</p></a>     ← 错（交叉了，像两只手胡乱扣）
<p><a href="#">点我</a></p>     ← 对

浏览器读完这些嵌套，会把它组织成一棵树——这棵树叫 DOM 树（文档对象模型）。

（对应上面第二张图）

六、结构与表现分离

4.1 说网页有四件：HTML 骨架 / CSS 装修 / JS 水电 / 图片家具。本节负责骨架，但必须说清分工边界：

这个分工是刻意设计的，不是巧合。反例最能说明问题——早年（现在也偶尔见到）有人这样写：

<font color="red" size="5">大标题</font>
<center>这一段居中</center>

这种写法已经被淘汰了，原因是：

引用 CSS 有两种位置：<link> 引进外部文件（推荐，能复用、能被浏览器缓存）、或 <style> 直接写在页面里（临时测试用）。

七、动手 Demo39：手写你的第一张网页

1. 建文件夹、建文件 新建一个文件夹（比如 mysite），在里面新建文本文件，命名为 index.html。 （index 是惯例上的"首页文件名"——服务器收到"访问根目录"的请求时，默认就找它。）

2. 把这段抄进去（手抄一遍比复制有用，标签的写法会自然记住）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一张网页</title>
</head>
<body>
  <h1>你好，这是我的网页</h1>
  <p>这是第一段文字。</p>
  <a href="https://www.example.com">点我去看看别的地方</a>
</body>
</html>

3. 存盘时编码选 UTF-8（记事本右下角 / 另存为对话框里选）。这是防中文乱码的关键一步——文件存的编码必须和 charset 说的一致。

4. 双击打开——浏览器里出页面了。看地址栏：开头是 file://（收 4.1：本地直读硬盘，没走网络）。

5. 现在把它"上线"（收 4.1 的 Demo38 第 3 步）

cd mysite
python -m http.server 8000

浏览器打开 http://localhost:8000 —— 这一次走的是真的 HTTP：请求进了门房、门房找到 index.html、发回响应。盯着那个命令行窗口，刷新一次就多一行日志。

6. 打开 F12 看那棵树（本节图二的实证） F12 → 元素（Elements） 面板 → 展开那个 html 小三角。 你会看到和第五节那张树一模一样的结构（html → head/body → h1/p/a）。 再点几下 <body>、<h1>，右侧会显示它的样式——"树上哪个节点、用了什么样式"一目了然，这就是排障的主战场。

7. 30 秒实验：三件小事 ① 在元素面板里双击 <h1> 里的文字改一改——页面上立刻变，但硬盘上的文件没变（刷新就恢复了）。这验证了"脚本/工具改的是树，不是文件"。 ② 把 charset 改成 GBK 存盘、刷新 —— 中文乱码。改回 UTF-8 恢复正常。 ③ 把 <h1> 改成 <h6>、把 <a> 的 href 换成一个不存在的地址 —— 体会标签决定"这是什么"，浏览器决定"长什么样"。

八、常见误区

1. ❌ "HTML 是编程语言" → 是标记语言：没有变量、判断、循环，不执行逻辑，只描述"这是什么"；贴标签不改变内容
2. ❌ "标签写错页面就废了" → 浏览器极其宽容，会自动猜着补上照样显示；但错误不会报给你，所以结构问题只能靠 F12 的元素面板自己看
3. ❌ "图片是嵌在 HTML 文件里的" → 图片是引用（<img> 只写了地址），所以每张图都是单独一次请求（收 4.1）
4. ❌ "用 <font>、<center> 调样式挺方便" → 那些早淘汰了：样式归 CSS，HTML 只管内容和结构——分离才能"改一处、全站生效"
5. ❌ "改了 HTML 刷新却没变" → 多半是浏览器缓存（收 4.1 的缓存命中）；用 Ctrl + F5 强制刷新
6. ❌ "文件后缀无所谓，.txt 也一样" → 真正起作用的是服务器给的 Content-Type（text/html）；但很多服务器按后缀判断，所以后缀要写对
7. ❌ "中文乱码是浏览器的问题" → 是 charset 声明和文件实际编码不一致。记一条铁律：文件存 UTF-8，页面写 <meta charset="UTF-8">
8. ❌ "HTML 写完了，屏幕上就该长那样" → 中间隔着浏览器：HTML 是原料，绘制是浏览器干的（收 4.1）；样式丢了 HTML 还在，这就是分离的好处

九、动手自测

十、下一步学什么

• ☑ 4.3 设计Web网页的外观（样式表） —— 下一节：设计Web网页的外观（样式表）。本节把"内容文件"拆到了标签层，也撂下一句"<font color> 那套淘汰了"；下一节来履行那句话——"表现"到底写在哪、怎么写。

相关笔记

• Web网站是如何构建的（Web网站） —— 上一节：网站四件套；本节接手其中的"内容文件"，拆到标签层
• 通信过程中所使用的语言（网络架构） —— 应用层这一格终于看到实物了：HTTP 传的就是这些 HTML 文本
• 根据端口号分配数据到应用程序（端口号、已知端口号） —— 门房守着 80 / 443；localhost:8000 里的 8000 就是自己手工指定的端口
• 网络的网络（互联网） —— "互联网 ≠ WWW" 的旧账：本节用 <a> 超链接把 WWW 的"网"字说清了
• 网络的电话簿（域名解析、主机名、DNS） —— 缓存老账：改了 HTML 刷新没变，是浏览器缓存而不是服务器的问题
• 用TCP对数据进行分割处理（序列号、ACK号） —— 一个 HTML 文本文件在传输层是怎么被切成段、再拼回来的
• 运行和管理服务器（服务器、云服务、内部部署） —— python -m http.server 的原始出处；本节把它当"门房日志"来看