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