码迷,mamicode.com
首页 > 其他好文 > 详细

5.code和pre标签

时间:2015-02-05 13:06:55      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:

<code>var i=i+300;</code>

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。

语法:

<code>代码语言</code>

注:如果是多行代码,可以使用<pre>标签。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>code标签介绍</title>
 6 </head>
 7 <body>
 8 <p>我们可能知道水平渐变的实现,类似这样:
 9 <code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
10 </body>
11 </html>

 

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

技术分享

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

语法:

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

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

如下代码:

<pre>
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre>

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

技术分享

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

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

5.code和pre标签

标签:

原文地址:http://www.cnblogs.com/binhuguang/p/4274299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!