在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：

怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。

语法：

<pre>语言代码段</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

如下代码：

<pre>

    var message="欢迎";

    for(var i=1;i<=10;i++)

    {

        alert(message);

    }

</pre>

在浏览器中的显示结果为：

在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<br>签，空格需要输入&nbsp;

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

示例:

<!DOCTYPE HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>pre标签的使用</title>

</head>

<body>

<pre>

var message="欢迎";

for(var i=1;i<=10;i++)

{

    alert(message);

}

</pre>

</body>

</html>

使用<pre>标签为你的网页加入大段代码的更多相关文章

  1. css pre标签

    浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...

  2. <pre>标签：\r\n换行符的保留

    mysql数据读库的\r\n换行符处理 这个问题是我在采集数据时发现的,采集网页的数据,大概有6千多条,采集的内容保留了最原始的\r\n和\n换行字符,但在mysql管理工具中(phpmyadmin和 ...

  3. Pre标签 自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  4. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

  5. HTML学习笔记——锚链接、pre标签、实体

    1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. 返回Json数据浏览器带上<pre></pre>标签解决方法

    问题:  当后台获取到前台传来的文件时(例如上传功能, 导入功能), 返回类型为application/json, 这个时候响应到前端的JSON格式的数据格式可能是: <pre style=&q ...

  7. 让pre标签自动换行示例代码

    pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码.对于技术博客经 ...

  8. pre标签 首行会自动换行解决方案

    利用pre标签可以 解决文本文档里面的空格及换行在页面上不显示的方案, 自行换行 加 white-space: pre-wrap; word-wrap: break-word; 英文字母换行 word ...

  9. 【HTML】让<pre>标签文本自动换行

    利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...

随机推荐

  1. Unity3d webplayer发布的问题和100%自适应浏览器

    Unity3d发布的问题 发布的时候,遇到无法写入Resources.assets,原来是我的项目中有多个Resources文件夹,以后最好是不要有重复的文件夹和一样名字的资源! 还有就是发布的web ...

  2. ubuntu進入dos界面命令 ubuntu進入圖形界面命令

    切换界面: ctrl + alt + F1是切到终端模式 Alt+F7 切到图形界面

  3. Lua参考手册

    英文原版: http://www.lua.org/manual/5.1/ 中文版下面2个地址都有:一样的 manual.luaer.cn lua在线手册 lua参考手册Lua参考手册的中文翻译(云风翻 ...

  4. For循环复杂练习

    for是循环当中经常用到的一个结构,练熟了才可以. 练习-需求描述: 在控制台打印以下形式的字符: * * * * * * * * * * * * * * * 思路,首先分析需求的规律 1.首先分析需 ...

  5. BZOJ1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果

    1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 4 ...

  6. ♫【JS基础】壹零零壹

    如何面试一个前端开发者? function spacify(str) { return str.split('').join(' ') } console.log(spacify('hello wor ...

  7. 数学概念——E 期望（经典问题）

    E - 期望(经典问题) Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit S ...

  8. ARM机器码分析

    我们编写的汇编程序还是不够底层,CPU都是对机器码进行操作的,所以还需要用汇编器将汇编代码转换成机器码才能被CPU处理.下面举几个例子来说说分析ARM机器码的方法. 对编译连接之后得到的ELF进行反汇 ...

  9. VS2015接口智能提示少了异常信息 怎么破~

    问题:我想让VS2015提示的时候也显示关于“异常”的批注信息,亲们 如何破? 下图是VS3013的提示 下图是VS2015的提示 下图是接口注释

  10. tyvj P1517 飘飘乎居士的乌龟（最大流）

    P1517 飘飘乎居士的乌龟 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 飘飘乎居士养了乌龟.当然,这些乌龟是用来出售赚取利润的. 描述 飘飘乎居士的乌龟 ...