多行HTML源码需用<pre><code>嵌套并转义：<pre>保留换行缩进，<code>提供语义和高亮支持；单独<code>会塌成一行且不保留格式。
直接保存 HTML 源码为 <code> 标签没有意义——<code> 是语义化行内标签，不是文件格式或存储容器。你要的其实是「把一段 HTML 源码内容，正确显示在网页中作为可读的代码片段」，这需要转义 + 嵌套结构，而不是“存成 code 标签”。
为什么单用 <code> 会塌成一行
<code> 是行内元素，浏览器默认忽略其中的换行符、制表符和连续空格。哪怕你写成：
<code>
function add(a, b) {
return a + b;
}</code>
实际渲染出来就是：function add(a, b) { return a + b; }——所有缩进和换行全丢。
- 只适合嵌在段落里的短内容，比如函数名
useState、命令npm install、路径/src/utils.js - 别把它当容器用：
<code>不是<div>，不能设width或margin控制布局 - 它不保留格式，也不触发语法高亮（即使加了
class="js"）
多行 HTML 源码必须用 <pre><code> 嵌套
想让 HTML 源码在网页里原样显示（含缩进、换行、空格），必须同时满足两个条件：
立即学习“前端免费学习笔记（深入）”；
-
<pre>：负责保留原始空白符和换行（预格式化） -
<code>：声明这段内容是「计算机代码」，提供语义，支持高亮库识别 - 二者缺一不可：单独用
<pre>，屏幕阅读器读作“预格式化文本”，不是“HTML 代码”；单独用<code>，格式全崩
正确写法：
<pre><code class="html"><!DOCTYPE html> <html> <head><title>My Page</title></head> <body><p>Hello</p></body> </html></code></pre>
注意： 和 <code>> 是必须转义的，否则浏览器会尝试解析为真实标签。
保存 HTML 源码为可复用代码片段的实操要点
如果你是从网页复制了一段 HTML 结构（比如某个组件的 outerHTML），想把它变成能直接插入文档并正常显示的代码块，按这个顺序做：
- 先用开发者工具选中元素 → 右键 →
Copy outerHTML - 粘贴到编辑器后，对内容做 HTML 字符转义：
<→，<code>>→>，"→"，&→&（&必须最先处理，否则后续转义会出错） - 把转义后的内容包进
<pre><code class="html">...</code></pre> - 如果用于静态站点，建议给
<pre>加overflow-x: auto，给<code>加display: block，避免长行撑破容器
容易被忽略的边界问题
最常翻车的地方不是不会写标签，而是混用场景：
- 把整段 Shell 脚本塞进
<code>—— 会塌成一行，且无滚动 - 把
console.log("hello")单独包一层<pre>—— 语义错误（不是预格式化文本），还带多余 margin - 在
<pre><code>里用了 Tab 缩进 —— 不同编辑器/终端渲染宽度不一致，容易错位；统一用 2 或 4 个空格 - 忘了转义
&，导致
真正判断标准只有一个：要不要保留原始换行和缩进？要，就上 <pre><code>；不要，<code> 单独够用。
