2、HTML基础标签：标题标签、段落标签、换行与水平线、文本格式化标签、注释与特殊字符
好，咱们正式开始动手写HTML了。这一节我带你认识最常用、也最基础的一组标签。说白了，这些标签就是网页的「砖块」——标题、段落、换行、格式化文字，还有注释。你把这些搞定了，写一个简单的文章页面完全没问题。
2.1 标题标签：h1 ~ h6
HTML 提供了六级标题，从 <h1> 到 <h6>。数字越小，标题越大，权重也越高。我个人习惯一页只用一次 <h1>，一般放网站名称或文章主标题。
<h1>一级标题：前端三剑客</h1>
<h2>二级标题：HTML 基础</h2>
<h3>三级标题：标题标签</h3>
<h4>四级标题：使用规范</h4>
<h5>五级标题：小字备注</h5>
<h6>六级标题：最细的标题</h6>
⚠️ 避坑指南： 我曾经见过一个项目，整个页面用了七八个
<h1>，结果搜索引擎根本不认。记住：<h1> 是「一篇文章一个主角」，别贪多。
2.2 段落标签：<p>
段落标签 <p> 用来包裹一段文字。浏览器会自动在段落前后加一点间距，让阅读更舒服。你想想看，如果没有段落，所有文字挤在一起，谁看得下去？
<p>这是第一段文字。HTML 中的段落会自动换行。</p>
<p>这是第二段文字。两段之间会有默认的间距。</p>嗯，这里要注意：<p> 里面不能放 <h1> 之类的块级元素。我刚开始学的时候犯过这个错，结果页面布局全乱了。
2.3 换行与水平线
换行标签：<br>
你想在段落中间强制换行？用 <br>。它是一个空标签，没有结束符。我建议只在确实需要换行的地方用，比如写地址、诗歌。
<p>地址：北京市海淀区<br>
中关村大街 1 号<br>
邮编：100000</p>水平线标签：<hr>
<hr> 用来画一条分割线，表示内容主题的切换。比如一篇文章讲完「标题」再讲「段落」，中间可以加一条线。
<h2>第一部分：标题</h2>
<p>标题的内容...</p>
<hr>
<h2>第二部分：段落</h2>
<p>段落的内容...</p>
💡 小技巧： 我在项目中经常用
<hr> 做视觉分隔，但后来发现用 CSS 边框更灵活。不过作为基础标签，<hr> 依然是最快最省事的方案。
2.4 文本格式化标签
这些标签用来改变文字的样子——加粗、斜体、下划线等等。我整理了一张表，你一看就明白。
| 标签 | 作用 | 示例 |
|---|---|---|
<strong> |
加粗（强调语义） | 重要内容 |
<b> |
加粗（仅样式） | 粗体文字 |
<em> |
斜体（强调语义） | 强调内容 |
<i> |
斜体（仅样式） | 斜体文字 |
<u> |
下划线 | 带下划线 |
<del> |
删除线 | |
<ins> |
下划线（插入文本） | 新插入 |
<small> |
小号文字 | 小字备注 |
<mark> |
高亮标记 | 高亮 |
<p>这是一段<strong>非常重要</strong>的文字。</p>
<p>我<em>强烈建议</em>你记住这些标签。</p>
<p>原价：<del>￥199</del> 现价：<ins>￥99</ins></p>
🔑 核心原则： 能用
<strong> 就别用 <b>，能用 <em> 就别用 <i>。前者带语义，对搜索引擎和屏幕阅读器更友好。这是我做项目时养成的习惯。
2.5 注释与特殊字符
HTML 注释
注释不会显示在页面上，只存在于源代码中。写注释是个好习惯，尤其是团队协作时。我一般会在每个模块开头加一行注释，说明这块是干嘛的。
<!-- 这是注释，用户看不到 -->
<!-- 导航栏开始 -->
<!-- 注意：这里后续要改成动态数据 -->特殊字符（实体符号）
有些字符在 HTML 里有特殊含义，比如 < 和 > 是标签的组成部分。你想在页面上显示它们，就得用「实体名称」或「实体编号」。
| 显示结果 | 实体名称 | 实体编号 |
|---|---|---|
| < | < |
< |
| > | > |
> |
| & | & |
& |
| " | " |
" |
| © | © |
© |
|
  |
<p>使用 <h1> 标签定义标题。</p>
<p>版权所有 © 2025 前端三剑客课程</p>
<p>多个 空格需要用 实现。</p>
⚠️ 避坑指南： 我曾经在项目中直接写了
< 符号，结果浏览器把它当成标签的开始，页面直接崩了。记住：只要不是标签本身，想在页面上显示尖括号，就必须用实体。
2.6 综合示例：一篇文章的骨架
把今天学的标签串起来，写一个简单的文章页面。你看看，是不是已经有点样子了？
<h1>我的第一篇 HTML 文章</h1>
<hr>
<p>这是文章的<strong>引言</strong>部分。<br>
我在这里写一段开场白。</p>
<h2>第一节：关于标题</h2>
<p>标题有六级，从 <h1> 到 <h6>。</p>
<h2>第二节：关于段落</h2>
<p>段落用 <p> 标签。<br>
换行用 <br>。</p>
<hr>
<p><small>本文发布于 © 2025</small></p>
💡 小技巧： 你可以把这段代码复制到记事本里，保存为
.html 文件，然后用浏览器打开。亲眼看看效果，比光读文章强十倍。
好了，这一节的内容就这些。标题、段落、换行、格式化、注释、特殊字符——你把这些练熟了，写一个简单的网页已经不在话下。下一节我们聊聊列表和链接，到时候你会发现自己能做的更多。