1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title blockquote標(biāo)簽的使用 /title  6 /head  7 body  8 h2 心似桂花開 /h2  9 p 大家都在忙于自認(rèn)為最重要的事情，卻沒(méi)能享受到人生的樂(lè)趣，反而要吞下苦果？ /p 10 “暗淡輕黃體性柔，情疏跡遠(yuǎn)只香留。何須淺碧深紅色，自是花中第一流。”11 p 這是李清照《詠桂》中的詞句，在李清照看來(lái)，桂花暗淡青黃，性情溫柔，淡泊自適，遠(yuǎn)比那些大紅大紫爭(zhēng)奇斗艷花值得稱道。 /p 12 /body 13 /html 

blockquote 的作用也是引用別人的文本。但它是對(duì)長(zhǎng)文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。

q 標(biāo)簽是對(duì)簡(jiǎn)短文本的引用，比如說(shuō)引用一句話就用到 q 標(biāo)簽。

如想在文章中引用李白《關(guān)山月》中的詩(shī)句，因?yàn)橐梦谋颈容^長(zhǎng)，所以使用 blockquote 。

語(yǔ)法:

 blockquote 引用文本 /blockquote 

如下面例子：

 blockquote 明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門關(guān)。漢下白登道，胡窺青海灣。由來(lái)征戰(zhàn)地，不見有人還。 戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。 /blockquote 

瀏覽器對(duì) blockquote 標(biāo)簽的解析是縮進(jìn)樣式。如下圖所示：

試試為我們的文章中添加 blockquote 標(biāo)簽，引入長(zhǎng)文本。

在代碼中的第10行對(duì)“暗淡輕黃體性柔，情疏跡遠(yuǎn)只香留。何須淺碧深紅色，自是花中第一流。”文本加上 blockquote 標(biāo)簽。

1. 別忘了 blockquote 標(biāo)簽的語(yǔ)法 blockquote ... /blockquote

2. 別忘記去除雙引號(hào)了

其實(shí)各個(gè)標(biāo)簽用什么英文字母都是與各自的英文單詞有聯(lián)系的， q 就是引用quote的首字母，

blockquote 譯為塊狀引用，也就是引用長(zhǎng)文本；再比如上一節(jié)中的 em 標(biāo)簽就是emphasize前兩個(gè)字母，

strong 標(biāo)簽，顧名思義就是加粗。根據(jù)英文單詞的意思記標(biāo)簽，這樣就不會(huì)錯(cuò)了。

q 標(biāo)簽用來(lái)引用短文本，會(huì)自動(dòng)添加雙引號(hào)。

blockquote 標(biāo)簽用來(lái)引用長(zhǎng)文本，不會(huì)自動(dòng)添加雙引號(hào)，還會(huì)對(duì)引用的文本進(jìn)行縮進(jìn)

q /q 是對(duì)短文本的引用 ， blockquote /blockquote 是對(duì)長(zhǎng)文本的引用

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title br標(biāo)簽的使用 /title  6 /head  7 body  8 h2 《詠桂》 /h2  9 p 暗淡輕黃體性柔，情疏跡遠(yuǎn)只香留。何須淺碧深紅色，自是花中第一流。 /p 10 /body 11 /html 

對(duì)于上一小節(jié)的例子，我們想讓那首詩(shī)顯示得更美觀些，如顯示下面效果：

怎么可以讓每一句詩(shī)詞后面加入一個(gè)折行呢？那就可以用到 br / 標(biāo)簽了，

在需要加回車換行的地方加入 br / ， br / 標(biāo)簽作用相當(dāng)于word文檔中的回車。

上節(jié)的代碼改為：

語(yǔ)法：

xhtml1.0寫法：

br /

html4.01寫法：

br

大家注意，現(xiàn)在一般使用 xhtml1.0 的版本的寫法（其它標(biāo)簽也是），這種版本比較規(guī)范。

與以前我們學(xué)過(guò)的標(biāo)簽不一樣， br / 標(biāo)簽是一個(gè)空標(biāo)簽，沒(méi)有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽，

空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽，這樣的標(biāo)簽有 br / 、 hr / 和 img / 。

講到這里，你是不是有個(gè)疑問(wèn)，想折行還不好說(shuō)嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？

很遺憾，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來(lái)的。如下邊的代碼。

上面的代碼在瀏覽中顯示是沒(méi)有回車效果的。如下圖所示：

總結(jié)：在 html 代碼中輸入回車、空格都是沒(méi)有作用的。在html文本中想輸入回車換行，就必須輸入 br / 。

來(lái)試試：用 br 標(biāo)簽，為李清照的《詠桂》詩(shī)句添加回車，使其顯示更美觀

