先看這個例子
本例要顯示 <h2>工作坊筆記</h2> & 例子 這段像原始碼的文字。HTML 用字元參照表示角括號及 &,讓它們當作文字解析,不建立標記。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 原始碼寫法 | 查看 <、> | 解析為文字節點內的 <、> 字元 |
| 顯示的程式文字 | 讀 code.textContent | <h2>工作坊筆記</h2> & 例子 |
| 內層標題 | 數 code 內的 h2 | 零個;沒有建立標題 |
瀏覽器怎樣處理
code 表示電腦程式片段,不會把 HTML 解析器轉成純文字模式。字元參照才令特殊字元按原樣顯示。pre 提供預格式文字語意,本地教學樣式則容許長字串換行,方便閱讀。這種顯示文字的方法,不等於已驗證任意 HTML。
code 內直接寫標記,仍會建立元素
反例在 code 內直接寫 h2。code 不會替內容跳脫標記;錯例另放獨立文件,避免其不合適結構影響教學頁。
<pre><code><h2>工作坊筆記</h2> & 例子</code></pre>反例真正建立一個 h2,code.textContent 沒有原樣的開啟和結束標記。正例沒有 h2 子元素,兩個標記字串都保留。
試着修正
想在這個 HTML 程式區顯示 A & B,原始碼應寫 A & B,還是建立叫 amp 的元素?
查看參考答案
文字原始碼寫 A & B。& 是字元參照,解析後變成一個 &,不是元素。
- 原始碼、textContent 和子元素數量一起比較。
- 窄框內仍讀得完整文字,不裁內容。