HTML中显示代码需转义特殊字符：<→、"→"；用<pre><code>组合并手动转义内容，或JS用textContent插入；粘贴代码须防中文标点、零宽字符等破绽。
HTML里怎么正确显示<script>这类代码字符
直接写会触发浏览器解析，导致页面错乱或脚本意外执行。必须把尖括号、引号等转义成 HTML 实体。
-
<要写成，<code>>写成> -
"（双引号）写成"，单引号一般不用转，但放title或属性值里建议用' - 如果只是想“展示一段 HTML”，别用
<div>包着就完事——得确保里面所有特殊字符都已转义
比如想显示 <img src="x.jpg">，实际得写：
@@##@@
用<pre>和<code>组合显示代码块的硬性要求
这两个标签本身不自动转义内容，只是加样式和保留空格。很多人以为套上就安全，结果代码还是跑了。
- 必须手动对内容做 HTML 实体转义，或用 JS 动态插入前先
textContent赋值（绕过解析） -
<pre><code>...</code></pre>是语义最佳组合：<pre>保格式，<code>表明这是计算机代码 - 别只用
<code>包多行代码——它默认是行内元素，换行、缩进全丢
复制粘贴代码时常见的 3 种破绽
从编辑器或文档直接粘贴到 HTML 文件里，几乎必出问题。
立即学习“前端免费学习笔记（深入）”；
- 中文标点混入：比如把英文引号
"粘成中文全角“”，浏览器直接报错或静默失败 - 看不见的 Unicode 字符：Word 或某些 Markdown 编辑器会塞入零宽空格（
）、软连字符（‐），导致 JS 报Unexpected token - 缩进用的是 Tab 但 CSS 没设
tab-size，在不同浏览器里显示宽度不一致
验证方法：把疑似有问题的代码段粘到 VS Code 里，打开「显示不可见字符」，一眼就能揪出异常符号。
要不要用<textarea>或第三方高亮库
纯静态展示小段代码，手写转义 + <pre><code> 最轻量；一旦要支持语言识别、行号、复制按钮，就得权衡成本。
-
<textarea readonly>是最偷懒的“防解析”方案，但样式难控、无法高亮、SEO 不友好 - 用
highlight.js或Prism.js前，确认你真需要语法高亮——很多内部文档根本没人看颜色，反而多加载 50KB JS - 如果代码来自用户输入（比如评论区贴代码），服务端必须转义，不能只靠前端 JS 补救，否则 XSS 风险实打实存在
真正容易被忽略的点：转义不是一次性的。如果你用模板引擎（如 Jinja、EJS）渲染，得看清它是默认转义还是默认不转——有的只转变量，不转 {{ raw_html }} 这种标记，一漏就是漏洞。
