• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <pre>

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

    浏览器支持

    目前大多数浏览器支持<pre>标签。

    示例

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

    标签定义及使用说明

    • <pre>标签可定义预格式化的文本。被包围在<pre>元素中的文本通常会保留空格"\n"(换行符)。而文本也会呈现为等宽字体。
    • <pre>标签的一个常见应用就是用来表示计算机的源代码。
    • <pre>标签来显示非常规的格式化内容。
    • 注意:你需要将该元素里的'<'字符转义为'&lt;','>'字符转义为'&gt;',以保证代码里的关闭代码不被浏览器解释为标签。
    内容类别流内容(flow content),可触知的内容(段落内容元素).
    允许的内容段落内容元素.
    省略标签不允许,开始标签和结束标签都不能省略。
    允许的父元素任何可以接受流内容(flow content)的元素
    允许的 ARIA 角色任何
    DOM 接口HTMLPreElement

    可访问性

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

    在视觉条件差的情况下,借助屏幕阅读器等辅助技术浏览的人可能无法理解按顺序读出的预格式化文本字符所表示的内容。

    组合在<figure><figcaption>元素中,辅以id和ARIAroleARIA labelledby属性的组合,允许将预格式化文本作为图像宣布,而<figcaption>作为图像的替代描述

    属性

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

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

    HTML 4.01 与 HTML 5 之间的差异

    在 HTML 4.01 中,不赞成使用 width 属性,在 HTML 5 中不再支持该属性。

    属性

    属性描述
    widthnumberHTML5 不支持该属性。HTML 4.01 已废弃该属性。定义每行的最大字符数(通常是 40、80 或 132)。

    全局属性

    <pre>标签支持全局属性。

    事件属性

    <pre>标签支持所有HTML事件属性。

    实例

    预格式化的文本:

    <pre>
    text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both spaces and
    line breaks
    </pre>
    

    示例

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

    上篇:<p>