<pre>: The Preformatted Text element

如果必须在 <pre> 标记内显示保留字符，例如 <、>、& 和 "，则必须使用各自的 character references 对这些字符进行转义。

¥If you have to display reserved characters such as <, >, &, and " within the <pre> tag, the characters must be escaped using their respective character references.

<pre> 元素通常包含 <code>、<samp> 和 <kbd> 元素，分别表示计算机代码、计算机输出和用户输入。

¥<pre> elements commonly contain <code>, <samp>, and <kbd> elements, to represent computer code, computer output, and user input, respectively.

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

width Deprecated Non-standard

包含一行应具有的首选字符数。虽然技术上仍然实现，但该属性没有视觉效果；要达到这样的效果，请改用 CSS width。

wrap Non-standard Deprecated

是一个提示，指示溢出必须如何发生。在现代浏览器中，此提示被忽略，并且不会产生任何视觉效果；要达到这样的效果，请改用 CSS white-space。

¥Accessibility

为使用预格式化文本创建的任何图片或图表提供替代描述非常重要。替代描述应清楚、简洁地描述图片或图表的内容。

¥It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

患有低视力状况并借助屏幕阅读器等辅助技术进行浏览的人们可能无法理解按顺序读出预格式化文本字符时所代表的内容。

¥People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

<figure> 和 <figcaption> 元素的组合，辅以 pre 元素上的 ARIA role 和 aria-label 属性，允许将预格式化的 ASCII 艺术声明为带有替代文本的图片，并且 figcaption 充当图片的标题。

¥A combination of the <figure> and <figcaption> elements, supplemented by the ARIA role and aria-label attributes on the pre element allow the preformatted ASCII art to be announced as an image with alternative text, and the figcaption serving as the image's caption.

¥Example

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (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>

• MDN 了解 WCAG，指南 1.1 解释
• H86:为 ASCII 艺术、表情符号和 Leetspeak 提供替代文本 | WCAG 2.0 的 W3C 技术

¥Examples

¥Basic example

HTML

<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

结果

¥Result

¥Escaping reserved characters

HTML

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

结果

¥Result

¥Technical summary

¥See also

• CSS:white-space、word-break
• Character reference
• 相关元素：<code>, <samp>, <kbd>