code标签不能单独展示多行代码，必须与pre嵌套使用；单行技术名词用code，多行带缩进的代码块必须用pre+code组合，这是由语义、可访问性和格式保留共同决定的硬性结构。
直接说结论：code 标签不能单独展示多行代码，必须和 pre 嵌套使用；单行技术名词用 code，多行带缩进的代码块必须用 precode 组合——这是语义、可访问性、格式保留三者共同决定的硬性结构。
什么时候该用 code，而不是 precode
只在句子中提一个短小、上下文明确的技术词时用 code：
-
fetch()、useState()、os.path.join()、npm install、/etc/hosts - 它默认是行内元素，不换行、不保留空格或缩进，嵌在段落里刚好自然
- 别把它当容器：塞进函数体、JSON 片段、HTML 标签字符串，都会塌成一行，且屏幕阅读器会误读为“一个变量名”
- 写
if (x 是 OK 的，但 <code>if (x 就错——后者含换行和逻辑结构，必须进 <code>precode
precode 组合为什么不能拆开用
pre 负责保留换行、空格、缩进；code 负责声明“这是计算机代码”，二者职责不可替代：
- 只用
pre：浏览器渲染格式正确，但语义缺失——屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码”；SEO 无法识别语言类型 - 只用
code：所有换行符被压缩，缩进全丢，function hello() { console.log('hi'); }渲染出来就是function hello() { console.log('hi'); } - 正确写法必须是：
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，class属性非必需，但加了能对接 Prism.js 等高亮库 - 漏闭合任意一个标签（比如忘写
或），会导致后续 HTML 结构错乱，甚至页面部分不渲染
HTML 特殊字符转义是强制动作，不是可选项
只要内容里出现 、<code>>、&，就必须手动转义，否则浏览器先解析结构再渲染内容，出错不可逆：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 危险写法：
<div class="app"> → 浏览器尝试解析为标签，<code>class="app"消失，>后内容可能错位或丢失 - 安全写法：
<div class="app"> <li>哪怕只是写个比较表达式：<code>if (x 10)，也得全部转义 - 这个规则对
precode和纯code都适用——pre只管空白符，不管 HTML 解析 - 转义后的内容不能再用 JavaScript 动态 innerHTML 插入，否则会二次解析；如需动态渲染，应先用 textContent 或 DOM API 创建文本节点
-
pre必须设overflow-x: auto，否则长代码行直接撑破容器；别只靠white-space: pre，它不解决溢出问题 -
code在pre内要设display: block，否则作为行内元素，无法响应父级宽高和滚动控制 - 字体建议显式声明：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace，避免依赖浏览器默认等宽字体的不一致表现 - 别给
code单独设tab-size——它不生效；应在pre上设，例如tab-size: 2 - 缩进统一用空格（2 或 4 个），不用 Tab 键——不同编辑器和环境对 Tab 宽度解释不同，易导致错行
容易被忽略的 CSS 和字体细节
结构对了，样式没配好，代码照样难读或错位：
真正卡住人的从来不是会不会写 <code>，而是搞不清哪段该单用、哪段必须套 pre、哪些字符非转不可、以及 CSS 里哪个属性该挂在哪一层。结构一旦错，可访问性和维护成本就立刻翻倍。
