<code>标签不支持标题属性，应使用<figure>+<figcaption>包裹<pre>+<code>实现带标题的代码块，并通过class="xxx"声明语言，注意<pre>空白处理与响应式截断。
code 标签本身不支持标题属性
<code> 是行内语义标签，设计用途是标记一段短代码（如函数名、变量名），浏览器默认渲染为等宽字体，但不提供添加标题、语言标识或行号的能力。试图用 <code title="main.py">print("hello")</code> 显示文件名，只会让鼠标悬停时出现提示，无法在页面上稳定显示标题栏。
实现带标题的代码块应改用 pre + code 组合
标准做法是外层用 <pre> 保持格式，内层嵌套 <code> 保证语义，标题则通过额外 HTML 元素（如 <div> 或 <figure>）包裹实现：
<figure>
<figcaption>index.js</figcaption>
<pre><code class="js">function greet() {
console.log("hi");
}</code></pre>
</figure>-
<figure>和<figcaption>是语义化组合，适合图文/代码+说明场景，部分屏幕阅读器可识别 - 若需样式控制（如标题背景、右对齐），直接给
<figcaption>加 CSS，例如figcaption { background: #f0f0f0; padding: 4px 8px; font-size: 0.9em; } - 避免把标题塞进
<code>内部（如<code><span>index.js</span>...</code>），这会破坏语义，且高亮工具（如 Prism、highlight.js）通常只处理<code>内容，标题会被一并高亮或错乱
使用 data-* 属性辅助语法高亮库识别语言
多数现代高亮库（Prism、highlight.js）依赖 data-language 或 class="xxx" 判断语法类型，而非文件扩展名。标题文字（如 "index.js"）只是视觉提示，不能替代语言声明：
<figure> <figcaption>index.js</figcaption> <pre><code class="javascript">const a = 1;</code></pre> </figure>
- 必须显式写
class="javascript"（或data-language="javascript"），不能只靠标题里的.js - 某些库支持从
<figcaption>自动提取后缀（如 highlight.js 的highlightAuto模式），但不可靠，尤其遇到App.jsx、Dockerfile等非标准命名时容易误判 - 标题文字建议保持简洁，避免空格或特殊符号干扰 CSS 选择器或 JS 解析
注意 pre 的换行与空白处理差异
<pre> 默认保留所有空白符和换行，但若代码内容来自 JS 动态插入或模板引擎，缩进可能被意外压缩。常见问题包括：
立即学习“前端免费学习笔记（深入）”；
- 标题和代码之间多出空行：检查
<figcaption>后是否有换行+缩进，或<pre>前是否残留空白文本节点 - 代码首行缩进异常：确保
<code>开始标签紧贴<pre>结束标签，不要换行缩进，例如写成<pre><code>...而非<pre>\n <code>... - 响应式截断：纯
<pre>不自动换行，长代码行会横向溢出，需加 CSS 如pre { overflow-x: auto; }
标题和代码的视觉对齐、语言标识的可靠性、pre 的空白敏感性——这三个点一旦忽略，轻则样式错位，重则高亮失效或可访问性降级。
