從零開始學習html（二）下，從零開始學習html

從零開始學習html（二）下，從零開始學習html
八、<blockquote>標籤，長文本引用

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

blockquote標籤，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。

<q>標籤是對簡短文本的引用，比如說引用一句話就用到<q>標籤。

如想在文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用<blockquote>。

文法:

<blockquote>引用文本</blockquote>

如下面例子：

<blockquote>明月出天山，蒼茫雲海間。長風幾萬裡，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，歎息未應閑。</blockquote>

瀏覽器對<blockquote>標籤的解析是縮排樣式。如所示：

試試為我們的文章中添加<blockquote>標籤，引入長文本。

在代碼中的第10行對“暗淡輕黃體性柔，情疏跡遠只香留。何須淺碧深紅色，自是花中第一流。”文本加上<blockquote>標籤。

1. 別忘了<blockquote>標籤的文法  <blockquote>...</blockquote>

2. 別忘記去除雙引號了

其實各個標籤用什麼英文字母都是與各自的英文單詞有聯絡的，<q>就是引用quote的首字母，<blockquote>譯為塊狀引用，也就是引用長文本；再比如上一節中的<em>標籤就是emphasize前兩個字母，<strong>標籤，顧名思義就是加粗。根據英文單詞的意思記標籤，這樣就不會錯了。<q>標籤用來引用短文本，會自動添加雙引號。<blockquote>標籤用來引用長文本，不會自動添加雙引號，還會對引用的文本進行縮排<q></q>是對短文本的引用 ，<blockquote></blockquote>是對長文本的引用九、使用<br>標籤分行顯示文本

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

使用br標籤分行顯示文本

對於上一小節的例子，我們想讓那首詩顯示得更美觀些，如顯示下面效果：

怎麼可以讓每一句詩詞後面加入一個折行呢？那就可以用到<br />標籤了，

在需要加斷行符號換行的地方加入<br />，<br />標籤作用相當於word文檔中的斷行符號。

上節的代碼改為：

文法：

xhtml1.0寫法：

<br />

html4.01寫法：

<br>

大家注意，現在一般使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。

與以前我們學過的標籤不一樣，<br />標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，

空標籤只需要寫一個開始標籤，這樣的標籤有<br />、<hr />和<img />。

講到這裡，你是不是有個疑問，想折行還不好說嘛，就像在 word 檔案檔或記事本中，在想要折行的前面輸入斷行符號不就行了嗎？

很遺憾，在 html 中是忽略斷行符號和空格的，你輸入的再多斷行符號和空格也是顯示不出來的。如下邊的代碼。

上面的代碼在瀏覽中顯示是沒有斷行符號效果的。如所示：

總結：在 html 代碼中輸入斷行符號、空格都是沒有作用的。在html文本中想輸入斷行符號換行，就必須輸入<br />。

來試試：用<br>標籤，為李清照的《詠桂》詩句添加斷行符號，使其顯示更美觀

在編輯器中的第9行，每一句詩文後加入一個斷行符號。使詩文在瀏覽器中顯示為：

最後一句詩後面“自是花中第一流”不需要<br />噢！

<pre> </pre>可以保留文本中的空格和斷行符號

標題可以用<pre>標籤換行，<h3>暗淡輕黃體性柔，<pre>情疏跡遠只香留。</pre>何須淺碧深紅色，自是花中第一流。</h3>。

但是，段落是不可以用<pre>標籤換行的。<p>暗淡輕黃體性柔，<pre>情疏跡遠只香留。</pre>何須淺碧深紅色，自是花中第一流。</p>。

放在段落中會提示錯誤

十、為你的網頁中添加一些空格

 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>感悟夢想</h1> 9 來源：作文網作者：為夢想而飛 10 </body>11 </html>

為你的網頁中添加一些空格

在html代碼中輸入空格、斷行符號都是沒有作用的。要想輸入空格，必須寫入 。

文法：

 

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

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如所示。

 來試試：為文章添加空格

在編輯器中的第 9 行“來源：作文網”文本的後面輸入兩個空格。

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

   

2.  後面的;別忘記。

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

十一、認識<hr>標籤，添加水平橫線

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>hr標籤使用</title> 6 </head> 7 <body> 8 <p>火車飛馳過暗夜裡的村莊，月光，總是太容易讓思念寂寞，太容易讓人覺得孤獨。</p> 9 10 <p>每一枚被風吹起的蒲公英，都載滿了一雙眼睛的深情告別與一個目光的依依不捨。那天，我拿著行李，帶上一個背影的祝福與惆悵，揮手告別了這片土地。我不知道，我何時會回來。</p>11 </body>12 </html>

認識hr標籤，添加水平橫線