在編輯器中的第9行，每一句詩(shī)文后加入一個(gè)回車。使詩(shī)文在瀏覽器中顯示為：

最后一句詩(shī)后面“自是花中第一流”不需要 br / 噢！

pre /pre 可以保留文本中的空格和回車

標(biāo)題可以用 pre 標(biāo)簽換行， h3 暗淡輕黃體性柔， pre 情疏跡遠(yuǎn)只香留。 /pre 何須淺碧深紅色，自是花中第一流。 /h3 。

但是，段落是不可以用 pre 標(biāo)簽換行的。 p 暗淡輕黃體性柔， pre 情疏跡遠(yuǎn)只香留。 /pre 何須淺碧深紅色，自是花中第一流。 /p 。

放在段落中會(huì)提示錯(cuò)誤

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 空格講解 /title  6 /head  7 body  8 h1 感悟夢(mèng)想 /h1  9 來(lái)源：作文網(wǎng)作者：為夢(mèng)想而飛 10 /body 11 /html 

在html代碼中輸入空格、回車都是沒(méi)有作用的。要想輸入空格，必須寫入 nbsp;。

語(yǔ)法：

nbsp;

在html代碼中輸入空格是不起作用的，如下代碼。

在瀏覽中顯示，還是沒(méi)有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來(lái)的空格效果。如下圖所示。

來(lái)試試：為文章添加空格

在編輯器中的第 9 行“來(lái)源：作文網(wǎng)”文本的后面輸入兩個(gè)空格。

1. 別忘了輸入空格的方式

nbsp;

2. nbsp;后面的;別忘記。

記憶：nb(牛逼)sp(space) 好牛逼的空格!

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title hr標(biāo)簽使用 /title  6 /head  7 body  8 p 火車飛馳過(guò)暗夜里的村莊，月光，總是太容易讓思念寂寞，太容易讓人覺得孤獨(dú)。 /p 10 p 每一枚被風(fēng)吹起的蒲公英，都載滿了一雙眼睛的深情告別與一個(gè)目光的依依不舍。那天，我拿著行李，帶上一個(gè)背影的祝福與惆悵，揮手告別了這片土地。我不知道，我何時(shí)會(huì)回來(lái)。 /p 11 /body 12 /html 

在信息展示時(shí)，有時(shí)會(huì)需要加一些用于分隔的橫線，這樣會(huì)使文章看起來(lái)整齊些。如下圖所示：

語(yǔ)法：

html4.01版本 hr

xhtml1.0版本 hr /

注意：

1. hr / 標(biāo)簽和 br / 標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。

2. hr / 標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒(méi)有關(guān)系，

這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。

3. 大家注意，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是），這種版本比較規(guī)范。

來(lái)試試:用 hr 標(biāo)簽分隔兩段文字，使文章看起來(lái)更整潔。

在編輯器中的第 9 行輸入 hr / 標(biāo)簽。

hr 后面的 / 就是xhtml規(guī)定的結(jié)束標(biāo)注，不是沒(méi)有結(jié)束標(biāo)志，因?yàn)閔tml中的hr是一個(gè)空標(biāo)簽，在xhtml中要求空標(biāo)簽必須結(jié)束，

所以就在前面加一個(gè)/, 其實(shí) hr/ 也是可以的，但是為了應(yīng)對(duì)所有瀏覽器的兼容性，最好在“/” 前面加上一個(gè)空格。

br/ 換行標(biāo)簽 hr/ 水平橫線標(biāo)簽

hr/ 是添加水平線的， br/ 是為了分開一些詩(shī)句，使得另起一行

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title address標(biāo)簽介紹 /title  6 /head  7 body  8 h2 慕課網(wǎng) /h2  9 p 超酷的互聯(lián)網(wǎng)、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；服務(wù)及時(shí)貼心，內(nèi)容專業(yè)、有趣易學(xué)。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手!公司地址：北京市西城區(qū)德外大街10號(hào) /p 10 /body 11 /html 

一般網(wǎng)頁(yè)中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁(yè)中展示出來(lái)，這些聯(lián)系地址信息如公司的地址就可以 address 標(biāo)簽。

也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。

語(yǔ)法：

address 聯(lián)系地址信息 /address

如：

address 北京市西城區(qū)德外大街10號(hào) /address

 address 本文的作者： a href= mailto:lilian@imooc.com lilian /a  /address 

在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當(dāng)然可以，可以在后面的課程中使用 css 樣式來(lái)修改它 address 標(biāo)簽的默認(rèn)樣式。

來(lái)試試：用 address 標(biāo)簽在網(wǎng)頁(yè)上顯示公司地址

