✅ 正确写法是 fetch()、AbortSignal、npm install；❌ 错误写法含多余空格或换行，会破坏行高与可访问性。
单行代码加提示必须用 ，别套 <pre class="brush:php;toolbar:false;"></H3>
<p>在段落里提一个函数、命令或变量时，<code>fetch()
这种写法才是语义正确且排版安全的。它默认是行内元素，不会撑开上下行距，屏幕阅读器也会读作“fetch 函数”。
- ✅ 正确：
fetch()、AbortSignal、npm install
- ❌ 错误：
fetch()
—— 自带 margin，塞进段落会破坏行高和视觉节奏</li>
<li>❌ 错误：<code>console.log('x < y')</code> —— <code><</code> 没转义，浏览器真去解析 <y，后续 DOM 可能错乱</li>
</ul>
<H3>多行代码块加提示必须用 <pre class='brush:php;toolbar:false;'> 组合</H3>
<p>函数体、JSON 配置、终端输出这类内容，只靠 <pre class="brush:php;toolbar:false;"> 标签会压成一行、丢缩进；只用 <pre class="brush:php;toolbar:false;"> 又缺语义，高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。</p>
<ul>
<li>✅ 正确结构：<pre class="brush:php;toolbar:false;"><code>function greet(name) { return `Hello, ${name}!`; }
- ❌ 错误：
function greet() { ... } —— 所有换行缩进全被压缩
- ❌ 错误：
function greet() { ... } —— 搜索引擎当普通文本，不索引为代码
- ⚠️ 必须转义：
<div class="box">content</div>
，不能直接写
提示条本身别用 title 属性
fetch()、AbortSignal、npm install
fetch()——
自带 margin，塞进段落会破坏行高和视觉节奏</li>
<li>❌ 错误：<code>console.log('x < y')</code> —— <code><</code> 没转义，浏览器真去解析 <y，后续 DOM 可能错乱</li>
</ul>
<H3>多行代码块加提示必须用 <pre class='brush:php;toolbar:false;'> 组合</H3>
<p>函数体、JSON 配置、终端输出这类内容，只靠 <pre class="brush:php;toolbar:false;"> 标签会压成一行、丢缩进；只用 <pre class="brush:php;toolbar:false;"> 又缺语义，高亮库（如 Prism.js）无法识别语言，SEO 和读屏器也难理解。</p>
<ul>
<li>✅ 正确结构：<pre class="brush:php;toolbar:false;"><code>function greet(name) { return `Hello, ${name}!`; }function greet() { ... } —— 所有换行缩进全被压缩
function greet() { ... } —— 搜索引擎当普通文本，不索引为代码<div class="box">content</div>，不能直接写
给 或 <pre class="brush:php;toolbar:false;"><code> 加 <code>title</code> 是最常见但最不可靠的做法：移动端不触发、含换行就截断、overflow: hidden 会裁掉、读屏器行为不一致。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a>
<p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>✅ 推荐方案：用 <details><summary> 包裹 <pre class="brush:php;toolbar:false;">，点击展开说明</li>
<li>✅ 替代方案：data-tooltip + CSS 实现可控样式和响应逻辑</li>
<li>❌ 别写：<code title="发送 HTTP 请求">fetch()</pre> —— Safari iOS 下根本看不到提示
<h3>样式和可访问性容易被忽略的点</h3>
<p><pre class="brush:php;toolbar:false;"> 默认等宽字体不可靠，尤其在旧系统或自定义字体下；漏掉转义或乱设 white-space 会让提示失效甚至破坏页面结构。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>显式声明字体：<code>font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;</pre>
</p>
<li>别给 <code> 加 <code>white-space: pre —— 长命令会横向溢出，且基线对不齐
overflow-x: auto 和 tab-size: 2 控制缩进显示、<code>>、&）必须手动转义，哪怕只是写 x < 5
