应只在句子中提短小技术名词（如fetch()）时用，因其为行内元素，不保留换行缩进；多行代码必须用嵌套组合，前者保格式，后者明语义，且、&须转义。
什么时候该用 而不是 <pre class="brush:php;toolbar:false;"><code></code>
只在句子中提一个短小的技术名词时用：fetch()、<code>os.path.join()、npm install、userProfile。它默认是行内元素，不换行、不保留空格缩进，嵌在段落里刚好合适。
常见错误是把整个函数体或 JSON 片段塞进
里——浏览器会把它压成一行，缩进全丢，语义也错：屏幕阅读器会当成“一个变量名”读，而不是“一段可执行代码”。
fetch() ✅ 正确：函数调用，上下文明确if (x ❌ 错误：含 HTML 特殊字符且逻辑多行，必须转义 + 套 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre></pre><div class="header"></div> ❌ 错误：未转义 <code> 和 <code>>，会被解析为标签
标签里哪些字符必须手动转义
标签内容虽短，但只要出现 <code>、<code>>、&，就必须写成 <、>、&。这不是“建议”，而是硬性要求——浏览器先解析 HTML 结构，再渲染内容。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 危险写法：
if (x 10)→ 实际会解析成标签或中断结构 - 安全写法：
if (x < 5 && y > 10) - 哪怕只是写个 CSS 属性
display: flex，也不需要转义；但一旦出现，就得立刻处理
为什么不能把多行代码硬塞进
是纯行内语义元素，规范明确限定它不保留换行、缩进、连续空格。你粘贴进去的换行符和 tab，在渲染时全被折叠成单个空格。
- 错误示例：
function hello() {\n console.log('hi');\n} → 渲染结果是 <code>function hello() { console.log('hi'); } - 正确做法：多行代码必须用
<pre class="brush:php;toolbar:false;"> 组合，<pre class="brush:php;toolbar:false;"> 负责格式保留，<code> 负责语义声明</code>
- 单独用
不加 <code>，会丢失“这是代码”的语义，对屏幕阅读器和 SEO 都不友好</code>
样式与可访问性容易忽略的点
浏览器默认给 加等宽字体，但别依赖它。实际项目中常因字体链缺失导致显示异常。
- 显式设置 font-family 更可靠：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; 标签本身不可聚焦，别给它加 <code>tabindex——无效，且可能干扰键盘导航- 如果代码块带复制按钮，焦点应落在
上，并配 <code>tabindex="0"</code> 和 <code>aria-label</code>
- 避免用
background或padding直接修饰，优先通过 <pre class="brush:php;toolbar:false;"><code> 外层控制尺寸和间距</code></pre>
当成万能代码容器——它只管“这是代码”，不管“怎么展示”。格式、语义、可访问性，三者缺一不可，而每项都得靠人去对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
