path: root/files/zh-cn/web/html/element/pre/index.html

---
title: <pre>
slug: Web/HTML/Element/pre
tags:
  - HTML
  - HTML分组内容
  - 元素
translation_of: Web/HTML/Element/pre
---
<div>{{HTMLRef}}</div>

<p><strong>HTML &lt;pre&gt;</strong> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 &lt;pre&gt; 开始标签后的换行符也会被省略)</p>

<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<div class="note">
<p><strong>注意：</strong> 你需要将该元素里的 '&lt;' 字符转义为 '&amp;lt;' 以保证代码里的关闭代码不被浏览器解释为标签。</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">内容类别</a></th>
   <td>流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) , 可触知的内容(palpable content).</td>
  </tr>
  <tr>
   <th scope="row">允许的 内容</th>
   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">省略标签</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的 父元素</th>
   <td>任何可以接受流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) 的元素</td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA 角色</th>
   <td>任何</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLPreElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>这个元素只具有全局属性。</p>

<dl>
 <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
 <dd>定义每行的最大字符数。这是一个非标准的属性，作用与{{htmlattrxref("width", "pre")}}相同。要实现这样的效果，应该使用CSS。</dd>
 <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
 <dd>包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。</dd>
 <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
 <dd>提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。</dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

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

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="可访问性">可访问性</h2>

<p>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.</p>

<p>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.</p>

<p>A combination of the {{HTMLElement("figure")}} and {{HTMLElement("figcaption")}} elements, supplemented by a combination of an {{htmlattrxref("id")}} and the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> and <code>aria-labelledby</code> attributes allow the preformatted text to be announced as an image, with the <code>figcaption</code> serving as the image's alternate description.</p>

<h3 id="示例_2">示例</h3>

<pre><code>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
  &lt;pre&gt;
  ___________________________
&lt; I'm an expert in my field. &gt;
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  &lt;/pre&gt;
  &lt;figcaption id="cow-caption"&gt;
    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
  &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
</ul>



<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No significant change from {{SpecName("HTML WHATWG")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>No significant change from {{SpecName("HTML4.01")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Deprecated the <code>cols</code> attribute</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.pre")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
</ul>