HTML code标签在前端开发中的基础应用-html教程-PHP中文网

行内代码必须用 <code>，不可用 <pre>；<code> 语义正确、排版安全、屏幕阅读器友好；<pre> 是块级元素会破坏行距；禁用 white-space: pre；HTML 特殊字符须转义。

html code标签在前端开发中的基础应用

单行代码必须用

，不能塞进 <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>HTML 特殊字符必须转义：想写 <code>x < 5</code>，得写成 <code>x < 5</code>，否则浏览器尝试解析 < 就会破坏 DOM</li>
</ul>

<H3>多行代码必须用 <pre class='brush:php;toolbar:false;'> 嵌套，缺一不可</H3>
<p><pre class="brush:php;toolbar:false;"> 标签本身不保留换行、缩进或连续空格——这是它的设计行为，不是 bug。你写成：</p>
<pre class="brush:php;toolbar:false;"><code>function add(a, b) {
  return a + b;
}

实际渲染出来就是 function add(a, b) { return a + b; }，所有结构全丢。

正确结构是

function add(a, b) {&#10;  return a + b;&#10;}

：其中

 保格式，<pre class="brush:php;toolbar:false;"> 定语义</li>
<li>单独用 <pre class="brush:php;toolbar:false;"> → 屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码”</li>
<li>单独用 <code> → 格式全崩，缩进和换行消失</li>
<li>如果要用语法高亮（如 highlight.js），必须加 <code>class

到 标签上，例如 <code class="js">

 里的 HTML 字符不转义，页面就可能崩溃</H3>
<p>只要 <code> 或 <pre class="brush:php;toolbar:false;"><code> 内容含 <、>、&，就必须手动转义。漏掉一个 < 就可能导致后续 HTML 结构错乱，甚至整段内容消失。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
                                                                        <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
                                                                </div>
                                                                <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><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><div class="box">

✅ 正确：浏览器原样显示

<div class="box"> ❌ 危险：浏览器尝试解析为标签，<div> <li>转义不是可选项：哪怕只是写个比较表达式 <code>if (x >= 0)，也得写 >=
编辑器里复制代码后，建议先过一遍正则替换：& → &， → >

样式和可访问性容易被忽略的硬约束

 默认用等宽字体，但不同系统默认字体差异大；它也不自动处理长文本折行或滚动。这些不是“锦上添花”，而是影响可用性的关键点。</p>
<ul>
<li>必须显式设置 <code>font-family

ui-monospace, 'SFMono-Regular', Consolas, monospace

monospace

 要加 <code>overflow-x: auto</code>，否则长代码行直接撑破容器

要设 <code>display: block（当它在

 内时），否则不响应父级宽高与滚动控制

别用 Tab 缩进：不同环境渲染宽度不一致，统一用 2 或 4 个空格

真正难的是边界判断——不是看“代码行数”，而是问“要不要保留原始换行和缩进”。一个 1 行的 Shell 命令带管道符，也得用

<code>；而一个 3 行的 <code>useState()</code> 调用，只要没换行需求，<code> 就够了。</code></code>