在資訊展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。如所示：

文法：

html4.01版本 <hr>

xhtml1.0版本 <hr />

注意：

1. <hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。

2. <hr />標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，

這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。

3. 大家注意，現在一般使用 xhtml1.0 的版本（其它標籤也是），這種版本比較規範。

來試試:用<hr>標籤分隔兩段文字，使文章看起來更整潔。

 在編輯器中的第 9 行輸入<hr />標籤。

hr 後面的 / 就是xhtml規定的結束標註，不是沒有結束標誌，因為html中的hr是一個空標籤，在xhtml中要求空標籤必須結束，

所以就在前面加一個/, 其實<hr/> 也是可以的，但是為了應對所有瀏覽器的相容性，最好在“/” 前面加上一個空格。

<br/>換列標籤           <hr/>水平橫線標籤

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

十二、<address>標籤，為網頁加入地址資訊

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>address標籤介紹</title> 6 </head> 7 <body> 8 <h2>慕課網</h2> 9 <p>超酷的互連網、IT技術免費學習平台，創新的網路一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專註服務互連網工程師快速成為技術高手!公司地址：北京市西城區德外大街10號</p> 10 </body>11 </html>

address標籤，為網頁加入地址資訊

一般網頁中會有一些網站的聯絡地址資訊需要在網頁中展示出來，這些聯絡地址資訊如公司的地址就可以<address>標籤。

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

文法：

<address>聯絡地址資訊</address>

如：

<address>北京市西城區德外大街10號</address>

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

      在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在後面的課程中使用 css 樣式來修改它<address>標籤的預設樣式。

來試試：用<address>標籤在網頁上顯示公司地址

在編輯器中的第 9 行，對“北京市西城區德外大街10號”文本加上<address>標籤。

 別忘了address標籤的文法    <address>...</address>

<address>不但斜體，且另起一段。<em>只是斜體，沒有另起一段。

address標籤是一個區塊層級元素，p元素也是一個區塊層級元素，但是p標籤不能包含任何塊級標籤。所以報錯。若一個p標籤裡麵包含了一個區塊層級元素，瀏覽器會將一個p標籤分成兩個p標籤，將包含的區塊層級元素獨立出來。 十三、想加入一行代碼嗎？使用<code>標籤

 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>我們可能知道水平漸層的實現，類似這樣：{background-image:linear-gradient(left, red 100px, yellow 200px);}</p> 9 </body>10 </html>

想加入一行代碼嗎？使用code標籤

在介紹語言技術的網站中，避免不了在網頁中顯示一些電腦專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標籤了，如下面例子：

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

注意：在文章中一般如果要插入多行代碼時不能使用<code>標籤了。

文法：

<code>代碼語言</code>

註：如果是多行代碼，可以使用<pre>標籤。

來試試，用<code>標籤在網頁上顯示程式碼

在編輯器中的第8行，判斷一下哪段代碼是需要加入<code>標籤代碼的，把<code></code>代碼加上去。

別忘了<code>標籤的文法   <code>代碼語言</code>

作用是防止瀏覽器誤認為是要執行代碼，而沒顯示代碼。加了標籤瀏覽器就不會執行了，而是像文本一樣顯示出來

使用<code>不是為了防止瀏覽器執行代碼！

不信你在<code>標籤裡加入<h1>、<strong>等標籤試一試，仍然會執行！使用<code>標籤還是那句話：語義！！！

防止瀏覽器誤認為是要執行代碼，而沒有顯示代碼。

加了標籤<code></code>瀏覽器就不會執行了,而是以文字格式設定顯示出來。注意多行代碼是不再使用<code>而是使用<pre>

十四、使用<pre>標籤為你的網頁加入大段代碼

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

使用pre標籤為你的網頁加入大段代碼

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

怎麼辦？不會是每一代碼都加入一個<code>標籤吧，沒有這麼複雜，這時候就可以使用<pre>標籤。

文法：

<pre>語言程式碼片段</pre>

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

如下代碼：

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

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

在上面的例子中可以看到代碼中的空格，分行符號都保留下來。如果用以前的方法，斷行符號需要輸入<br>簽，空格需要輸入 

注意：<pre> 標籤不只是為顯示電腦的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，

只是<pre>標籤的一個常見應用就是用來展示電腦的原始碼。

來試試使用<pre>標籤，修改編輯器中的代碼，使其代碼顯示結果與以前顯示一致。 

1、別忘了<pre>標籤的文法<pre>代碼語言段</pre>

如果您希望使用 <pre> 標籤來定義電腦原始碼，比如 HTML 原始碼，

請使用符號實體來表示特殊字元，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&amp;" 代表 "&"。