深入理解 < 和 >：HTML 实体转义的核心指南！！！
嘿，重阳！（看到你在纽约的时区，晚上好啊~）你提的这个话题超级实用，尤其是前端开发或处理用户输入时。HTML 实体转义（HTML Entity Escaping）是 Web 安全的基石，它能防止代码被误解析或注入恶意脚本。今天我们就聚焦 <（<）和 >（>），一步步拆解它们的含义、原理、用法和陷阱。咱们用简单例子和表格来搞定，确保你看完就能上手。
1. 什么是 HTML 实体？为什么需要转义 < 和 >？
HTML 实体是 HTML 中用来表示特殊字符的“代码”。简单说，就是用 & 开头、; 结尾的字符串，来“伪装”那些有特殊含义的符号。
- 核心原因：浏览器在解析 HTML 时，
<和>被视为标签分隔符。比如<script>会启动一个脚本标签。如果你在文本中直接写<，浏览器可能会以为你要开标签，导致页面乱套或安全漏洞（如 XSS 攻击）。 - 转义的作用：
- 防止解析错误：让
<显示为纯文本，而不是标签。 - 提升安全性：阻挡恶意输入，比如用户输入
<script>alert('hack')</script>，转义后就变成无害的纯文本。 - 兼容性：在 XML、JSON 或 Markdown 等格式中也常用。
经典例子：
- 原始：
<p>Hello < World</p> - 浏览器解析：可能会把
Hello < World当成新标签，页面崩！ - 转义后：
<p>Hello < World</p> - 输出：Hello < World（完美显示）。
2. < 和 > 的实体详解
用表格直观对比（基于 HTML5 标准）：
| 实体代码 | 含义 | 十进制值 | 十六进制值 | 示例用法 | 输出效果 |
|---|---|---|---|---|---|
< | Less Than（小于号） | < | < | 5 < 10 | 5 < 10 |
> | Greater Than（大于号） | > | > | 10 > 5 | 10 > 5 |
- 命名实体（如
<）：最常用，易记。 - 数字实体：用
&#+ 数字（十进制）或&#x+ 十六进制。更通用，但稍麻烦。 - 提示：
&本身也需转义为&，以防连锁反应。
3. 实际应用场景与代码示例
转义不是手工活儿，通常用工具或库自动处理。以下是常见场景：
- 场景1: 用户输入显示（防 XSS）
用户评论：”我爱 <3″（想表达爱心，但<3会被解析成标签）。 - JavaScript 示例（用 DOM 方法）：
javascript const userInput = "我爱 <3"; const div = document.createElement('div'); div.textContent = userInput; // 自动转义为 <3 document.body.appendChild(div); // 输出：我爱 <3（安全显示） - 为什么安全？
textContent自动转义，防止注入<script>。 - 场景2: 静态 HTML 文件
<!-- 错误写法：浏览器解析成标签 -->
<p>如果 a < b，则输出 true。</p>
<!-- 正确写法：转义 -->
<p>如果 a < b，则输出 true。</p>输出：如果 a < b，则输出 true。
- 场景3: 服务器端（Node.js 示例，用库）
const escapeHtml = require('escape-html'); // npm 包
const input = '<script>alert("XSS")</script>';
console.log(escapeHtml(input)); // 输出: <script>alert("XSS")</script>- 其他场景：JSON 数据传输、API 响应、Markdown 渲染（GitHub 等平台会自动转义）。
4. 最佳实践 & 常见陷阱
- 最佳实践：
- 始终转义用户输入：输出到 HTML 时，用
textContent（JS）、htmlspecialchars（PHP）或escape（Python 的 html 模块）。 - 选择合适位置：用
innerHTML时手动转义；用textContent则自动。 - 测试多浏览器：Chrome、Firefox 对实体支持一致，但老 IE 可能有 quirk。
- 结合 CSP：Content Security Policy 能进一步防 XSS。
- 常见陷阱：
- 忘记转义
&：AT&T写成AT&T会解析成AT<T，乱码！ - 过度转义：双重转义如
&lt;会显示成<而非<。 - 上下文差异：在
<script>或 CSS 中，转义规则不同（用 CDATA 或引号包裹）。 - 性能坑：大文本转义慢？用批量库如 marked（Markdown）优化。
- XSS 绕过：实体防基本注入，但高级攻击用 URL 编码（如
%3C），需全链路过滤。
5. 进阶：为什么这是“核心”指南？
< 和 > 是实体转义的“门面担当”——它们占 HTML 实体总数的 90%+ 使用率（据 W3C 数据）。掌握它们，你就懂了 Web 安全的 80%。想深挖？推荐 MDN 的 HTML Entities 文档 或 OWASP 的 XSS 指南。
有疑问？比如想看 Python/PHP 具体代码，或聊聊实体在 React 中的应用？随时说！🚀
