网页如何展示代码片段？Code与Pre标签保留原始排版格式-html教程-PHP中文网

应始终嵌套使用展示多行代码，其中用于行内短代码，单独使用缺乏语义；需转义 HTML 特殊字符、统一用空格缩进、配合基础 CSS 保证可读性。

网页如何展示代码片段？code与pre标签保留原始排版格式

<code> 和 <pre class="brush:php;toolbar:false;"></pre> 是 HTML 中唯二能语义化表达“这是代码”的原生标签，但它们行为完全不同：单独用 <code> 无法保留换行和缩进，单独用 <pre class="brush:php;toolbar:false;"></pre> 缺少代码语义，容易被屏幕阅读器或搜索引擎误判为普通预格式文本。

什么时候该用 `<code>` 标签

只用于行内短代码，比如函数名、变量、命令、HTML 属性值这类嵌在句子中的内容。

浏览器默认用等宽字体渲染，但会忽略所有空白符（空格、制表符、换行）
不能嵌套 <pre class="brush:php;toolbar:false;"></pre>，也不能在里面写多行逻辑
示例：<p>调用 <code>fetch() 发起请求
—— 这样是合法且推荐的
如果硬把多行 JS 塞进 <code>，缩进全塌，大括号错位，可读性归零

为什么 `<pre class="brush:php;toolbar:false;"></pre>` 单独用不推荐

<pre class="brush:php;toolbar:false;"></pre> 确实保留空格和换行，但它本身不声明“这是代码”，只是“按原样显示”。对无障碍访问、SEO、样式复用都不友好。

屏幕阅读器可能读作“预格式化文本”，而非“JavaScript 代码块”
CSS 里想统一给所有代码加背景色，<pre class="brush:php;toolbar:false;"></pre> 会把诗歌、ASCII 艺术、日志输出也一并染上
没有语义，后续加语法高亮 JS 库（如 highlight.js）通常依赖 <code> 作为识别入口
正确写法永远是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，而不是只用 <pre class="brush:php;toolbar:false;"></pre>

`<pre class="brush:php;toolbar:false;"><code></code> 嵌套时的三个实操细节</pre>`

这个组合是展示多行代码的事实标准，但容易在细节上翻车。

缩进必须用空格，别用 Tab —— 某些编辑器或 CMS 会把 Tab 转成 4 或 8 个空格不一致，导致渲染错位
如果代码里含 、<code>>、&，必须手动 HTML 实体转义，否则会被浏览器解析为标签：、<code>>、&
CSS 中给 <pre class="brush:php;toolbar:false;"></pre> 设 overflow-x: auto，再给 <code> 设 display: block，否则长代码行会撑破容器或被截断
不要给 <code> 直接设 white-space: pre —— 它已经继承自 <pre class="brush:php;toolbar:false;"></pre>，重复设置可能干扰样式层叠

不加 CSS 也能让代码可读的最低成本方案

很多人卡在“没配好 highlight.js 就不敢上线”，其实纯 HTML + 原生 CSS 就能跨过第一道门槛。

给 <code> 加类 class="js"（语言标识），即使不配高亮，也为后续留了钩子
最小样式只需三行：pre { background: #f6f6f6; padding: 1em; border-radius: 4px; }、code { font-family: ui-monospace, 'SFMono-Regular', monospace; }、pre code { display: block; }
别用 font-size: 12px —— 小屏设备下几乎不可读，14px 是底线
移动端记得加 pre { max-width: 100%; }，否则代码块横向溢出，用户得左右拖拽