<pre>:預格式化文本元素
<pre>
HTML 元素表示預格式化文本,將以 HTML 檔案中的原樣呈現。這段文字通常使用非比例或等寬字體進行渲染。該元素內的空格會按照原樣呈現。
預設情況下,<pre>
是區塊級元素,即其預設的 display
(en-US) 值為 block
。
嘗試一下
如果你需要在 <pre>
標籤內顯示保留字元,如 <
、>
、&
和 "
,這些字元必須使用相應的 HTML 實體 (en-US)進行轉義。
屬性
此元素僅包括全域屬性 (en-US)。
可及性考量
對於使用預格式化文本創建的任何圖片或圖表,提供替代描述是重要的。替代描述應清晰簡明地描述圖片或圖表的內容。
使用輔助技術(如屏幕閱讀器)瀏覽的視覺受損人士可能無法理解預格式化文本字符在順序讀出時代表什麼。
<figure>
和 <figcaption>
元素的組合,再加上 pre
元素上的 ARIA (en-US) role
和 aria-label
(en-US) 屬性,允許預格式化的 ASCII 藝術被宣告為帶有替代文本的圖片,figcaption
則作為圖片的標題。
範例
html
<figure>
<pre role="img" aria-label="ASCII COW">
___________________________
< I'm an expert in my field. >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
A cow saying, "I'm an expert in my field." The cow is illustrated using
preformatted text characters.
</figcaption>
</figure>
範例
基本範例
HTML
html
<p>Using CSS to change the font color is easy.</p>
<pre>
body {
color: red;
}
</pre>
結果
轉義保留字元
HTML
html
<pre>
let i = 5;
if (i < 10 && i > 0)
return "Single Digit Number"
</pre>
結果
技術摘要
內容類型 | 流內容、捫及內容。 |
---|---|
允許內容 | 段落型內容。 |
標籤省略 | 不允許,開始和結束標籤都是必須的。 |
允許的父元素 | 任何接受流內容的元素。 |
隱含 ARIA 角色 | generic (en-US) |
允許的 ARIA 角色 | 任何 |
DOM 介面 | HTMLPreElement (en-US) |
規範
Specification |
---|
HTML Standard # the-pre-element |
瀏覽器相容性
BCD tables only load in the browser