行内代码必须用 <code>，不能用 <pre>；<code> 语义正确、等宽渲染、不破坏行高，而 <pre> 是块级元素且易导致溢出和对齐问题。

行内代码必须用

，不能塞进 <pre class="brush:php;toolbar:false;"></H3>
<p>段落里提一个函数、命令或变量时，<code> 是唯一语义正确的选择。比如写“调用 <code>fetch()

时需传入 AbortSignal”，浏览器会以等宽字体渲染，且不撑开上下行距。

• fetch() ✅ 正确：行内、语义清晰、屏幕阅读器读作“fetch 函数”

• fetch()

  ❌ 错误：

   是块级元素，自带 margin，塞进段落会破坏行高和视觉连贯性</li>
  <li>别给 <code> 加 <code>white-space: pre</code>：长命令会横向溢出，且基线对不齐</li>
  <li>漏转义 <code><</code> 或 <code>></code>（如写 <code>x < 5</code>）→ 浏览器尝试解析标签，结构错乱</li>
  </ul>
  
  <H3>多行代码必须用 <pre class='brush:php;toolbar:false;'> 组合，单用任一都不行</H3>
  <p><pre class="brush:php;toolbar:false;"> 负责保留换行缩进，<pre class="brush:php;toolbar:false;"> 负责声明“这是代码”，二者缺一不可。只用 <pre class="brush:php;toolbar:false;">，搜索引擎当普通文本；只用 <code>，所有格式全丢。</p><div class="aritcle_card flexRow">
                                                          <div class="artcardd flexRow">
                                                                  <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
                                                                                  src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                  <div class="aritcle_card_info flexColumn">
                                                                          <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
                                                                          <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
                                                                  </div>
                                                                  <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                          </div>
                                                  </div>
  <ul>
  <li>正确写法：<pre class="brush:php;toolbar:false;"><code>function greet(name) { return `Hello, ${name}!`; }

• 错误写法：function greet(name) { return `Hello, ${name}!`; } → 渲染成一行，无缩进
• 错误写法：

  function greet(name) { return `Hello, ${name}!`; }

  → 缺少

  ，高亮库无法识别语言，SEO 和读屏器难理解</li>
  <li><pre class="brush:php;toolbar:false;"> 默认可能横向溢出，建议加 CSS 控制：比如 <code>overflow-x: auto

  和 tab-size: 2

HTML 字符必须手动转义，

 不做这件事</H3>
<p><code> 标签只管语义，不管内容安全。写 <code><div>

不等于显示 `

`——浏览器真会把它当标签解析，甚至执行里面的 <script></script>。

• 必须把原始字符串先转义： → <code><，> → >，& → &
• 推荐用 textContent 替代 innerHTML 插入：它绕过 HTML 解析器，零风险显示源码
• 如果后续要语法高亮，Prism.js 等库也要求输入已转义的纯文本，否则可能漏着色或引入 XSS 风险
• 别依赖

  <pre class="brush:php;toolbar:false;"> 嵌套自动防转义——它只保格式，不碰内容逻辑</li>
  </ul>
  
  <H3>样式与可访问性容易被忽略的细节</H3>
  <p>浏览器默认给 <code> 设了 <code>font-family: monospace

  ，但别依赖它。系统字体差异大，屏幕阅读器靠语义判断内容类型，不是靠样式。

  立即学习“前端免费学习笔记（深入）”；

  • 显式设置字体栈：font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace
  • 避免设过大字号或强对比色，影响可读性
  • 中的内容必须准确简洁，别塞未解释的缩写或冗余符号
  • 别用 包 UI 文字（如“点击【确定】按钮”），那是 <button> 或 <span> 的职责</span></button>
  实际写文档时，最常出问题的是把多行函数体直接扔进 里，或者忘了转义 `