应该用，但仅限表示可复制的代码片段；函数名、CSS属性、命令行指令等可用，操作提示、中文说明等不可用；需配合CSS增强可读性，注意移动端复制与空格渲染问题。
code 标签该不该用在博客文章里
应该用，但仅限于表示「一段可复制的代码片段」。它不是用来加粗、高亮或装饰普通文字的。很多新手误把
当作 <strong> 用，结果语义错误、无障碍失效、SEO 反而受损。</p>
<p>常见错误现象：<code><code>console.log('hello')</code> 写对了，但 <code>点击提交按钮</code> 就不对——这不是代码，是操作提示，该用 <span> 或直接用普通文本。
- 使用场景：函数名（
fetch()）、CSS 属性（display: flex）、命令行指令（npm install）、HTML 标签名（<article>） - 不适用场景：中文操作说明、带标点的句子、纯数字编号、标题文字
- 性能影响为零，但滥用会增加屏幕阅读器负担——每次读到
code，它都会强调“这是代码”，打断自然语流
如何让 code 标签在博客中真正可用
原生 code 标签只有语义，没有样式。直接放上去，默认是等宽字体+无背景+无边距，用户根本分不清哪段是代码、哪段是普通英文。
实操建议：必须配合 CSS 做最小化增强，至少覆盖三处：
立即学习“前端免费学习笔记（深入）”；
- 给
code加background-color和padding，比如background: #f5f5f5; padding: 2px 6px; - 确保行内代码不换行，加
white-space: nowrap;；若需换行（如长命令），改用<pre><code>...</code></pre> - 避免和
pre混用：单行用code，多行且保留缩进/换行才套pre
示例（合法嵌套）：<pre><code class="js">function hello() { return "world"; }</code></pre>
code 标签与语法高亮的兼容性问题
轻量级博客系统通常不引入 Prism 或 Highlight.js，所以别指望自动高亮。强行加 class="python" 却没加载对应 JS，只会留个没用的 class。
如果你真想支持基础高亮，两个务实选择：
- 用纯 CSS 模拟：针对常见关键词写简单规则，比如
code.language-js span.keyword { color: #d73a49; }，再配合 HTML 预处理时手动包裹关键词（适合极简需求） - 放弃高亮，专注语义：只保证
code可读、可复制、不打断流体布局。多数技术读者更在意代码是否准确可粘贴，而非颜色是否漂亮 - 注意：某些静态博客生成器（如 Hugo、Jekyll）默认把 Markdown 的 ``` 区块转成
+ <pre class="brush:php;toolbar:false;">，但 inline <code> 仍需手动校验是否被正确包裹</li> </ul> <H3>移动端复制 <code>code
的实际体验陷阱桌面端右键复制很自然，但手机上长按触发复制菜单，经常失败——因为默认
user-select: none或父容器设置了overflow: hidden。必须检查并显式放开：
- 给
code加user-select: text;（现代浏览器都支持） - 确保外层没有
touch-action: none或禁用事件的 JS 干扰 - 如果用了
pre > code嵌套，记得给pre设overflow-x: auto;，否则长代码溢出不可见
最容易被忽略的是：iOS Safari 对
code内部空格的渲染异常，连续多个空格会被压缩。若需保留格式，得加white-space: pre;——但这就不再是行内语义了，得权衡。 - 给
