fetch() 是浏览器全局函数，用于发起HTTP请求，返回Promise；需用 .json() 或 .text() 解析响应体，且须手动检查 response.ok 判断HTTP状态。
单行代码必须用 ，不能套 <pre class="brush:php;toolbar:false;"></H3>
<p>教程里提到函数、变量或命令时，<code> 是唯一语义正确的选择。比如写“调用 <code>fetch()
时传入 AbortSignal”，浏览器会以等宽字体渲染，且不撑开段落行高。
-
fetch() ✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数”
fetch()
❌ 错误： 是块级元素，自带 margin，塞进段落会打断行距、视觉断裂</li>
<li>漏转义 <code><</code> 或 <code>></code>（如写 <code>x < 5</code>）→ 浏览器尝试解析为标签，后续 HTML 可能错乱</li>
<li>别给 <code> 加 <code>white-space: pre</code>：长命令会横向溢出，且基线对不齐</li>
</ul>
<H3>多行代码必须嵌套 <pre class='brush:php;toolbar:false;'>，二者缺一不可</H3>
<p>函数体、配置片段、命令输出这类内容，只用 <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}!`; } —— 保格式，<code> 定语义</li>
<li>错误写法：<code>function greet(name) { return `Hello, ${name}!`; } → 渲染为单行，无缩进- 错误写法：
function greet(name) { return `Hello, ${name}!`; } → 搜索引擎当普通预格式文本，不索引为代码
- HTML 特殊字符必须手动转义：
<、>、&，哪怕只是写个比较表达式
样式和可访问性容易被忽略的硬性细节
fetch() ✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数”fetch()❌ 错误：
是块级元素，自带 margin，塞进段落会打断行距、视觉断裂</li>
<li>漏转义 <code><</code> 或 <code>></code>（如写 <code>x < 5</code>）→ 浏览器尝试解析为标签，后续 HTML 可能错乱</li>
<li>别给 <code> 加 <code>white-space: pre</code>：长命令会横向溢出，且基线对不齐</li>
</ul>
<H3>多行代码必须嵌套 <pre class='brush:php;toolbar:false;'>，二者缺一不可</H3>
<p>函数体、配置片段、命令输出这类内容，只用 <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}!`; } —— 保格式，<code> 定语义</li>
<li>错误写法：<code>function greet(name) { return `Hello, ${name}!`; } → 渲染为单行，无缩进function greet(name) { return `Hello, ${name}!`; } → 搜索引擎当普通预格式文本，不索引为代码<、>、&，哪怕只是写个比较表达式没样式也能显示，但体验差。几个关键点：
必须设 <code>overflow-x: auto</code>，不然长代码行直接撑破容器</li> <li><code> 要设 <code>display: block</code>，否则它作为行内元素，不响应 <pre class="brush:php;toolbar:false;"> 的宽高和滚动控制</li> <li>字体建议用 <code>ui-monospace, 'SFMono-Regular', 'Consolas', monospace</code>，比默认等宽更稳</li> <li>别给 <code> 单独设 <code>white-space: pre</code>：它已从 <pre class="brush:php;toolbar:false;"> 继承，重复设置可能干扰层叠</li> <li>缩进统一用空格（2 或 4 个），别用 Tab——不同环境渲染宽度不一致，容易错行</li> </ul> <H3>语法高亮不是 <pre class="brush:php;toolbar:false;"> 的职责，但结构必须配合</H3> <p><code> 标签本身不解析语法，也不加颜色。所谓“高亮”，本质是给 <code>const
、"string"、// comment这些 token 打上不同 class，再配 CSS。这一步必须由 Prism.js 或 highlight.js 完成，且只认<pre class="brush:php;toolbar:false;"> 结构。</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>class="js"
（或类似）在标签上，高亮库才识得语言</li> <li>别在 <code> 上写 <code>class="brush:js;toolbar:false;"
：那是旧版 SyntaxHighlighter 的写法，现代库不认- 如果代码里含
<div class="box">，必须写成<div class="box">，否则高亮库根本收不到完整字符串 真正容易被忽略的是混用边界：有人把整段 Shell 脚本塞进 <code>，有人把 <code>console.log()单独包一层。记住唯一判断标准——要不要保留原始换行和缩进。
