行内代码必须用 ，不能用 ； 语义正确、等宽渲染、不破坏行高，而 是块级元素且易导致溢出和对齐问题。
行内代码必须用 ，不能塞进 <pre class="brush:php;toolbar:false;">
段落里提一个函数、命令或变量时， 是唯一语义正确的选择。比如写“调用 <code>fetch() 时需传入 <code>AbortSignal”，浏览器会以等宽字体渲染，且不撑开上下行距。
-
fetch()✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数” -
fetch()
❌ 错误：是块级元素，自带 margin，塞进段落会破坏行高和视觉连贯性
- 别给
加 <code>white-space: pre：长命令会横向溢出，且基线对不齐 - 漏转义
或 <code>>（如写x ）→ 浏览器尝试解析标签，结构错乱
多行代码必须用 组合，单用任一都不行
负责保留换行缩进，<pre class="brush:php;toolbar:false;"> 负责声明“这是代码”，二者缺一不可。只用 <pre class="brush:php;toolbar:false;">，搜索引擎当普通文本；只用 <code>，所有格式全丢。
<ul>
<li>正确写法：<pre class="brush:php;toolbar:false;"><code>function greet(name) { return `Hello, ${name}!`; }</code>
function greet(name) { return `Hello, ${name}!`; }
function greet(name) { return `Hello, ${name}!`; } → 缺少 ，高亮库无法识别语言，SEO 和读屏器难理解
默认可能横向溢出，建议加 CSS 控制：比如 <code>overflow-x: auto</code>和
tab-size: 2
HTML 字符必须手动转义， 不做这件事
标签只管语义，不管内容安全。写 <code><div> 不等于显示 `<div>`——浏览器真会把它当标签解析，甚至执行里面的 <code><script></script>。
- 必须把原始字符串先转义：
→ <code>，<code>>→>，&→& - 推荐用
textContent替代innerHTML插入：它绕过 HTML 解析器，零风险显示源码 - 如果后续要语法高亮，Prism.js 等库也要求输入已转义的纯文本，否则可能漏着色或引入 XSS 风险
- 别依赖
<pre class="brush:php;toolbar:false;"> 嵌套自动防转义——它只保格式，不碰内容逻辑
样式与可访问性容易被忽略的细节
浏览器默认给 设了 <code>font-family: monospace，但别依赖它。系统字体差异大，屏幕阅读器靠语义判断内容类型，不是靠样式。
- 显式设置字体栈：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace - 避免设过大字号或强对比色，影响可读性
中的内容必须准确简洁，别塞未解释的缩写或冗余符号- 别用
包 UI 文字（如“点击【确定】按钮”），那是 <button> 或 <span> 的职责</span></button>
里，或者忘了转义 `
