HTML中pre预格式化文本 HTML中pre标签显示代码块-html教程-PHP中文网

必须嵌套使用标签，且需转义HTML特殊字符、正确设置language-xxx类名、统一用空格缩进并添加overflow-x: auto。

html中pre预格式化文本 html中pre标签显示代码块

为什么只用

 标签显示多行代码会乱成一团

code 是行内元素，浏览器会忽略它里面的换行符和多余空格，所有内容强行压成一行。比如写成

<code>function a() {\n  return 1;\n}</code>

，若只套 code 不套 pre，结果就是 function a() { return 1; } ——缩进没了、换行没了、语义也弱了。

常见错误现象：

代码块挤在一行，根本没法读
复制时丢失缩进，粘贴到编辑器里全是平的
屏幕阅读器无法识别这是“一段完整代码”，只当普通文字朗读

正确做法是必须嵌套：

<code>...</code>

。pre 负责保留格式，code 负责声明语义——两者缺一不可。

HTML 特殊字符（、&）不转义会导致页面结构崩溃

直接把含

 的 HTML 代码塞进 <code></code> 里，浏览器会真把它当标签解析：轻则 <code><div> 被吃掉、后续内容错位；重则整个 <code>pre</code> 块提前闭合，后面 DOM 全乱。<p>必须手动转义以下字符：</p>
<ul>
<li><code> → <code></code></code></li>
<li>
<code>></code> → <code>></code>
</li>
<li>
<code>&</code> → <code>&</code>
</li>
</ul>
<p>别指望 CSS 或 JS 补救——这是 HTML 解析阶段就发生的破坏，转义必须在插入前完成。服务端输出可统一做 HTML 实体编码；前端动态渲染建议用 <code>textContent</code> 而非 <code>innerHTML</code> 插入原始字符串。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
													<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<h3>语法高亮不起作用？大概率是 class 名写错了</h3>
<p>highlight.js 或 Prism.js 这类库不会自动猜语言。它们只认特定命名格式的 <code>class</code> 或 <code>language-xxx</code> 属性。</p>
<p>典型错误写法：</p>
<ul>
<li><code><code class="js"></code> —— 太模糊，可能被其他样式覆盖，且 highlight.js 默认不识别</code></li>
<li><code><code data-lang="javascript"></code> —— 多数库默认不读 <code>data-lang</code></code></li>
<li><code><code class="javascript"></code> —— Prism 要求是 <code>language-javascript</code>，highlight.js 接受但更推荐标准前缀</code></li>
</ul>
<p>推荐写法（兼容主流库）：</p>
<ul>
<li><code><code class="javascript"></code></code></li>
<li><code><code class="python"></code></code></li>
<li><code><code class="html"></code></code></li>
</ul>
<p>别漏掉 <code>highlight.js</code> 的初始化调用：<code>hljs.highlightAll()</code> 必须在 DOM 加载完、且脚本已加载后执行，通常放在 <code></code></p>
</div></code>