<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> 標籤的區別。