<pre> - HTML(超文本标记语言) 编辑

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

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

内容类别流内容( flow content) , 可触知的内容(palpable content).
允许的 内容Phrasing content.
省略标签不允许,开始标签和结束标签都不能省略。
允许的 父元素任何可以接受流内容( flow content) 的元素
允许的 ARIA 角色任何
DOM 接口HTMLPreElement

属性

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

cols
定义每行的最大字符数。这是一个非标准的属性,作用与width相同。要实现这样的效果,应该使用CSS。
width
包含每行的最大字符数。虽然在技术上仍被实现,但这个属性没有视觉效果。要实现这样的效果,应该使用CSS。
wrap
提示溢出怎样发生。在现代浏览器中,这个提示会被忽略,且被没有视觉效果。要实现这样的效果,应该使用CSS。

示例

HTML

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

结果

可访问性

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 <figure> and <figcaption> elements, supplemented by a combination of an 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>

规范

规范状态备注
HTML Living Standard
<pre>
Living StandardNo significant change from HTML Living Standard
HTML5
<pre>
RecommendationNo significant change from HTML 4.01 Specification
HTML 4.01 Specification
<dl>
RecommendationDeprecated the cols attribute

浏览器兼容性

BCD tables only load in the browser

参见

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:105 次

字数:8287

最后编辑:8年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文