常用文本标签

这是什么：文本标签 = 专门用来排版文字的标签，标题用 <h1>~<h6>、段落用 <p>、强调用 <strong> 和 <em>。

为什么用：网页 80% 的内容是文字，这一章学排版文字的常用标签——不用它们，页面就是一堆没有层次的大白话。

如何用：从六级标题开始，在页面里直接改、点「▶ 运行」就能看效果，标题字号随数字变小。

标题：<h1> 到 <h6>

六级标题，<h1> 最大最重要，<h6> 最小：

<h1>一级标题（页面主标题，一个页面最好只用一个）</h1>
<h2>二级标题（大章节）</h2>
<h3>三级标题（小节）</h3>
<h6>六级标题（几乎没人用）</h6>

段落与换行

<p>这是一个段落。段落之间会自动留出间距。</p>
<p>这是第二个段落。</p>

注意：HTML 源码里按回车换行，页面上不会换行！换行要用专门的标签：

<p>第一行<br>第二行</p>

强调：加粗与斜体

<strong>重要的内容（加粗）</strong>
<em>强调的语气（斜体）</em>

水平分割线

<hr>

❓ 常见问题

Q1：源码里明明按了回车分了行，页面上却挤成一行？

红烧茄子 清蒸鲈鱼 蛋炒饭 ←—— 三个菜名挤成一行，只隔了空格

原因：HTML 的规则是"连续空白（空格、回车、缩进）一律折叠成一个空格"，换行必须用专门的 <br> 标签。 修复三步：① 找到需要断行的位置；② 在断行处插入 <br>；③ 刷新确认每行各归各位。 举一反三：以后别用空格和回车排版——它们在 HTML 里只是"一个空格"的音量。

Q2：想要小字就写 <h6>，想要大字就写 <h1>，不行吗？

原因：标题表示的是结构层级（这是大标题、那是小注释），不是字号遥控器；页面恰好"级别越高字越大"只是默认皮肤的赠品。用 h6 写正文小字，搜索引擎和读屏软件会把你的页面大纲读得乱七八糟。 修复三步：① 想清楚这段内容的层级（主标题/章节/小节）；② 按层级选 h1~h3；③ 真想改字号，交给后面要学的 CSS。 举一反三："结构归 HTML，外观归 CSS"是贯穿全课的分赃原则。

Q3：<br> 和 <p> 都能让内容换行，到底用哪个？

原因：<p> 是"另起一段"（语义完整的内容块），<br> 是"段内强制换行"（诗歌、地址这类该分行但不该分段的内容）。满屏 <br> 硬拆段落，就像把一篇文章切成无数便签，结构就散了。 修复三步：① 问自己"这是新段落还是段内换行"；② 新段落用 <p>，段内换行用 <br>；③ 检查别让 <br> 连环接龙。 举一反三：选标签先问语义，再问长相——这也是选所有标签的口诀。

Q4：<strong> 里再套 <em>，闭合顺序有讲究吗？

原因：有！嵌套标签必须先开的后关，像洋葱一层层包。写成 <strong><em>文字</strong></em> 就交叉了，浏览器虽然可能渲染出来，但结构是错的，后面的知识一叠上来就崩。 修复三步：① 从内往外检查每个标签的关闭顺序；② 保证"后开先关"；③ 刷新验证加粗斜体效果正常。 举一反三：所有标签嵌套都适用这条，现在养成习惯，以后写复杂结构不返工。

⚠️ 新手翻车现场

翻车一：靠回车排版，菜名挤成一坨

<h1>今日菜单</h1>
红烧茄子
清蒸鲈鱼
蛋炒饭

翻车现象：

今日菜单
红烧茄子 清蒸鲈鱼 蛋炒饭 ←—— 三个菜名挤成一行，只隔了空格

逐行分析：第 2~4 行是没穿标签的裸文字，浏览器把它们当一整段；源码里的两个回车被"空白折叠"规则压成两个空格，绝不会替你换行。教训：想换行，要么拆段落用 <p>，要么段内断行用 <br>。正确写法：

<h1>今日菜单</h1>
<p>红烧茄子</p>
<p>清蒸鲈鱼</p>
<p>蛋炒饭</p>

翻车二：标题当字号用，大纲跳级

<h1>青蛙编程网</h1>
<h5>HTML 教程</h5>
<h2>本章小结</h2>

翻车现象：

页面看着还行（大、小、中三行字）；
但目录结构是 1 → 5 → 2，搜索引擎和读屏软件直接读晕。

逐行分析：第 2 行是想让"HTML 教程"显得小一点，随手抓了 <h5>——但它明明是二级章节，级别却一下子跳到五级，中间隔了四级空档；第 3 行又跳回二级。标题选级别只看内容层级，大小是 CSS 的事。正确写法：

<h1>青蛙编程网</h1>
<h2>HTML 教程</h2>
<h3>本章小结</h3>

📦 完整小示例

用本章六种标签写一首能上页面的诗，存成 poem.html：

<h1>呱小吉的三行情诗</h1>
<p>荷叶是我的稿纸，<br>露珠是我的标点，<br>呱声是我的韵脚。</p>
<hr>
<p>——写在学完文本标签的夜晚，<strong>当天</strong>就<strong>用了 <em>六种</em> 标签</strong>。</p>

人工校验：h1 与两个 p 均开闭配对；<br>、<hr> 是空标签无需闭合；第 4 行 strong 套 em 按"先开后关"顺序闭合，嵌套合法。

运行后在浏览器会看到：

一行特大标题「呱小吉的三行情诗」；
下面三行诗各占一行（虽然源码写在同一个段落里）；
一条横贯页面的灰色细线；
线下一行文字：「当天」「用了 六种 标签」加粗，其中「六种」还是斜体。

逐段中文精讲

• 第 1 行：<h1> 全页唯一的大标题，点题。
• 第 2 行：整首诗装在一个 <p> 段落里，靠两个 <br> 切成三行——诗行属于"段内换行"，正是 br 的主场。
• 第 3 行：<hr> 画一条水平线，把作品和落款隔开；空标签，不需要闭合。
• 第 4 行：落款里 <strong> 套 <em> 的嵌套示范——先开的标签后关，像洋葱一层层包；加粗里再斜体，两层效果叠加。

跑通后做个小实验：把第 2 行的两个 <br> 删掉再刷新——三行诗挤成一行。这就是"回车不换行"的现身说法。

🎯 什么时候用它

• 写博客文章：文章标题 h1、章节 h2、正文 p、关键结论 strong，一篇结构清晰的博文这四样就够了。
• 排版诗歌、歌词、地址：内容"看起来该分行但不算新段落"时用 br，别用一串 p 硬拆。
• 给长页面分区：话题切换处放一条 hr，给读者的眼睛一个"到此为止"的信号。

📝 本章小结

• 标题六级 h1→h6，数字越大字越小；选级别看结构不看字号，h1 一页最好只有一个。
• p 是段落；源码回车不换行，段内换行用 br。
• strong 加粗表重要，em 斜体表语气；嵌套标签先开后关。
• hr 画分割线，它和 br 一样是空标签，不用闭合。
• 记忆锚点：标题像楼层牌——h1 是大楼名，h2 是楼层，h3 是房间；从 1 楼直跳 5 楼，访客（搜索引擎）会迷路。

小练习

写一段自我介绍：一个 <h2> 名字、两个 <p> 段落（其中用 <br> 换行）、一个 <strong> 强调你的爱好。

下一章：链接与图片，让网页通起来 🐸