` 标签的区别？

<pre> 和 <code> 标签在前端开发中都用于显示代码，但它们有不同的语义和用途：

<code> 标签: 表示一段计算机代码。浏览器通常会以等宽字体显示 <code> 标签中的内容。它强调的是代码本身的含义，而不是格式。<code> 标签适合用于在文本中嵌入简短的代码片段，例如变量名、函数名或一小段代码示例。它不保留代码的原始格式，例如空格、换行符和缩进。
<pre> 标签: 表示预格式化的文本。浏览器会保留 <pre> 标签中内容的空格、换行符和缩进等格式。它通常与 <code> 标签一起使用，以显示格式化的代码块，从而保持代码的可读性。<pre> 标签强调的是代码的格式和布局。

总结：

特性	`<code>`	`<pre>`
语义	表示代码	表示预格式化的文本
格式保留	不保留	保留
用途	短代码片段，例如变量名	格式化的代码块
字体	通常等宽	通常等宽
与其他标签	常与 `<pre>` 一起使用	常与 `<code>` 一起使用

示例：

<p>使用 <code>Math.sqrt()</code> 函数计算平方根。</p>

<pre>
<code>
// 计算 9 的平方根
let result = Math.sqrt(9);
console.log(result); // 输出 3
</code>
</pre>

在上面的例子中，第一行使用了 <code> 标签来标识 Math.sqrt() 函数名。第二部分使用了 <pre> 和 <code> 的组合来显示一个格式化的 JavaScript 代码块。<code> 标签确保代码以等宽字体显示，而 <pre> 标签保留了代码的缩进和换行，使代码更易读。

最佳实践:

为了最大程度地提高代码的可读性和可访问性，建议将 <code> 标签嵌套在 <pre> 标签内，以便同时表示代码的语义和保留其格式。

希望这个解释能够帮助你理解 <code> 和 <pre> 标签的区别。