initial commit

1 files changed, 149 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/pre/index.html b/files/zh-cn/web/html/element/pre/index.html
new file mode 100644
index 0000000000..5d3d8d73e5
--- /dev/null
+++ b/files/zh-cn/web/html/element/pre/index.html
@@ -0,0 +1,149 @@
+---
+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>