HTML5中用<pre><code>组合展示代码需保留空白符、转义HTML特殊字符并确保语义正确：<pre>保留缩进与换行，<code>标明代码语义，尖括号须转义为等。
在HTML5中，用 <pre> 和 <code> 组合展示带缩进的代码片段，关键在于保留空白符、禁用HTML标签解析，并确保语义正确。
使用 <pre> 保留换行与空格
<pre> 元素会原样渲染其中的空白字符（包括空格、制表符、换行），这是实现缩进的基础。浏览器默认用等宽字体显示，适合代码排版。
- 缩进必须用空格或 Tab（不建议混用），避免被CSS或编辑器自动转成普通空格
- 不要在
<pre>外层再套<p>或其他段落级元素，以免破坏格式 - 若需控制宽度或滚动，可加 CSS：
pre { max-width: 100%; overflow-x: auto; white-space: pre; }
嵌套 <code> 标明代码语义
<pre> 是结构容器，<code> 是语义标签，二者嵌套使用更规范：
<pre><code class="js">function hello() {
console.log("Hi");
}
</code></pre>
立即学习“前端免费学习笔记（深入）”；
-
<code>告诉浏览器“这是计算机代码”，利于无障碍访问和SEO - 推荐添加
class属性（如language-js）便于语法高亮工具识别 - 避免只用
<pre>而不嵌<code>，语义不完整
防止HTML标签被解析：对尖括号做实体转义
代码中若含 <、>、&，必须转义，否则会被浏览器当作HTML标签处理：
-
<→ -
>→> -
&→& - 例如：
if (x 才能正确显示为 <code>if (x - 可借助编辑器插件或脚本批量转义，手写时务必检查
可选：添加语言标识与样式增强可读性
虽非必需，但加上 data-language 或 class 可提升可维护性：
- 用
class="html"配合 Prism.js 或 Highlight.js 实现语法高亮 - 用
data-language="python"供自定义JS逻辑识别语言类型 - 避免用
<pre lang="html">——lang属性表示自然语言（如zh、en），不是编程语言
