html 如何显示尖括号

在HTML中显示尖括号（<和>）需要特殊处理，因为这些符号被浏览器视为标签的组成部分,以下是多种实现方式及其原理分析：

核心问题：为什么需要转义尖括号？

HTML语法中，尖括号用于定义标签（如<div>），若直接在文本中输出<或>，浏览器会将其误认为标签起始或结束符，导致解析错误或内容丢失，直接写入5 < 10可能会被解析为不完整的标签结构,必须通过转义或替代方案确保尖括号以纯文本形式显示。

实现尖括号显示的五种方法

方法1：HTML实体（推荐）

使用<和>是最直接的解决方案，浏览器会将其解析为<和>字符。

<p>使用HTML实体：&lt;div&gt;</p>

原理：<和>是预定义的字符实体，浏览器会将其还原为对应符号。
优势：兼容性好，所有浏览器均支持,且语义清晰。

方法2：Unicode字符

通过数值编码<（对应<）和>（对应>）实现：

<p>使用Unicode：&#60;div&#62;</p>

原理：Unicode字符通过十进制编号表示特殊符号，浏览器解析时会自动转换。
优势：无需记忆实体名称，适合偶尔使用；缺点是可读性较差。

方法3：包裹在<code>或<pre>标签中

将尖括号包裹在代码标签内,可避免解析冲突：

<code>&lt;div&gt;</code>
<pre>    &lt;div&gt;   </pre>

原理：<code>和<pre>标签会禁用HTML解析，保留原始字符。
优势：适合展示代码片段或多行文本，但可能继承标签的默认样式（如等宽字体）。

方法4：CSS结合伪元素

通过CSS的content属性插入转义字符：

<style>
  .arrow::before {
    content: '&lt;'; / 或直接写 '<' /
  }
</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转义”功能批量处理