单行代码必须用 <code>，不能套 <pre>；<pre> 是块级容器，自带上下 margin 和强制换行，会撑开行高、破坏文字流。

单行代码该用

 还是 <pre class='brush:php;toolbar:false;'>？</H3>
<p>单行代码必须用 <code>，不能套 <pre class="brush:php;toolbar:false;">。浏览器把 <pre class="brush:php;toolbar:false;"> 当块级容器，自带上下 margin 和强制换行，塞进段落里会撑开行高、破坏文字流。比如写“调用 <code>fetch()

时需传 signal”，如果误写成

<pre class="brush:php;toolbar:false;">fetch()

，结果就是前后多出空白、字体可能变 serif、屏幕阅读器读作“预格式化块”而非“函数名”。

常见错误包括：
• 用

 包裹变量名如 <pre class="brush:php;toolbar:false;"><code>user.id

，导致意外缩进
• 没设 CSS， 默认背景色浅灰+圆角太弱，和正文对比度低，易被忽略

多行代码为什么必须嵌套

？</H3>
<p><code> 是行内元素，天生不换行；<pre class="brush:php;toolbar:false;"> 只保留空格和换行，但不声明“这是代码”。单独用 <pre class="brush:php;toolbar:false;">，搜索引擎和语法高亮库（如 Prism.js）无法识别内容类型；单独用 <code>，多行代码全挤成一行，缩进塌陷，根本没法看。</p>
<p>正确结构只有一种：<pre class="brush:php;toolbar:false;"><code>function hello() {<br>  console.log('hi');<br>}

。注意：
• 换行符必须真实存在，不能靠
模拟；从 IDE 复制时确保是纯文本
• 代码含 、& 必须转义为 <、>、&，否则会被解析为标签（例如

要写成 <div>）

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

里的 HTML 字符不转义会怎样？

不转义就等于主动引入 XSS 风险或 DOM 错乱。浏览器先解析 HTML 结构，再渲染内容。
• 危险写法：if (x → • 安全写法：<code>if (x < 10) { ... }
• 服务端输出前就要转义（如 Node.js 用 he.escape()，PHP 用 htmlspecialchars()）；前端用 innerHTML 直接插入未转义字符串，等于放弃防护底线

没加 CSS 的

<code> 会有什么问题？</code>

默认样式几乎不可用：
• 缺 font-family: monospace，缩进对不齐，JSON 或 Python 一眼难读
• 缺 tab-size: 4，不同浏览器默认值不同（Chrome 是 8，Firefox 是 4），VS Code 复制的代码缩进错位
• 缺 overflow-x: auto + white-space: pre，长代码行直接撑破容器或被截断
• 别给 直接设 white-space: pre —— 它已继承自 <pre class="brush:php;toolbar:false;">，重复设置可能干扰层叠</pre>

最常被忽略的不是怎么写，而是转义时机和缩进一致性：哪怕只是展示一段 HTML 示例，只要含 、&，就必须转义；缩进统一用空格，别混用 Tab。