03文本与链接
网页的身体是文字，血脉是链接。这一章拿下标题、段落、格式化、链接、图片、实体 六类内容标签——它们撑起了页面上 80% 的可见内容。
一、标题：h1 ~ h6
标题不是「调大字号的工具」，而是文档的目录层级： h1 是书名，h2 是章，h3 是节……数字越大级别越低、字号越小。 浏览器、搜索引擎、读屏软件都靠这套层级理解你的页面。
一级标题：页面主标题
二级标题：大板块
三级标题：小节
四级标题
五级标题
六级标题
| 标签 | 角色 | 使用建议 |
|---|---|---|
h1 | 页面主标题 | 全页仅一个（SEO 权重最高） |
h2 | 大板块标题 | 每个板块一个，可反复使用 |
h3 | 小节标题 | h2 内部再细分 |
h4 ~ h6 | 更细的层级 | 少用；层级太深说明结构该拆了 |
二、段落与换行：p、br、hr、pre
<p>（paragraph）装「自然段」，段与段自动留白；
<br> 是「硬回车」，在段内强制换行；<hr>（horizontal rule）
画一条水平分割线；<pre>（preformatted）则是个耿直 boy——
空格、缩进、换行全部原样保留。
| 标签 | 全称 | 作用 | 空格换行 |
|---|---|---|---|
p | paragraph | 自然段，段与段自动留白 | 折叠 |
br | break | 段内硬换行（诗歌、地址） | — |
hr | horizontal rule | 水平分割线 | — |
pre | preformatted | 预格式化，原样保留 | 保留 |
<br> 删掉看两行并一行段落一：p 是最常见的「自然段」，段落之间自动留白。
段落二：一句话没写完就
强制换行，
像诗一样短促。
pre 预格式化：
空格、缩进、换行
全部原样保留
<br><br><br> 撑出空隙——那是 CSS 的 margin 干的活。
br 只该出现在「诗歌、地址」这种确实需要硬换行的地方。三、文本格式化标签
同样是加粗，<b> 只改外观，<strong> 还告诉浏览器
「这段很重要」。先看全家福，再动手试：
| 标签 | 语义 | 默认样式 |
|---|---|---|
b | 无特殊语义，纯吸引注意（关键词、产品名） | 加粗 |
strong | 重要内容（读屏会加重语气） | 加粗 |
i | 无特殊语义（术语、外来语、图标字） | 斜体 |
em | 语气上的强调 | 斜体 |
mark | 引用中需要突出的文字 | 黄底高亮 |
small | 旁注、版权声明等「小字」 | 缩小一号 |
del | 已删除的内容（改价前的旧价） | |
ins | 新插入的内容（改价后的新价） | 下划线 |
sub | 下标（化学式、脚注编号） | H2O |
sup | 上标（幂、引用标记） | 210 |
code | 行内代码片段 | 等宽字体 |
<del> 包住的旧价从 ¥99 改成 ¥49，看删除线同步变化b：加粗｜strong：重要｜ i：斜体｜em：强调｜ mark：高亮｜small：小字
原价 ¥99 特价 ¥59｜水是 H2O｜
210 = 1024｜行内代码 <div>
四、链接：a 标签
HTML 叫「超文本标记语言」，超的就是链接。<a>（anchor，锚）的
href 指向哪里，点一下就飞到哪里——可以飞到别的网站、站内其它页面、
页面某个位置，甚至唤起邮件客户端和拨号盘。
| 属性 | 取值 | 说明 |
|---|---|---|
href | URL / #锚点 / mailto: / tel: / data: | 目标地址，a 的灵魂；没有 href 就只是普通文字 |
target | _blank / _self / _parent / _top | 打开位置；_blank 新标签页，_self 当前页（默认） |
rel | noopener / nofollow 等 | 与目标页的关系；新标签页打开建议配 noopener 更安全 |
title | 任意文字 | 鼠标悬停时的提示气泡 |
download | 文件名（可省略） | 不跳转、直接下载；配合 data: / blob: 地址可离线下载 |
id | 唯一标识 | 自己当锚点，给别人跳 |
title；把第一个 href 改成站内路径看它变成「关于我们」五、页内锚点：id + href="#id"
长页面的「目录」「回到顶部」都靠它：给目标元素一个 id，
链接的 href 写成 #id，点击即滚过去。
href="#" 则永远回到页面最顶端。
在下面的小窗口里滚到底，点「回到顶部」真的会跳：
id="user-avatar"。六、图片：img 标签
<img> 是空元素（没有结束标签），两个属性必须形成肌肉记忆：
src 告诉浏览器图在哪，alt 告诉所有人（以及搜索引擎、读屏软件）图是什么。
| 属性 | 取值 | 说明 |
|---|---|---|
src | URL（必填） | 图片地址，绝对/相对/data: 皆可 |
alt | 文字（必写） | 替代文字：加载失败时显示、读屏朗读、SEO 抓取 |
width / height | 数字（像素，不带单位） | 建议同时写：浏览器提前占位，页面不「跳一下」 |
loading | lazy / eager / auto | lazy＝滚到快看见才加载，长页面省流量 |
↑ 宽高各设一半，图片等比缩小；loading="lazy" 让它懒加载
↑ 图片加载失败时，alt 文字顶上（把 alt 改成别的字试试）
alt=""（空 alt 表示「跳过我」），但绝不能不写。七、字符实体：打出打不出的字符
想显示 <p> 这串字？直接写会被当成标签吃掉；
想敲出连续空格？会被折叠。HTML 的解法是字符实体：
以 & 开头、; 结尾的「暗号」。
| 实体 | 显示为 | 用途 |
|---|---|---|
| 不折叠空格 | 普通空格会折叠，它不会 |
< | < | 小于号，避免被当成标签开头 |
> | > | 大于号 |
& | & | & 本身（写其它实体前先写它） |
" | " | 双引号，属性值里常用 |
© | © | 版权符号 © |
© | © | 数字写法：© 的码点，效果同上 |
：把普通那句里的 4 个空格换成 ，看它不再被压扁<（<）、>（>）、&（&），
其它的用时再查。注意：显示「实体本身」要套两层，如 &nbsp; 显示出 。八、本章小结
- 标题 h1~h6 是目录层级：一个页面一个 h1，不为字号用标题。
- 段落 p 自动留白；br 硬换行、hr 分割线、pre 原样保留空格换行。
- 格式化分两派：b/i 只管化妆，strong/em/mark/del/ins 自带语义。
- 链接 a 靠 href 走天下：绝对、相对、#锚点、mailto:、tel:、download。
- 页内跳转 = 目标加 id + 链接写
#id。 - img 必写 src 与 alt；width/height 提前占位；loading="lazy" 懒加载。
- 连续空格和换行会折叠，特殊字符用实体（ < > & ©）。