在HTML中，小于符号“
小于符号的HTML编码：用法、技巧与注意事项
在HTML开发中，某些字符因其特殊含义而无法直接作为普通文本输入，小于符号“<”尤为关键——它是HTML标签的起始标记（如 `
` 表示段落），若要在页面上直接显示“<”的字符本身（例如数学表达式“x < 5”或代码片段“if (a < b)”），就必须使用其对应的HTML编码（也称为HTML实体或字符引用），本文将深入解析小于符号的HTML编码形式、典型应用场景及最佳实践，帮助开发者有效规避常见陷阱,确保页面内容正确呈现。
为何必须对小于符号进行HTML编码？
HTML的核心在于其标记语言特性，特定符号如 `<`、`>`、`&` 被用于定义标签结构和特殊功能，浏览器在解析HTML文档时，会优先识别这些符号，当遇到“<”时，它会默认开启标签解析模式，若文本中直接包含“<”且未被编码，浏览器会尝试将其解释为某个标签的开始（将“x < 5”中的“<”误认为标签起始）,这可能导致：
- **解析错误**：浏览器可能找不到对应的闭合标签,抛出解析警告。
- **页面结构破坏**：后续文本可能被错误地解析为标签属性或内容,导致布局混乱或内容丢失。
- **显示异常**：未闭合的标签可能导致内容无法正确渲染。
为解决此问题，HTML规范引入了“字符引用”机制，开发者通过特定的编码序列（如 `<`）代替特殊字符，告知浏览器将其视为普通文本而非标签结构，小于符号的HTML编码正是这一机制的核心应用,是保障页面内容完整性和安全性的基石。
小于符号的HTML编码形式详解
小于符号“<”的HTML编码主要有两种等效形式：**数字实体（Decimal Entity）** 和 **命名实体（Named Entity）**，二者功能一致，但在书写习惯、可读性和适用场景上存在差异。
数字实体（Decimal Entity）
数字实体采用“`&#`” + 字符的十进制Unicode码点 + “`;`”的结构，小于符号“<”的Unicode码点是十进制的 `60`,因此其数字实体编码为：
<
**示例**：要在页面显示数学表达式“5 < 10”,需在HTML源码中写成：
5 < 10
浏览器解析此代码后，会正确渲染为“5 < 10”，数字实体在处理特定编码环境或需要动态生成编码时有一定优势,但其可读性较差。
命名实体（Named Entity）
命名实体采用“`&`” + 字符的语义化名称 + “`;`”的结构，小于符号的命名实体是 `lt`（源自英文“less than”的缩写）,因此编码为：
<
**示例**：同样显示“5 < 10”,使用命名实体的写法为：
5 < 10
这是开发中最常用、最易读的形式，其语义化名称 `lt` 能直观表达“小于”的含义,极大提升了代码的可维护性。
小于符号HTML编码的核心应用场景
理解编码原理后，以下场景必须主动使用 `<` 或 `<` 替代直接输入的“<”,以确保内容正确显示和安全：
数学与逻辑表达式的展示
在展示数学不等式（如“x < 3”）、逻辑比较（如“条件A < 条件B”）时，必须对“<”进行编码。
**错误示例**：`x < 3`
浏览器可能将 `<3` 误认为标签,导致后续内容解析异常或显示为空白。
**正确示例**：`x < 3`
浏览器将其解析为普通文本，正确显示为“x < 3”。
代码片段的展示与转义
在技术文档、教程或博客中展示包含“<”的代码（如HTML标签、JavaScript/Python条件语句、CSS选择器）时，必须对“<”进行编码。
**示例**：展示JavaScript代码 `if (num < 10)` 时,应写成：
if (num < 10)
否则，浏览器会将 ` 当从数据库、用户输入（如评论、表单提交）、API响应或其他不可信来源获取内容，并将其动态渲染到HTML页面时，**必须**对内容中的所有特殊字符（尤其是 `<`、`>`、`&`）进行HTML实体编码，这是防范**跨站脚本攻击（XSS）**的关键措施。 **JavaScript示例（安全渲染）**： **效果**：即使输入包含
标签： #HTML code
的转义（安全防护）
const userComment = "5 < 10 是正确的，但 是恶意的！";
// 使用 DOM API 的 textContent 或设置 innerHTML 前进行转义
const safeComment = userComment.replace(/&/g, '&')
.replace(//g, '>');
document.getElementById("comment").textContent = safeComment; // 推荐：使用 textContent 避免HTML解析
// 或使用库函数：如 DOMPurify.sanitize(userComment)
