编写整洁的HTML code标签代码的实用建议-html教程-PHP中文网

应仅包裹函数名、变量名、命令、配置项、路径、错误信息等真实代码片段，多行代码须嵌套，禁用内联样式与语义冲突标签。

编写整洁的html code标签代码的实用建议

用 `<code>` 标签包裹什么内容才合理

只包裹真正属于「代码片段」的文本：函数名、变量名、命令、配置项、路径、错误信息。比如 fetch()、process.env.NODE_ENV、npm install --save-dev、/etc/hosts、TypeError: Cannot read property 'map' of undefined。别把普通名词（如“组件”“响应式”）或整段 HTML 结构塞进去——<div><p>Hello</p></div> 这种应该用 <pre class="brush:php;toolbar:false;"><code></code> 嵌套，而不是单用 <code><code></code>。</code></pre>

嵌套 `<pre class="brush:php;toolbar:false;"><code></code> 时必须加 <code>class</code> 或 <code>language-xxx</code></pre>`

纯文本换行和空格在 <code> 里会被浏览器合并，所以多行代码必须外包 <pre class="brush:php;toolbar:false;"></pre>。但仅这样还不够：语法高亮依赖 class 识别语言。不加 class，highlight.js 或 Prism 会 fallback 到无格式文本。

推荐写法：

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

关键点：

class 值要与高亮库约定一致，常见有 language-js、language-bash、language-json
不要写成 class="js" 或 lang="javascript"（部分库不识别）
如果用 Markdown 渲染，确保解析器支持 ```js 这类 fence 语法并输出对应 class

避免在 `<code>` 里混用内联样式或 `<strong></strong>`

<code> 是语义化标签，表示“这段文字是代码”，不是排版容器。往里面塞 <strong></strong> 或写 style="color:red" 会破坏语义，也容易被代码高亮覆盖掉样式。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

常见错误场景：

想强调某个参数名，写成

<code>fetch(<strong>url</strong>)</code> → 应该用注释或上下文说明，而非加粗

为区分 shell 命令和输出，给输出行加 style="opacity:0.7" → 正确做法是用两个独立 <code><pre class="brush:php;toolbar:false;"><code></code> 块，分别标 <code>language-bash</code> 和 <code>language-text</code></pre>
在文档中用 <code> 包裹带链接的 API 名（如 @#@#@#@#@#@#@#@#@#@0）→ 链接应放在 <code> 外，否则语义错乱

注意 `<code>` 在不同上下文中的默认字体和行高

浏览器对 <code> 的默认样式是 font-family: monospace，但 line-height、padding、vertical-align 会随父元素变化。尤其在段落中紧贴中文使用时，容易出现基线偏移或行高塌陷。

稳妥做法：

全局重置（CSS 中）：code { font-size: 0.95em; line-height: 1.4; vertical-align: text-bottom; }
避免在 <h3></h3> 或 <blockquote></blockquote> 内直接放 <code>，优先用 <pre class="brush:php;toolbar:false;"><code></code> 独立成块</pre>
移动端需测试小字号下 <code> 是否可读——有些系统默认 monospace 字体渲染模糊，可加 text-rendering: optimizeLegibility

最常被忽略的是垂直对齐：没设 vertical-align 时，<code>console.log() 会比周围文字略下沉，肉眼可见不整齐。