在上节中介绍加入一行代码的标签为<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. 从ulimit命令看socket的限制

      从ulimit命令看socket的限制 在Linux下面部署应用的时候,有时候会遇上Socket/File: Can’t open so many files的问题,比如还有Squid做代理,当文 ...

  2. 【宽搜】ECNA 2015 D Rings (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: 给你一张N*N(N<=100)的图表示一个树桩,'T'为年轮,'.'为空,求每个'T'属于哪一圈年轮,空 ...

  3. bzoj 1089 [SCOI2003]严格n元树（DP+高精度）

    1089: [SCOI2003]严格n元树 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1250  Solved: 621[Submit][Statu ...

  4. python用paramiko将执行的结果存入excel表格

    一.paramiko 利用paramiko可以远程控制服务器,上传和下载文件. 1.paramiko密码登录方式: #!/usr/bin/env python #coding:utf-8import ...

  5. scipy安装失败

    pip install scipy安装失败 可以从uci网站下载wheel安装包然后执行pip install xx.whl进行安装 http://www.lfd.uci.edu/~gohlke/py ...

  6. DBCP,C3P0,Tomcat_JDBC 性能及稳定性测试

    1.测试环境: 硬件环境: 数据库服务器:2U*8核 8G内存 测试服务器:   2U*8核 6G内存 软件环境: jdk: 1.6.29 mysql: 5.0.77 mysql_driver: my ...

  7. XCODE 代码行统计

    find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...

  8. 一个IT男的创业感言

    2014年的一月 我和高中的一个同学開始人生的第一次创业.就写点第一次创业的经验吧! 创业的最初 须要心中大概有个规划 这个规划可能是非常粗糙的 但大的方向一定要有.详细就是你进入的行业 行业已经存在 ...

  9. C primer plus 读书笔记第十章

    这一章的标题是数组和指针.指针是C语言的精髓所在,而数组的概念和指针又息息相关,所以放在一起讲. 1.数组 主要内容有:1.1.数组初始化.1.2.指定初始化.1.3.数组赋值.1.4.数组边界.1. ...

  10. caffe源代码分析--math_functions.cu代码研究

    当中用到一个宏定义CUDA_KERNEL_LOOP 在common.hpp中有. #defineCUDA_KERNEL_LOOP(i,n) \ for(inti = blockIdx.x * bloc ...