✅ 正确写法是 fetch()、abortsignal、npm install；❌ 错误写法含多余空格或换行，会破坏行高与可访问性。
单行代码加提示必须用 ，别套 <pre class="brush:php;toolbar:false;">
在段落里提一个函数、命令或变量时，fetch() 这种写法才是语义正确且排版安全的。它默认是行内元素，不会撑开上下行距，屏幕阅读器也会读作“fetch 函数”。
- ✅ 正确：
fetch()、AbortSignal、npm install - ❌ 错误：
fetch()
——自带 margin，塞进段落会破坏行高和视觉节奏
- ❌ 错误：
console.log('x —— <code> 没转义，浏览器真去解析 <y dom></y>
多行代码块加提示必须用 组合
函数体、JSON 配置、终端输出这类内容，只靠
标签会压成一行、丢缩进；只用 <pre class="brush:php;toolbar:false;"> 又缺语义，高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。
- ✅ 正确结构：
<code>function greet(name) { return `Hello, ${name}!`; }</code> - ❌ 错误：
function greet() { ... } —— 所有换行缩进全被压缩 - ❌ 错误：
function greet() { ... }—— 搜索引擎当普通文本，不索引为代码 - ⚠️ 必须转义：
<div class="box">content</div>
，不能直接写
提示条本身别用 title 属性
给 或 <pre class="brush:php;toolbar:false;"><code> 加 <code>title</code> 是最常见但最不可靠的做法：移动端不触发、含换行就截断、overflow: hidden 会裁掉、读屏器行为不一致。</code></pre>
- ✅ 推荐方案：用
包裹
，点击展开说明
- ✅ 替代方案：data-tooltip + CSS 实现可控样式和响应逻辑
- ❌ 别写：
fetch() —— Safari iOS 下根本看不到提示
样式和可访问性容易被忽略的点
默认等宽字体不可靠，尤其在旧系统或自定义字体下；漏掉转义或乱设 white-space 会让提示失效甚至破坏页面结构。
- 显式声明字体：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; - 别给
加 <code>white-space: pre—— 长命令会横向溢出，且基线对不齐 - 长代码块要加
overflow-x: auto和tab-size: 2控制缩进显示 - 所有 HTML 特殊字符（
、<code>>、&）必须手动转义，哪怕只是写x
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
