code标签仅语义化标记代码，不控制格式；需与pre标签嵌套使用以保留换行缩进，且html代码必须转义特殊字符（如、&）才能正确显示。
code 标签本身不格式化代码，它只是语义化标记
code 是一个行内语义标签，作用是告诉浏览器“这段文本是一段计算机代码”，它不会自动缩进、换行、高亮或调整字体——这些全靠 CSS 控制。如果你粘贴了一段 HTML 或 JS 代码到 code 里，结果还是挤成一行、没缩进、没语法色，这不是 code 的错，而是你没配样式，也没做预处理。
想让 code 里的内容可读，必须配合 标签
HTML 中真正保留换行、空格和缩进的是 pre 标签。单独用 code，所有空白符（包括回车和多个空格）都会被浏览器合并成一个空格；而 pre 会原样渲染。所以标准写法是嵌套使用：
<pre class="brush:php;toolbar:false;"><code class="html"><div class="header"> <h1>标题</h1> </div> </code>
-
pre负责保留格式（换行、缩进、空格） -
code负责语义标注（这是代码，不是普通文本） - 两者缺一不可：只用
code→ 格式丢失；只用pre→ 语义模糊，SEO 和屏幕阅读器体验差
直接在 HTML 源码里写代码片段，要先转义特殊字符
如果你把一段真实的 HTML 代码（比如 <div>hello</div>）直接塞进 pre + code 里，浏览器会把它当真标签解析，而不是显示出来。必须手动转义：
→ <code><-
>→> -
&→&
漏转一个 & 就可能导致后续所有转义失效，整块代码显示错乱。别指望编辑器自动帮你干这事——VS Code 的“格式化文档”默认不处理 HTML 内部的字符串转义。
用 JavaScript 动态插入代码时，避免 innerHTML 直接拼接
如果用 JS 把用户输入或 API 返回的代码字符串注入到页面，直接赋值给 element.innerHTML 会有两个风险：
- 未转义内容被解析为真实 HTML（XSS 风险）
- 原始缩进/换行被浏览器忽略（因为没包
pre）
更安全的做法是：
const codeEl = document.querySelector('code');
codeEl.textContent = '<div class="app">...</div>'; // 自动转义
// 然后确保它的父元素是 pre
或者用 document.createTextNode() 手动创建文本节点——这样既安全，又保留原始换行缩进，只要外层有 pre 就能正确显示。
最常被忽略的一点：很多人以为加了 code 就算“格式化完成”，其实它连换行都不管。真正起作用的是 pre 的 whitespace 处理逻辑，以及你有没有把 这类字符老老实实转义掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
