跳至內容
Astera Technology

教 HTML 時,怎樣讓標記原樣顯示?

HTML 教學要顯示標記本身,須處理角括號和 &;放進 code 並不會自動轉成純文字。

畫面上的 h2 標記是文字,code 區內沒有真正標題。

下載完整個案資料及參考答案 ↓

先看這個例子

本例要顯示 <h2>工作坊筆記</h2> & 例子 這段像原始碼的文字。HTML 用字元參照表示角括號及 &,讓它們當作文字解析,不建立標記。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
原始碼寫法查看 &lt;、&gt;解析為文字節點內的 <、> 字元
顯示的程式文字讀 code.textContent<h2>工作坊筆記</h2> & 例子
內層標題數 code 內的 h2零個;沒有建立標題
下載可編輯 CSV ↓

瀏覽器怎樣處理

code 表示電腦程式片段,不會把 HTML 解析器轉成純文字模式。字元參照才令特殊字元按原樣顯示。pre 提供預格式文字語意,本地教學樣式則容許長字串換行,方便閱讀。這種顯示文字的方法,不等於已驗證任意 HTML。

code 內直接寫標記,仍會建立元素

反例在 code 內直接寫 h2。code 不會替內容跳脫標記;錯例另放獨立文件,避免其不合適結構影響教學頁。

反例原始碼,請另開例子核對
<pre><code><h2>工作坊筆記</h2> &amp; 例子</code></pre>

反例真正建立一個 h2,code.textContent 沒有原樣的開啟和結束標記。正例沒有 h2 子元素,兩個標記字串都保留。

試着修正

想在這個 HTML 程式區顯示 A & B,原始碼應寫 A &amp; B,還是建立叫 amp 的元素?

查看參考答案

文字原始碼寫 A &amp; B。&amp; 是字元參照,解析後變成一個 &,不是元素。

  • 原始碼、textContent 和子元素數量一起比較。
  • 窄框內仍讀得完整文字,不裁內容。

原始例子檔案

相關資源