From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/pre/index.html | 149 ++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/zh-cn/web/html/element/pre/index.html (limited to 'files/zh-cn/web/html/element/pre/index.html') 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: 
+slug: Web/HTML/Element/pre
+tags:
+  - HTML
+  - HTML分组内容
+  - 元素
+translation_of: Web/HTML/Element/pre
+---
+
{{HTMLRef}}

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

+
+
{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}

+
+
+
+

+
注意： 你需要将该元素里的 '<' 字符转义为 '&lt;' 以保证代码里的关闭代码不被浏览器解释为标签。

+

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
内容类别流内容( flow content) , 可触知的内容(palpable content).
允许的 内容Phrasing content.
省略标签{{no_tag_omission}}
允许的 父元素任何可以接受流内容( flow content) 的元素
允许的 ARIA 角色任何
DOM 接口{{domxref("HTMLPreElement")}}

+
+
属性

+
+
这个元素只具有全局属性。

+
+

+ 
{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}

+ 
定义每行的最大字符数。这是一个非标准的属性，作用与{{htmlattrxref("width", "pre")}}相同。要实现这样的效果，应该使用CSS。

+ 
{{htmlattrdef("width")}} {{obsolete_inline}}

+ 
包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。

+ 
{{htmlattrdef("wrap")}} {{non-standard_inline}}

+ 
提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。

+

+
+
示例

+
+
HTML

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

+
+
结果

+
+
{{EmbedLiveSample("Example")}}

+
+
可访问性

+
+
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.

+
+
A combination of the {{HTMLElement("figure")}} and {{HTMLElement("figcaption")}} elements, supplemented by a combination of an {{htmlattrxref("id")}} and the ARIA role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description.

+
+
示例

+
+
<figure role="img" aria-labelledby="cow-caption">
+  <pre>
+  ___________________________
+< 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>

+
+
+
+
+
+
规范

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
规范状态备注
{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}{{Spec2('HTML WHATWG')}}No significant change from {{SpecName("HTML WHATWG")}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}{{Spec2('HTML5 W3C')}}No significant change from {{SpecName("HTML4.01")}}
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}{{Spec2('HTML4.01')}}Deprecated the cols attribute

+
+
浏览器兼容性

+
+
{{Compat("html.elements.pre")}}

+
+
参见

+
+
-- 
cgit v1.2.3-54-g00ecf