• HTML“pre”标签


    定义与用法

    The pre element defines preformatted text. The text enclosed in the pre element usually preserves spaces and line breaks. The text renders in a fixed-pitch font.
    用pre元素可定义预先格式文字。所有在pre元素内文字的空白间隔以及换行都会被保留。


    在HTML和XHTML中的区别

    The "width" attribute of the pre element was deprecated in HTML 4.01.
    在HTML4.01中pre元素的"width"属性不被支持。

    The "width" attribute of the pre element is not supported in XHTML 1.0 Strict DTD.
    XHTML1.0严密型DTD将不再支持pre元素中的”width“属性。


    有关<pre>的注意点

    It is worth noting that while <xmp> is deprecated, the <pre> tag does not perform all of the functions of <xmp>:
    当<xmp>不被推荐时已经让<pre>不再有什么价值,<pre>不能起到和<xmp>相同的功能:

    <pre><b>Hello</b></pre> 会显示为 Hello

    <xmp><b>Hello</b></xmp> 则显示为 <b>Hello</b>


    实例

    代码 输出结果
    <pre>
    This text is
    in a fixed-pitch
    font, and it preserves
    both      spaces and
    line breaks
    </pre>
    This text is 
    in a fixed-pitch
    font, and it preserves
    both spaces and
    line breaks


    可选属性

    DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
    下表中的DTD列指明了被支持的DTD属性。S=Strict(精确的),T=Transitional(传统的),F=Frameset(框架)

    属性 描述 DTD
    width number Defines the maximum number of characters per line (usually 40, 80, or 132)
    定义pre每行所能接受的最大字符数(一般为40,80或是132)
    TF

    标准属性

    id, class, title, style, dir, lang, xml:lang, xml:space

    For a full description, go to Standard Attributes.
    查看完整的属性

    事件属性

    onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

    For a full description, go to Event Attributes.
    查看完整的属性


    尝试与演示

    Preformatted text
    How to control line breaks and spaces with the pre tag.
    通过使用pre标签来控制换行与留白空间

  • 相关阅读:
    Angular.js为什么如此火呢?
    Javascript实现页面跳转的几种方式
    Bootstrap:弹出框和提示框效果以及代码展示
    Bootstrap模态框(modal)垂直居中
    JS倒计时跳转页面
    复选框、单选框与文字对齐问题
    RFC/IEC/ISO
    shell
    websocket programming in python
    产品固件(系统)升级——curl/wget
  • 原文地址:https://www.cnblogs.com/huashanlin/p/706736.html
Copyright © 2020-2023  润新知