多行代码必须嵌套使用 <pre><code>：<pre> 保留换行缩进等格式，<code> 提供“这是代码”的语义，二者缺一不可；HTML 特殊字符须转义，缩进统一用空格，单行代码仅用 <code>。
必须用 <pre><code> 嵌套，不能只用其中一个 —— 单独用 <pre> 没语义，单独用 <code> 不保留缩进和换行。
多行代码为什么必须嵌套 <pre><code>
<pre> 负责“格式不塌”，<code> 负责“这是代码”。缺一不可。
-
<pre>会原样渲染空格、制表符、换行，但浏览器把它当普通预格式文本，搜索引擎可能不识别为代码，语法高亮库（如 highlight.js）也找不到入口 -
<code>告诉辅助工具、SEO 和样式系统“这是计算机代码”，但它会把所有换行和多余空格压成一个空格 —— 塞一段 Python 函数进去，直接变成def hello(): print("Hi")一行，缩进全丢 - 只有
<pre><code>同时满足：格式完整 + 语义明确 + 高亮可触发
HTML 特殊字符不转义就会出错
代码里含 <、>、& 时，浏览器会尝试解析成标签或实体，导致结构断裂甚至脚本执行。
HTML5技术开发服务解决公司网站模板
下载
HTML5技术开发服务解决公司网站模板是一款提供为企业提供服务和解决方案的公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
- 必须手动转义：
<→，<code>>→>，&→& - 别依赖编辑器自动转义 —— 很多 CMS 或 Markdown 渲染器只对正文转义，对
<pre>内容放行 - 像
<div>这种写法，不转义就变成真实 DOM 节点，可能破坏页面结构
缩进用 Tab 还是空格？CSS 怎么配才不翻车
缩进不统一、CSS 设置冲突，是代码块渲染错位最常见原因。
- 缩进必须用空格，且统一为 2 或 4 个 —— Tab 在不同编辑器/浏览器中宽度不一致，容易导致对齐崩坏
-
<pre>上加overflow-x: auto，防止长代码行撑破容器 -
<code>设display: block，否则它作为行内元素，无法继承<pre>的滚动和宽高控制 - 别给
<code>单独设white-space: pre—— 它已从<pre>继承该行为，重复设置可能干扰层叠
单行代码别误用 <pre>
写“调用 fetch() 时传 signal”这种句子，用 <code> 就够了；塞进 <pre> 反而会破坏段落流。
-
<pre>是块级元素，默认带上下 margin，插在段落中会让行高异常增大 - 屏幕阅读器读
<pre>会强调“预格式化文本”，语义错误 - 函数名、变量、配置项、命令、路径、错误信息 —— 全部用
<code>，比如：useState、package.json、npm run dev、/api/users、TypeError: Cannot read property 'map' of undefined
真正麻烦的不是写法，而是混用场景：有人把整段 Shell 脚本塞进 <code>，有人把 console.log() 单独包一层 <pre>。记住一点——格式要不要保留，是唯一判断标准。
