Pre 和 Code 标签配合使用是 HTML5 中展示源代码最语义化、最可靠的方式，Pre 保留原始格式，Code 声明代码语义，二者嵌套使用并辅以 CSS 微调可确保可访问性、SEO 和语法高亮兼容性。
Pre 和 Code 标签配合使用，是 HTML5 中展示源代码最语义化、最可靠的方式。关键不在于“炫酷效果”，而在于保留原始缩进、换行和特殊字符，同时让浏览器正确识别代码内容。
Pre 标签：保留原始格式的容器
Pre（preformatted text）告诉浏览器：“这段文字的空格、制表符、换行都必须原样显示”。它自带等宽字体和预设的上下边距，是代码块的天然外层容器。
注意：Pre 本身不表示“这是代码”，仅负责格式；若只用 Pre 不加 Code，搜索引擎和屏幕阅读器无法识别内容类型。
Code 标签：声明内容为计算机代码
Code 是语义标签，用于标记一段简短的内联代码（如 console.log()）或作为 Pre 的子元素标识整段代码块。单独用 Code 不保留换行和缩进；必须嵌套在 Pre 内才能完整呈现多行结构化代码。
标准写法：Pre 包裹 Code，再用 CSS 微调
正确结构如下：
立即学习“前端免费学习笔记（深入）”；
<pre><code class="javascript">function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice"));
</code></pre>
- class 属性推荐加上语言标识（如
language-python），方便语法高亮库（如 Prism.js 或 Highlight.js）自动识别 - 避免在 Pre 内手动写 <br> 或 —— 它们会破坏语义且可能被转义
- 如果代码含小于号（）或与号（&），务必先进行 HTML 实体转义：
、<code>>、&
提升可访问性与用户体验的小技巧
- 为
<pre>添加tabindex="0"，让用户能用键盘聚焦并复制整段代码 - 配合 CSS 设置
overflow-x: auto，防止长行代码溢出容器 - 用
user-select: text确保移动端可选中复制（部分浏览器默认禁用） - 不要用
<blockquote>或<div>替代<pre><code>—— 语义丢失会影响 SEO 和辅助技术
