<code> 标签专用于行内小段真实代码（如函数名、变量），不可替代 <pre> 或 <div>；多行代码用 <pre><code>，需注意可访问性与语义准确性。
<code> 标签在个人作品集里不是用来“高亮代码块”的万能装饰，而是专用于标记**行内的一小段计算机代码**——比如函数名、变量、命令、配置项这些真实出现在终端或编辑器里的文本。用错地方反而会破坏语义，甚至影响可访问性。
什么时候该用 <code>，而不是 <pre> 或 <div>
它只适合嵌在段落中、不换行的代码片段。比如解释某个项目用了什么技术时：
- 错误写法：
<div>fetch()</div>——<div>是布局容器，没语义 - 正确写法：
调用 <code>fetch()发起请求 ——<code>明确告诉浏览器/读屏器这是代码文本 -
<pre>用于多行、保留缩进和换行的完整代码块（如配置文件、函数体），不能塞进段落里 - 别把整段 JS 脚本或 CSS 规则直接丢进
<code>—— 那该用<pre><code>嵌套，并加language-javascript类供语法高亮（如果用了）
作品卡片里怎么安全地用 <code>
在 <figure> + <figcaption> 结构中，<code> 可以自然嵌入说明文字，但要注意边界：
- ✅
<figcaption>使用 <code>React.memo优化渲染性能</figcaption> - ✅
<figcaption>后端接口地址：<code>/api/v1/users</figcaption> - ❌
<figcaption><code>{ "name": "Alice", "role": "admin" }</code></figcaption>—— JSON 对象该用<pre><code>，否则缩进丢失、引号易被转义 - ❌ 把整个技术栈列表（
Node.js、PostgreSQL、Tailwind CSS）全包进一个<code>—— 应该用无序列表，每个词单独套<code>
<code> 和可访问性的实际坑点
屏幕阅读器默认会把 <code> 内容逐字朗读（比如 useState 会被念成 “u s e s t a t e”），容易造成误解。要改善这点：
立即学习“前端免费学习笔记（深入）”；
- 对常见 API 名，加
aria-label：例如<code aria-label="React 的 useState 钩子">useState</code> - 避免在
<code>里混写中文说明，如<code>console.log('调试信息')</code>—— 改成用 <code>console.log()输出调试信息，让语义清晰分层 - 别用
<code>替代样式类来“假装是代码”：比如把项目名PixelFlow包进去只为变等宽字体 —— 那只是视觉需求，该用 CSSfont-family: monospace - CSS 中不要给
<code>设white-space: pre-wrap—— 它默认是normal，强行改会破坏段内换行逻辑
真正难的不是写对标签，而是判断哪一段文字「在上下文中是否属于可执行/可引用的代码实体」。多数人卡在这一步：把技术名词当代码用，或者把代码当普通文本漏掉语义。盯住你的 src、alt、href、tabindex 这些属性本身，它们才是 <code> 最该出现的地方。
