<code> 程式碼內容元素會使用「monospace 等寬字體」，在 HTML 裡進行程式碼的顯示，這篇教學會介紹 <code> 程式碼內容元素。

原文參考：程式碼內容 code

認識 <code>

<code> 程式碼內容元素會使用「monospace 等寬字體」，在 HTML 裡進行程式碼的顯示，但如果像是 < 或 > 字元，仍雃需要使用對應的編碼 ( 參考「HTML 特殊字元」)，通常 <code> 會搭配 <pre> 一起使用。

• <code> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <code> 的顯示類型為「inline 行內元素」，預設不會自動換行。

例如下方的 HTML 開啟後，會使用 <code> 搭配 <pre> 顯示程式碼。

<pre>
  <code>
<form action="test.aspx" method="get" target="_blank">
  <input type="text" list="test">
  <datalist id="test">
    <option value="apple"></option>
    <option value="banana"></option>
    <option value="orange"></option>
  </datalist>
</form>
  </code>
</pre>

<code> 支援屬性和預設樣式

<code> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，下方是 <code> 的預設樣式：

code {
  font-family: monospace;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學