定义和用法

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. c++ templat乱测

    该上机实验环境 linux mint  IDE:qt5.11   代码复制到windows下vs2017报错,提示char* 类型不能直接赋值字符串 在linux mint下可以运行,测试目的:检验复 ...

  2. if语句:求x的绝对值

    #include<stdio.h>void main(){ int x,y; scanf("%d", &x); printf("x=%d\n" ...

  3. 【爬虫】大杀器——phantomJS+selenium

    [爬虫]大杀器——phantomJS+selenium 视频地址 江湖上有一个传说,得倚天屠龙者可称霸武林.爬虫中也有两个大杀器,他们结合在一起时,无往不利,不管你静态网站还是动态网站,通吃. pha ...

  4. redis详解(包含使用场景)

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...

  5. 017_Python3 数据结构

    本章节我们主要结合前面所学的知识点来介绍Python数据结构.   *****************************   1.列表 Python中列表是可变的,这是它区别于字符串和元组的最重 ...

  6. (24)打鸡儿教你Vue.js

    学习Vue基础语法 Vue中的组件 Vue-cli的使用 1.使用Vue2.0版本实现响应式编程 2.理解Vue编程理念与直接操作Dom的差异 3.Vue常用的基础语法 4.使用Vue编写TodoLi ...

  7. ffmpeg视频压缩与分割

    ffmpeg -i .mov -vcodec libx264 -crf out.mp4 --分辨率不动进行压缩 ffmpeg -i .mp4 -c copy -c:v libx264 -vf scal ...

  8. LOJ#2983. 「WC2019」数树 排列组合,生成函数,多项式,FFT

    原文链接www.cnblogs.com/zhouzhendong/p/LOJ2983.html 前言 我怎么什么都不会?贺忙指导博客才会做. 题解 我们分三个子问题考虑. 子问题0 将红蓝共有的边连接 ...

  9. SpringCloud:Ribbon负载均衡

    1.概述 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端       负载均衡的工具. 简单的说,Ribbon是Netflix发布的开源项目,主要功能是提供客 ...

  10. redis主从复制读写分离

    主从复制,读写分离 Master/Slave 是什么 master写入 slave读取 能干嘛 读写分离,更加安全,性能提升 怎么玩 一主二仆.薪火相传.反客为主 周明老师,能够把长篇大论总结的很精辟 ...