在HTML中显示尖括号（<和>）需要特殊处理，因为这些符号被浏览器视为标签的组成部分,以下是多种实现方式及其原理分析：
核心问题：为什么需要转义尖括号？
HTML语法中，尖括号用于定义标签（如<div>），若直接在文本中输出<或>，浏览器会将其误认为标签起始或结束符，导致解析错误或内容丢失，直接写入5 < 10可能会被解析为不完整的标签结构,必须通过转义或替代方案确保尖括号以纯文本形式显示。
实现尖括号显示的五种方法
| 方法 | 示例代码 | 渲染结果 | 适用场景 |
|---|---|---|---|
| HTML实体 | <div> |
<div> |
所有需要纯文本显示的场景 |
| Unicode字符 | <div> |
<div> |
兼容低版本浏览器或简化输入 |
| 代码标签 | <code><div></code> |
<div> |
技术文档或代码片段展示 |
| CSS转义 | content: '<'; |
< |
配合伪元素使用 |
| JavaScript动态插入 | document.write('<'); |
< |
动态生成内容时 |
方法1：HTML实体（推荐）
使用<和>是最直接的解决方案，浏览器会将其解析为<和>字符。
<p>使用HTML实体：<div></p>
原理：<和>是预定义的字符实体，浏览器会将其还原为对应符号。
优势：兼容性好，所有浏览器均支持,且语义清晰。
方法2：Unicode字符
通过数值编码<（对应<）和>（对应>）实现：
<p>使用Unicode：<div></p>
原理：Unicode字符通过十进制编号表示特殊符号，浏览器解析时会自动转换。
优势：无需记忆实体名称，适合偶尔使用；缺点是可读性较差。
方法3：包裹在<code>或<pre>标签中
将尖括号包裹在代码标签内,可避免解析冲突：
<code><div></code> <pre> <div> </pre>
原理：<code>和<pre>标签会禁用HTML解析，保留原始字符。
优势：适合展示代码片段或多行文本，但可能继承标签的默认样式（如等宽字体）。
方法4：CSS结合伪元素
通过CSS的content属性插入转义字符：
<style>
.arrow::before {
content: '<'; / 或直接写 '<' /
}
</style>
<p class="arrow">div></p>
原理：利用CSS的content属性生成内容，需配合转义字符或实体。
优势：灵活控制符号位置,但仅限单个字符插入。
方法5：JavaScript动态插入
通过脚本动态添加尖括号,避免手动转义：
<script> document.body.innerHTML += '<p>' + '<' + 'div></p>'; </script>
原理：JavaScript字符串中的尖括号不会被HTML解析器处理，需通过innerHTML或textContent插入。
优势：适合动态生成内容,但需注意XSS安全风险。
扩展知识：其他特殊字符的转义
除了尖括号，HTML中还需转义以下常见字符：
| 字符 | 实体 | 用途 |
|———-|———–|——————————|
| & | & | 防止解析为实体前缀 |
| | " | 属性值中包含双引号时使用 |
| | ' | 属性值中包含单引号时使用 |
FAQs
问题1：为什么直接写<或>会导致页面错误？
答：浏览器将<识别为标签起始符，若后续内容不符合标签规则（如缺少>），则会中断解析或触发修复机制。<p>5 < 10</p>可能被解析为<p>5 小于10</p>,导致逻辑错误。
问题2：如何一次性转义多个符号？
答：可通过全局替换或使用工具转换，将<script>转为<script>，或使用代码编辑器的“HTML转义”功能批量处理
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/74065.html
