上一篇
html 如何写文本
使用 ` 标签包裹文本，或用 ` 内联显示，直接
核心文本容器标签
段落标签 <p>
这是最基础的文本容器,用于包裹自然段，其特点是：
默认带有首尾空白间距（由CSS控制）
自动合并相邻文本节点
不支持内部嵌套其他<p>
<p>这是一个完整的段落，包含多个句子……</p> <p>另一个段落开始于新一行。</p>
▶️ 效果：两段之间有明显间距，即使未手动换行也会保持间隔。
换行标签 <br>
仅实现单次强制换行,适用于诗行排列等场景：
床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡
️ 注意：<br>不会产生额外间距，若需调整需配合CSS的margin或padding属性。
水平线 <hr>
生成视觉分隔线,常用于章节划分：
<p>第一部分内容</p> <hr> <p>第二部分内容</p>
可通过CSS修改颜色、高度和对齐方式。
文本格式化标签
| 功能描述 | 语义强度 | 替代方案 | |
|---|---|---|---|
| <strong> | （加粗显示） | 高 | CSS font-weight |
| <em> | （斜体显示） | 高 | CSS font-style |
| <b> | 纯视觉加粗（无语义） | 低 | 同上 |
| <i> | 纯视觉斜体（无语义） | 低 | 同上 |
| <sup> | 上标（如数学公式指数） | 专一 | Unicode字符 |
| <sub> | 下标（如化学分子式） | 专一 | Unicode字符 |
| <del> | 删除线（表示移除内容） | 明确 | CSS text-decoration |
| <ins> | 插入线（表示新增内容） | 明确 | CSS text-decoration |
最佳实践：优先使用语义化标签（如<strong>而非<b>），既提升可访问性又利于SEO优化。
特殊字符处理
某些符号无法直接键盘输入,需采用实体编码：
| 符号 | 实体编码 | 用途 |
|------------|--------------|----------------------|
| & | & | 避免解析为标签起始符 |
| < | < | 显示小于号 |
| > | > | 显示大于号 |
| " | " | 显示双引号 |
| ' | ' | 显示单引号 |
| © | © | 版权符号 |
| ® | ® | 注册商标符号 |
| 空格 | | 不折叠的空格 |
示例：
<p>价格范围：￥<strong>50</strong>～￥<strong>100</strong></p> <p>爱因斯坦质能方程：E = mc<sup>2</sup></p> <p>已删除项目：<del>旧方案</del> → <ins>新方案</ins></p>
文本流控制技巧
长文本折行处理
默认情况下,文本会在容器边界自动换行，若需禁止换行：
<div style="white-space: nowrap;">这段文字不会自动换行，超出容器宽度会出现水平滚动条</div>
常用值说明：
- normal：默认行为（自动换行）
- nowrap：禁止换行
- pre-wrap：保留空白符并允许换行
- pre-line：压缩连续空白为单个空格，允许换行
预格式化文本 <pre>
保留所有空白字符（包括空格、缩进、换行），适合展示代码块：
<pre> function greet() { console.log("Hello World!"); } </pre>
配合<code>标签可高亮语法：
<pre><code class="language-javascript">// JavaScript代码</code></pre>
引用与标注
短引用 <cite>
标记引用来源,通常以斜体显示：
爱因斯坦提出相对论<cite>《论动体的电动力学》</cite>。
术语定义 <dfn> + <abbr>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 是网页的基础语言。
鼠标悬停时会显示完整术语。
典型错误规避
错误嵌套：
<p><p>错误示范</p></p> <!-不允许嵌套同级p标签 -->
正确做法：改用<div>或<span>包裹内层内容。
滥用<br>代替段落：
<!-反例 --> 第一句<br>第二句<br>第三句 <!-应改为三个独立p标签 -->
综合应用表格示例
| 需求场景 | HTML代码 | 渲染效果 |
|------------------------|-----------------------------------|------------------------------|段落 | <p>这里是正文内容...</p> | 带间距的段落块 |
| 诗句分行显示 | 每句后加<br> | 保持诗句结构 |
| 显示原始代码 | <pre>代码内容</pre> | 等宽字体+保留空白 |
| 强调关键参数 | <strong>温度阈值</strong> | 加粗显示 |
| 标注缩写全称 | <abbr title="世界卫生组织">WHO</abbr> | 悬停显示全称 |
| 数学公式下标 | H<sub>2</sub>O | H₂O |
| 删除过时条款 | <del>旧规则</del> | 带删除线的文本 |
| 新增补充条款 | <ins>新条款</ins> | 带下划线的文本 |
常见问题解答（FAQs）
Q1: 为什么有时连续多个空格显示不出来？
A: HTML规范规定，普通文本中的连续空白会被压缩为单个空格，解决方案有三种：
- 使用 （非断行空格）替代普通空格；
- 将文本放入<pre>
- 通过CSS设置white-space: pre;保留空白。
Q2: 如何让长URL地址自动换行而不破坏链接？
A: 将URL放在<a>标签内，并添加word-wrap: break-word;样式：
<a href="#" style="word-wrap: break-word;">https://www.example.com/very-long-url-path-that-needs-wrapping</a>
这种方式既能保持超链接功能,又能适应容器宽度自动换
