程式碼內容 <code>

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

認識 <code>

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

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

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

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

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

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

code {
  font-family: monospace;
}

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～