1. 程式人生 > >使用<pre>標簽為你的網頁加入大段代碼

使用<pre>標簽為你的網頁加入大段代碼

set 網頁 cnblogs div -1 images 如果 ext 元素

使用<pre>標簽為你的網頁加入大段代碼

在上節中介紹加入一行代碼的標簽為<code>,但是在大多數情況下是需要加入大段代碼的,如下圖:

技術分享

怎麽辦?不會是每一代碼都加入一個<code>標簽吧,沒有這麽復雜,這時候就可以使用<pre>標簽。

語法:

<pre>語言代碼段</pre>

<pre> 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

如下代碼:

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

在瀏覽器中的顯示結果為:

技術分享

在上面的例子中可以看到代碼中的空格,換行符都保留下來。如果用以前的方法,回車需要輸入<br>簽,空格需要輸入&nbsp;

註意:<pre> 標簽不只是為顯示計算機的源代碼時用的,在你需要在網頁中預顯示格式時都可以使用它,只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。

任務

我來試試:用<pre>標簽為網頁添加代碼段

1. 使用<pre>標簽,修改右邊編輯器中的代碼,使其代碼顯示結果與以前顯示一致。

代碼:

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre標簽的使用</title>
</head>

<body>
var message="歡迎";
for(var i=1;i<=10;i++)<br>
{<br>
alert(message); <br>
}<br>

</body>
</html>

技術分享

使用<pre>標簽為你的網頁加入大段代碼