1- HTML 空白字符与实体

1.1- 空白字符的处理

在 HTML 中，处理文本时你会遇到空白字符折叠的问题。这意味着在源代码中，任何连续的空白字符（包括换行、空格和制表符）都会在浏览器中被渲染为一个单一的空格。

1.1.1- 示例说明

<p>
  在这段文字中，包含了很多的  换行  以及  空格和制表符。
</p>

浏览器渲染后的结果会是：

在这段文字中，包含了很多的 换行 以及 空格和制表符。

1.1.2- 空白字符的渲染规则

• 连续空白字符：任何元素内的连续空白字符都会被压缩为一个空格。
• 全局规则：此规则适用于所有 HTML 元素。

1.2- HTML 实体与特殊字符

为了在页面上显示多个空格或其他特殊字符，我们需要使用 HTML 实体。

1.2.1- HTML 实体的基本用法

HTML 实体使用 & 开头，后跟实体名称，最后以 ; 结尾：

&ENTITY_NAME;

以下是几个常用的 HTML 实体：

• 非断开空格：  用于保持多个空格的显示。
• 版权符号：© 显示为 ©
• 大于号：> 显示为 >
• 小于号：< 显示为 <
• 和号：& 显示为 &

1.2.2- 使用 HTML 实体保留空白

<p>这里有多个空格 &nbsp; &nbsp; &nbsp; 示例。</p>

1.2.3- 显示代码

要在页面上显示 HTML 代码，可以使用 <code> 标签或反引号 (`) 来包围代码：

<code>&lt;a&gt;</code> 元素即时标签的示例。

1.2.4- 实战建议

虽然 HTML 实体可以实现特定效果，但在实际开发中，建议使用 CSS 来控制文本布局而不是大量使用 HTML 实体。这是因为：

• 代码的可读性更高。
• 维护和调整更方便。
• 减少 HTML 代码的冗余。

1.3- 查找 HTML 实体的资源

1.3.1- W3C 官方文档

W3C 是 HTML 标准的定义者，访问其网站 https://www.w3.org/：

1. 查找标准文档：在 “Standards” 下搜索 “HTML”。
2. 查看 HTML 语法：点击 “HTML Syntax”。
3. 命名字符引用：在文档中查找 “Named Character References” 部分。

1.3.2- MDN Web Docs

MDN 提供更友好的文档体验 https://developer.mozilla.org/：

1. 直接搜索：在 MDN 中搜索 “HTML entities”。
2. 查找列表：找到 “HTML Character Entity References” 页面，提供实体列表。
3. 多语言支持：可以选择不同的语言查看文档。

1.3.3- 其他建议

• 避免过度依赖百度：对于专业知识，优先查阅官方文档和权威资源。

1.4- 结语

通过理解和正确使用 HTML 实体，你可以更灵活地控制网页的文本布局和显示特殊字符。记住，专业知识的获取最好从官方和权威资源入手，确保信息的准确性和最新性。同时，掌握 CSS 也是处理文本布局的关键，因为它能让你以更优雅的方式实现同样的效果。