2-15：HTML 中 pre, code 和 kbd 標籤的用法

01:46:36

<pre> 標籤

<pre>（preformatted text）用來呈現 「保持原始空白與換行」 的文字片段。瀏覽器在顯示 <pre> 區塊時會：

  1. 保留 HTML 原始碼中的所有空白字元（空格、TAB）與換行符號。
  2. 使用 等寬字型（monospace） 作為預設字體。
  3. 讓內容 不自動換行；超出容器寬度時會造成水平捲軸。

範例

<pre>
line 1
	line 2（前面有 4 個空格）
line 3
</pre>

使用注意事項

  1. 避免過度使用：整頁滿是 <pre> 會降低可閱讀性，僅在需要維持排版時才使用。
  2. 結合語法強調工具：若要高亮顯示程式語法，可配合 JS 函式庫（Prism、Highlight.js）或伺服器端 renderer。
  3. RWD 注意寬度：等寬字體加上不自動斷行，手機版容易超出畫面。可用 pre-wrap 或 CSS 滾動外框處理。
  4. HTML 實體字元：<,> 等字元在 <pre> 內仍需 &lt;, &gt; 轉義，否則會被解析成標籤。

 

code 標籤

  • <code> 標籤 (tag) 用來顯示電腦程式碼 (computer code) 內容，而瀏覽器預設會以 monospace 等寬字型 (fixed-width font) 來顯示 <code> 中的內容。
  • 常與 pre 一起使用。

 

kbd 標籤

表示「使用者要輸入的按鍵或按鍵組合」，例如鍵盤、滑鼠按鈕、遙控器按鈕、語音指令字串等。

範例

<p>儲存檔案請按 <kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>