在編輯器中的第 9 行，對(duì)“北京市西城區(qū)德外大街10號(hào)”文本加上 address 標(biāo)簽。

別忘了address標(biāo)簽的語(yǔ)法 address ... /address

address 不但斜體，且另起一段。 em 只是斜體，沒(méi)有另起一段。

address標(biāo)簽是一個(gè)塊級(jí)元素，p元素也是一個(gè)塊級(jí)元素，但是p標(biāo)簽不能包含任何塊級(jí)標(biāo)簽。所以報(bào)錯(cuò)。

若一個(gè)p標(biāo)簽里面包含了一個(gè)塊級(jí)元素，瀏覽器會(huì)將一個(gè)p標(biāo)簽分成兩個(gè)p標(biāo)簽，將包含的塊級(jí)元素獨(dú)立出來(lái)。

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title code標(biāo)簽介紹 /title  6 /head  7 body  8 p 我們可能知道水平漸變的實(shí)現(xiàn)，類似這樣：{background-image:linear-gradient(left, red 100px, yellow 200px);} /p  9 /body 10 /html 

在介紹語(yǔ)言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用 code 標(biāo)簽了，如下面例子：

code var i=i+300; /code

注意：在文章中一般如果要插入多行代碼時(shí)不能使用 code 標(biāo)簽了。

語(yǔ)法：

code 代碼語(yǔ)言 /code

注：如果是多行代碼，可以使用 pre 標(biāo)簽。

來(lái)試試，用 code 標(biāo)簽在網(wǎng)頁(yè)上顯示程序代碼

在編輯器中的第8行，判斷一下哪段代碼是需要加入 code 標(biāo)簽代碼的，把 code /code 代碼加上去。

別忘了 code 標(biāo)簽的語(yǔ)法 code 代碼語(yǔ)言 /code

作用是防止瀏覽器誤認(rèn)為是要執(zhí)行代碼，而沒(méi)顯示代碼。加了標(biāo)簽瀏覽器就不會(huì)執(zhí)行了，而是像文本一樣顯示出來(lái)

使用 code 不是為了防止瀏覽器執(zhí)行代碼！

不信你在 code 標(biāo)簽里加入 h1 、 strong 等標(biāo)簽試一試，仍然會(huì)執(zhí)行！使用 code 標(biāo)簽還是那句話：語(yǔ)義！！！

防止瀏覽器誤認(rèn)為是要執(zhí)行代碼，而沒(méi)有顯示代碼。

加了標(biāo)簽 code /code 瀏覽器就不會(huì)執(zhí)行了,而是以文本格式顯示出來(lái)。注意多行代碼是不再使用 code 而是使用 pre

 1 !DOCTYPE HTML  2 head  3 meta http-equiv= Content-Type content= text/html; charset=utf-8 /  4 title pre標(biāo)簽的使用 /title  5 /head  7 body  8 var message= 歡迎  9 for(var i=1;i i++) br 10 { br 11 alert(message); br 12 } br 14 /body 15 /html 

在上節(jié)中介紹加入一行代碼的標(biāo)簽為 code ，但是在大多數(shù)情況下是需要加入大段代碼的，如下圖：

怎么辦？不會(huì)是每一代碼都加入一個(gè) code 標(biāo)簽吧，沒(méi)有這么復(fù)雜，這時(shí)候就可以使用 pre 標(biāo)簽。

語(yǔ)法：

pre 語(yǔ)言代碼段 /pre

pre 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。

如下代碼：

 pre  var message= 歡迎  for(var i=1;i i++) alert(message); /pre 

在瀏覽器中的顯示結(jié)果為：

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

注意： pre 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁(yè)中預(yù)顯示格式時(shí)都可以使用它，

只是 pre 標(biāo)簽的一個(gè)常見應(yīng)用就是用來(lái)展示計(jì)算機(jī)的源代碼。

來(lái)試試使用 pre 標(biāo)簽，修改編輯器中的代碼，使其代碼顯示結(jié)果與以前顯示一致。

1、別忘了 pre 標(biāo)簽的語(yǔ)法 pre 代碼語(yǔ)言段 /pre

如果您希望使用 pre 標(biāo)簽來(lái)定義計(jì)算機(jī)源代碼，比如 HTML 源代碼，

請(qǐng)使用符號(hào)實(shí)體來(lái)表示特殊字符，比如 代表 ， 代表 ， amp; 代表 。

【相關(guān)推薦】

1. 免費(fèi)html在線視頻教程

2. html開發(fā)手冊(cè)

3. VeVb.com原創(chuàng)html5視頻教程

以上就是html基礎(chǔ)教程之認(rèn)識(shí)標(biāo)簽（二）的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。