pre标签用于保留代码的原始格式，适合展示多行代码块；code标签表示内联代码片段，强调内容为代码。二者结合使用可同时保留格式并明确语义，提升可访问性与SEO效果。
在HTML中，pre 和 code 标签都用于展示代码内容，但它们的语义和使用场景各有侧重。正确使用这两个标签，不仅能提升页面可读性，还能增强网页的可访问性和SEO效果。
code标签：表示内联代码片段
code 标签用于标记文档中的内联代码，比如变量名、函数名或一行命令。它本身不保留空白符或换行，适合嵌入在段落中。
- 语义：一段计算机代码（如函数调用、HTML标签、CSS属性等）
- 典型使用场景：说明某个方法的用法，例如
console.log("hello") - 通常与 pre 配合使用，当需要展示多行代码时
pre标签：保留原始格式的预格式化文本
pre 标签用于显示预格式化的文本，浏览器会保留其中的空格和换行，常用于展示代码块、ASCII艺术或日志输出。
- 语义：一段按照原样显示的文本内容
- 特点：自动保留缩进、换行和多个空格
- 常见用途：展示多行代码、命令行输出、结构化文本
结合使用 pre 与 code：最佳实践
要语义化地展示多行代码块，推荐将 code 嵌套在 pre 内部。这样既保留了格式，又明确了内容是代码。
立即学习“前端免费学习笔记（深入）”；
示例：
function hello() { console.log("Hello, world!"); }
单独使用的场景对比
某些情况下可以单独使用其中一个标签：
- 只用 code：比如在句子中提到
document.getElementById()，不需要换行或缩进 - 只用 pre：展示日志文件或ASCII图等非代码但需保留格式的内容
- 强调是代码时，即使内容不是编程语言，也可用 code 提升语义准确性
基本上就这些。合理搭配 pre 和 code，能让代码展示更清晰、更标准，也更利于维护和访问。不复杂但容易忽略细节。
