code标签不转义html，需手动将尖括号等字符实体化；多行代码应嵌套在pre中以保留格式；禁用code内可执行属性，样式须通过css控制，转义应在html输出最后一环完成。
code 标签本身不转义 HTML，必须手动处理尖括号
code 标签只是语义化容器，它不会自动把 <img> 这类内容转成纯文本；浏览器仍会尝试解析其中的标签。如果你直接往 code 里塞未转义的 HTML 片段，比如：
@@##@@，页面上可能空白、报错，甚至触发 XSS（尤其在用户输入未过滤场景中）。
实操建议：
- 所有要显示为“代码文本”的 HTML 内容，必须先对
和 <code>>做实体转义：用替换 <code>，<code>>替换> - 如果内容含双引号（如
alt="logo"），也建议转义为"，避免破坏属性结构 - 若内容来自用户输入或 CMS 字段，务必在服务端或前端渲染前统一执行转义，不要依赖
code自动防护
搭配 pre 使用是 Web 安全教程的标准写法
单独用 code 只能包裹行内代码片段，无法保留缩进和换行——这对展示多行 HTML 结构（如嵌套标签、属性分行）极不友好。安全教程中常见示例（如 XSS payload 演示）必须原样呈现格式，否则语义丢失。
实操建议：
- 多行 HTML 示例一律用
pre包裹code：<div class="user"><script>alert(1)</script></div>
-
pre保证空格、换行、缩进被浏览器原样保留，这是可读性的基础 - 配合 CSS 设置
font-family: monospace和white-space: pre（默认已有），避免字体混用导致字符错位
避免在 code 中混用 HTML 属性或事件处理器
有些教程为了“高亮”或“交互演示”，会在 code 标签里加 onclick、onerror 等属性，例如：<img src="x">。这在教学演示时看似直观，但存在两个风险：一是若该 code 块被错误地插入到 innerHTML 中，可能意外执行；二是混淆“展示代码”和“运行代码”的边界，降低学员对上下文隔离的敏感度。
实操建议：
- 所有用于教学的 payload 示例，只保留最小必要结构，不添加可执行属性（除非明确说明“这是被注入后的结果”，而非“你该这么写”）
- 若需模拟攻击效果，用注释说明代替实际属性：
<img onerror="alert(1)"><!-- XSS 触发点 --> - 禁用
code的contenteditable或动态innerHTML注入，防止演示页自身成为测试靶子
语义正确比样式炫酷更重要
安全教程的读者常处于快速扫描状态，他们需要一眼区分“这是讲解文字”“这是可复制代码”“这是执行结果”。滥用 font、span 或自定义 class 包裹 code，反而干扰识别节奏。比如用红色 font color="red" 标出关键词，不如用 code + CSS 类（如 .keyword）精准控制。
实操建议：
- 保持
code内容纯文本，所有样式通过外部 CSS 控制（如code .tag { color: #007acc; }） - 不使用
font标签修饰code内容——它已过时，且与语义冲突 - 复杂结构（如带高亮的 HTML 树）优先用静态截图或预渲染 SVG，而非 JS 动态着色，减少执行面
真正容易被忽略的，是转义时机：很多开发者在模板中拼接字符串时才做转义，但若数据流经过多个中间层（如 Markdown 解析器、CMS 富文本字段），很可能在某一层被二次解析。最稳妥的做法，是在数据进入 HTML 输出管道的**最后一环**做转义，且只做一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
