HTML如何表示文档的代码片段_HTML表示文档代码片段元素【元素】

用 <code> 包裹内联代码，但别乱套嵌套

HTML 里表示一小段代码（比如函数名、变量、命令），就用 <code> 标签，它语义清晰、默认有等宽字体和轻微背景，浏览器也认得这是“代码”。但注意：<code> 只适合单行或短片段，比如 console.log() 或 git status。别把它当 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 用——往里面塞多行缩进代码，格式会塌，换行也不保留。&lt;/p&gt; &lt;p&gt;常见错误现象：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;function foo() {&lt;br&gt; return true;&lt;br&gt;}</pre> 这样写，<code><br> 不生效，实际渲染成一行且缩进丢失。

• 正确做法：单行代码直接

  <code>JSON.parse()</code></li>
  <li>多行代码必须配 <code><pre class="brush:php;toolbar:false;">

  ，

  <pre class="brush:php;toolbar:false;"><code>...</code>

• <code> 里别再嵌 <code><div>、<code><p></p> 等块级标签，HTML 不允许

  <pre class="brush:php;toolbar:false;">&lt;/code&gt; + &lt;code&gt;&lt;code&gt;&lt;/code&gt; 是标准组合，不是可选搭配&lt;/H3&gt; &lt;p&gt;要展示带缩进、换行、空格的完整代码块（比如配置文件、函数体、命令输出），必须用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 包一层，再把 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 放进去。因为 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 保留空白符和换行，&lt;code&gt;&lt;code&gt;&lt;/code&gt; 提供语义和基础样式，二者缺一不可。&lt;/p&gt; &lt;p&gt;使用场景：文档里贴一段 &lt;code&gt;package.json&lt;/code&gt; 片段、Node.js 错误堆栈、Shell 命令执行结果。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1389&quot; title=&quot;达奇AI论文写作&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680423945041.png&quot; alt=&quot;达奇AI论文写作&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/1389&quot; title=&quot;达奇AI论文写作&quot;&gt;达奇AI论文写作&lt;/a&gt; &lt;p&gt;达奇AI论文辅助写作平台，在校学生、职场精英都在用的AI论文辅助写作平台&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1389&quot; title=&quot;达奇AI论文写作&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;json&quot;&gt;{&quot;name&quot;: &quot;demo&quot;}&lt;/code&gt;</pre> —— 推荐，加了 class 方便后续语法高亮

• 只用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 不套 &lt;code&gt;&lt;code&gt;&lt;/code&gt;：语义缺失，屏幕阅读器读不出“这是代码”&lt;/li&gt; &lt;li&gt;只用 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 不套 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;：缩进和换行全丢，&lt;code&gt;if (x) {&lt;/code&gt; 和 &lt;code&gt; y();&lt;/code&gt; 会挤成一行&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;别忽略 &lt;code&gt;tabindex&lt;/code&gt; 和可访问性问题&lt;/H3&gt; &lt;p&gt;代码块默认不可聚焦、无法被键盘导航到，对屏幕阅读器用户不友好。尤其当代码是关键操作步骤（比如复制命令）时，得让它能被 tab 到。&lt;/p&gt; &lt;p&gt;性能 / 兼容性影响：加 &lt;code&gt;tabindex=&quot;0&quot;&lt;/code&gt; 几乎无成本，所有现代浏览器都支持，也不会触发重排。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;给 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 加 &lt;code&gt;tabindex=&quot;0&quot;&lt;/code&gt;，比如 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot; tabindex=&quot;0&quot;&gt;&lt;code&gt;npm install&lt;/code&gt;</pre>
• 如果代码块带复制按钮，建议同时加 role="region" 和 aria-label，例如 aria-label="命令：npm install"
• 别给 <code> 单独加 tabindex——它不是焦点容器，加了也没用

语言标识和语法高亮靠 class，不是 HTML 内置能力

HTML 本身不识别 language-python 或 language-js，这些只是约定俗成的 class 名，供外部 JS 库（如 Prism、highlight.js）或 CSS 规则匹配用。没配对应脚本，加了也白加。

容易踩的坑：以为写了 class="bash" 就自动高亮，结果页面还是黑白一片。

• 确认你项目里已加载语法高亮库，且初始化逻辑覆盖了这些 class
• 推荐写法：<pre class="brush:php;toolbar:false;">&lt;code class=&quot;shell&quot;&gt;curl -X GET /api/users&lt;/code&gt;</pre>（shell 比 bash 更通用）
• 避免用模糊名如 code-block 或 example，会断掉高亮链路
事情说清了就结束。真正麻烦的从来不是标签怎么写，而是忘了 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 各自的职责边界，以及没人提但实际存在的可访问性缺口。