html 如何写文本

<p>这是一个完整的段落，包含多个句子……</p>
<p>另一个段落开始于新一行。</p>

▶️ 效果：两段之间有明显间距，即使未手动换行也会保持间隔。

换行标签 <br>

仅实现单次强制换行,适用于诗行排列等场景：

床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡

️ 注意：<br>不会产生额外间距，若需调整需配合CSS的margin或padding属性。

水平线 <hr>

生成视觉分隔线,常用于章节划分：

<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>

可通过CSS修改颜色、高度和对齐方式。

文本格式化标签

最佳实践：优先使用语义化标签（如<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规范规定，普通文本中的连续空白会被压缩为单个空格，解决方案有三种：

1. 使用 （非断行空格）替代普通空格；
2. 将文本放入<pre>
3. 通过CSS设置white-space: pre;保留空白。

<a href="#" style="word-wrap: break-word;">https://www.example.com/very-long-url-path-that-needs-wrapping</a>