正确方案是嵌套：pre保留格式，code声明语义，class供高亮库识别语言；顺序不可颠倒，转义特殊字符，确保utf-8编码。
code 标签只负责语义，不保留换行和空格
code 是一个行内元素，它的核心作用是告诉浏览器“这段文本是计算机代码”，从而触发等宽字体渲染和基础语义识别。但它**完全不管格式**：原始文本里的换行符会被浏览器当作普通空白合并，多个空格缩进也会被压成一个空格。
常见错误现象包括：
- 把多行 JS 代码直接塞进
<code>console.log(1);<br>console.log(2);</code>
- 用
<p><code>for (let i = 0; i包裹带缩进的代码块，结果缩进全丢
它适合单行片段，比如：typeof、Array.prototype.map、fetch() 这类函数名或简短表达式。
pre 标签只保留格式，不声明语义
pre 是块级元素，唯一使命是“原样输出”——空格、制表符、换行符全部照搬，且默认用等宽字体显示。但它对内容是什么毫不关心：可以是诗歌、日志、ASCII 艺术，也可以是代码。
问题在于，搜索引擎、语法高亮库（如 highlight.js）、屏幕阅读器都**无法从 pre 本身判断这是代码**。单独用 <pre class="brush:php;toolbar:false;">print("hello")</pre>，highlight.js 不会自动给 print 上色，辅助工具也可能读作“一段普通预格式化文字”。
所以它常用于需要严格对齐的场景，比如终端输出模拟、配置文件片段，但**不能替代语义标记**。
必须嵌套使用 pre + code 才算完整
正确组合是 <pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>：外层 pre 锁定格式，内层 code 声明语义，class 属性则供高亮库识别语言。
关键细节：
- 顺序不能颠倒——
<code><pre class="brush:php;toolbar:false;"></pre>是非法嵌套，浏览器可能解析异常 -
class必须加在code上，写成<pre class="js"></pre>高亮库直接忽略 - 原始代码里的
、<code>>、&必须转义为<、>、&，否则浏览器会当成真实 HTML 标签解析 - 如果代码含中文或特殊符号，确保页面
<meta charset="UTF-8">已声明，否则可能乱码
white-space 属性能微调 code 的行为，但别乱用
单独的 code 默认是 white-space: normal，也就是不保留换行。想让它支持多行又不想套 pre？可以用 CSS 强制：
code { white-space: pre-wrap; } —— 保留换行和空格，同时允许文字折行；white-space: pre 则禁止折行，溢出时出现横向滚动条。
但要注意：
- 这种写法绕过了语义结构，
highlight.js仍不会处理它，除非你手动调用highlightElement() - 移动端小屏下
pre-wrap可能导致意外折行，破坏代码可读性 - 所有行内元素都受
white-space影响，改了全局code样式可能波及其他地方的单行代码引用
真正要展示可读、可高亮、可访问的代码块，pre 套 code 仍是不可替代的基础方案。其他方式只是边缘补救，不是正路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
