定义和用法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

<pre>

&lt;html&gt;

&lt;head&gt;

  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;

    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);

    document.write(&quot;xmlDoc is loaded, ready for use&quot;);

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。上面这段代码的显示效果如下：

<html>

<head>

  <script type="text/javascript" src="loadxmldoc.js">

</script>

</head>

<body>

  <script type="text/javascript">

    xmlDoc=loadXMLDoc("books.xml");

    document.write("xmlDoc is loaded, ready for use");

  </script>

</body>

</html>

提示

  • 制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
  • 如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&amp;" 代表 "&"。

html中的<pre>标签的更多相关文章

  1. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  2. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  3. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  4. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  5. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  6. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  7. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  8. 在php中，如何将一个页面中的标签，替换为用户想输出的内容

    前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...

  9. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

  10. Smarty中一些标签的使用

    Smarty中的标签和php中的标签不一样 foreach标签{foreach   from=$goods(变量名) key='键,不带$' item='值,不带$'}中间的显示内容{/foreach ...

随机推荐

  1. Django --- 多对多关系创建，forms组件

    目录 多对多三种创建方式 1.系统直接创建 2.自己手动创建 3.自己定义加与系统创建 forms组件 1. 如何使用forms组件 2. 使用forms组件校验数据 3. 使用forms组件渲染标签 ...

  2. python根据字典的值进行排序：

    有一个列表嵌套字典:[{"a": 5}, {"b": 4}, {"c": 1},{"e": 2}, {"d&q ...

  3. HTML中的标签列表

    1 :基础标签 <!DOCTYPE> :定义文档类型 <title>:定义文档标题 <h1>to<h2>定义HTML标题,其中h1到h6表示字体大小依次 ...

  4. DVWA-XSS练习

    本周学习内容: 1.学习web应用安全权威指南: 2.学习乌云漏洞: 实验内容: DVWA实验XSS跨站脚攻击 实验步骤: Low 1.打开DVWA,进入DVWA security模块,将难度修改为L ...

  5. Navicat连接mysql报错1251 -client does not support authentication protocol

    原文https://blog.csdn.net/qq_35654080/article/details/82588188 详解请参考https://blog.csdn.net/chszs/articl ...

  6. loj #10131

    抽离题意 求删除一条树边和一条非树边后将图分成不连通的两部分的方案数 对于一棵树,再加入一条边就会产生环.若只有一个环,说明只加入了一条非树边 (x, y),记 lca 为 l, 那么 对于任意一条 ...

  7. 使用pytesseract进行图像识别

    引言 对于简单验证码及一些图像的识别,我们需要使用pytesseract及相应的Tesseract引擎,它是开源的OCR引擎.帮助我们做一些简单的图像识别 当然为了更好将图片识别,对一些像素比较低的图 ...

  8. AutoCAD .NET二次开发（一）

    其他话不多说,直接进入主题,既然是二次开发,当然是用CAD平台已经封装好了很多类,我们需要熟悉和使用它们.常用的AutoCAD .NET API的四个主要DLL文件是: 名称 作用 备注 AcDbMg ...

  9. Python里面如何生成随机数？

    import randomrandom.random()它会返回一个随机的0和1之间的浮点数

  10. CFD计算过程发散诸多原因分析【转载】

    转载自: http://blog.sina.com.cn/s/blog_5fdfa7e601010rkx.html 今天探讨引起CFD计算过程中发散的一些原因.cfd计算是将描述物理问题的偏微分方程转 ...