🛡? 深入理解 < 和 >：HTML 實體轉義的核心指南 🛡?
在編程和文檔編寫中，< 和 > 符號無處不在，但它們也是引發語法錯誤、安全漏洞和渲染混亂的頭號元兇！🔥 本文將聚焦 <（小于號） 和 >（大于號） 這兩個 HTML 實體，解析它們的核心作用、使用場景及避坑技巧，助你寫出更安全、更健壯的代碼！🚀
一、? 為什么需要轉義 < 和 >？
1. 🚨 符號沖突問題
? HTML/XML 標簽沖突：
< 和 > 是標簽的起始和結束符（如 <div>）。若直接在文本中使用，解析器會誤認為是標簽！
<!-- ? 災難現場 -->
<p>1 < 2</p> <!-- 瀏覽器會嘗試解析 `< 2` 為未閉合標簽！ -->
? 泛型與模板語法沖突：
Java/C# 的泛型（List<String>）、C++ 模板（std::vector<int>）中，未轉義的符號會導致代碼高亮錯亂或編譯錯誤！💥
2. 🔒 安全風險：XSS 攻擊
? 未轉義的 < 和 > 可能被注入惡意腳本：
<!-- 用戶輸入直接顯示 -->
用戶評論：<script>alert("Hacked!")</script> ?
<!-- 頁面會執行此腳本，引發安全漏洞！ -->
二、📜 權威定義：< 和 > 是什么？
| HTML 實體 | 名稱 | Unicode 碼點 | 對應符號 | 用途 |
|---|---|---|---|---|
< | Less Than | U+003C | < | 轉義小于號，避免標簽沖突 |
> | Greater Than | U+003E | > | 轉義大于號，防止意外閉合標簽 |
📌 核心特點：
? 預定義實體：無需記憶復雜編碼，直接通過名稱調用
? 跨平臺兼容：所有現代瀏覽器和渲染引擎均支持
三、🔧 核心使用場景
1. 🌐 在 HTML/XML 中顯示符號
<!-- ? 正確轉義 -->
<p>1 < 2 && 3 > 1</p>
<!-- 渲染結果：1 < 2 && 3 > 1 -->
2. 📄 代碼文檔中的泛型聲明
Java 示例：
`List<String> list = new ArrayList<>();`
渲染效果：`List<String> list = new ArrayList<>();` 🎯
3. 🛡? 防止 XSS 攻擊（前端安全）
// 用戶輸入轉義后顯示
const userInput = "<script>alert('XSS')</script>";
const safeOutput = userInput.replace(/</g, "<").replace(/>/g, ">");
document.body.innerHTML = safeOutput;
// 顯示結果：<script>alert('XSS')</script>（純文本，非可執行代碼）?
4. 💻 命令行幫助文檔
# 轉義后顯示參數用法：
echo "Use --file <filename> to specify input"
# 輸出：Use --file <filename> to specify input 🔧
四、💥 常見錯誤案例 & 修復方案
🚫 錯誤 1：未轉義導致 HTML 結構破壞
<!-- ? 錯誤代碼 -->
<div>if x < 0: print("Negative")</div>
<!-- 瀏覽器可能將 `< 0` 解析為標簽，后續內容渲染錯亂！ -->
? 修復方案：
<div>if x < 0: print("Negative")</div>
🚫 錯誤 2：Markdown 中的意外標簽
```java
List<String> list = new ArrayList<>(); // 某些渲染器會誤解析 `<>` ?
```
? 修復方案：
List<String> list = new ArrayList<>(); ?
五、🚀 擴展知識：其他轉義方式
1. 🔢 數字實體
? < 等價于 < 或 <（十六進制）
? > 等價于 > 或 >
2. ?? 在 JavaScript 中轉義
// 手動轉義
const escaped = str.replace(/</g, '<').replace(/>/g, '>'); // 使用 DOM API 自動轉義（更安全！）
const div = document.createElement('div');
div.textContent = '<script>';
console.log(div.innerHTML); // 輸出 <script> 🛡?
3. ?? 在 React 中的安全渲染
JSX 自動轉義文本內容：
function SafeComponent() { const text = "<span>Hello</span>"; return <div>{text}</div>; // 自動轉義為 <span>Hello</span> ?
}
六、📌 最佳實踐總結
- 始終轉義動態內容：用戶輸入、API 返回數據等必須轉義后再插入 HTML！🛡?
- 代碼文檔優先轉義：在 Markdown、JSDoc、代碼注釋中顯式使用
<和>。📝 - 依賴工具自動處理：
? 前端框架（React/Vue）默認轉義文本內容 ??
? 使用模板引擎（如 Handlebars 的{{escape}}語法）🔧 - 安全審查：通過代碼掃描工具（如 ESLint、SonarQube）檢測未轉義符號！🔍
七、🔍 動手實驗
任務：修復以下 HTML 片段中的錯誤：
<p> Compare values: a < b && c > d ?
</p>
? 參考答案：
<p> Compare values: a < b && c > d ?
</p>
🎯 總結
< 和 > 是開發者必須掌握的“安全密碼”。它們不僅是語法正確的保障，更是防御 XSS 攻擊的第一道防線。下次在代碼中敲下 < 和 > 時，不妨多問一句：我是否需要轉義？
📚 擴展閱讀：
? OWASP XSS 防護手冊 🛡?
? HTML 實體列表（MDN） 📜
🚀 掌握轉義，編寫安全！ 🛡?
💡 你的代碼，值得多一層防護！
🔔 下期預告：如何用正則表達式高效處理特殊符號？訂閱關注，解鎖進階技巧！🎉
