行内代码必须用<code>包裹，多行代码需嵌套在<pre>内；特殊字符<、>、&等须转义；禁用<div>/<span>替代<code>，否则破坏语义与可访问性。
行内代码必须用 <code> 包裹
浏览器不会自动识别哪些是代码，const、fetch()、document.querySelector() 这类内容如果不加标签，就和普通单词一样被渲染，既无语义，也无样式区分。直接写 console.log("hello") 是无效的——必须显式包裹成
<code>console.log("hello")</code></p>
<p>常见错误是把整个代码块（含换行）塞进单个 <code><code> 标签里，结果空格塌缩、换行丢失，变成一行乱码。这是因为 <code> 是行内元素，不保留格式。
- ✅ 正确：用于变量名、函数名、HTML 属性名等短片段，如
<p>用 <code>class属性设置样式</p> - ❌ 错误：在
<code>内写多行 JS 或带缩进的 HTML，例如<code>function foo() {<br> return true;<br>}</code></li> <li>⚠️ 注意：<code><code>里不能直接写<和>，否则会被解析为标签。必须转义为和 <code>>
多行代码必须嵌套在 <pre> 里
要显示一段可读的、带缩进和换行的代码块，光靠 <code> 不够，必须用 <pre> 保留原始排版，再把 <code> 套在里面——这是唯一同时满足语义（告诉浏览器“这是代码”）和格式（保留空格/换行）的做法。
比如展示一个 HTML 片段：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <p>Hello <span>world</span></p> </div>
上面这段能正确显示，是因为它实际结构是 <pre><code>...</code></pre>，不是 <code><pre>...</pre></code>，也不是单独用 <div> 模拟。
- ✅ 必须顺序：外层
<pre>，内层<code>；反过来语义丢失，纯<pre>则缺乏机器可读性 - ⚠️
<pre>默认用等宽字体，但不自带背景或边框，需 CSS 补充background-color和padding才易读 - ⚠️ 如果代码里含
<script>或<style>标签，仍需对<和>转义，<pre>不会跳过 HTML 解析
特殊字符不转义会导致代码截断或解析失败
这是最常被忽略的一环：HTML 解析器在遇到 < 时，会立刻尝试匹配闭合标签。如果你在 <code> 里写 <div> 却没转义，浏览器会以为你开了一个 <div> 标签，后续内容可能被吞掉或错位。
真实报错现象包括：
- 代码只显示前半截，后半部分消失
- 页面布局突然错乱，疑似标签未闭合
- 开发者工具里看到 DOM 树中多出意外的元素节点
所有以下字符都必须转义：
< → ，<code>> → >，& → &，" → "
注意：单引号 ' 在属性值外一般不用转义，但为统一风格，建议全部使用双引号属性并转义所有特殊字符。
不要用 <div> 或 <span> 替代 <code>
有人图省事用 <div class="code"> 模拟代码块，或者给 <span> 加等宽字体假装是代码。这看似能显示，实则破坏语义——搜索引擎、屏幕阅读器、代码分析工具都无法识别这是代码。
后果不只是“看起来差不多”，而是：
- 辅助技术用户听不到“这里是代码”的提示，无法跳过或特殊处理
- SEO 中丢失关键词上下文，比如
useState出现在<div>里，不如出现在<code>里权重高 - 未来集成语法高亮库（如 Prism.js）时，它默认只找
<code>元素，自定义 class 会失效
真正需要定制样式时，应该在 <code> 上加 class，而不是换标签：<code class="js">。
<code> 或忘记转义 <，问题往往藏在渲染结果背后，直到被自动化工具或残障用户暴露出来。 
