冰球比赛视频

書名： HTML5從入門到精通（第4版）
作者名：明日科技編著
本章字數： 1218字
更新時間： 2024-12-24 10:26:20

3.3　設置段落格式

文字的組合是段落，例如，在Word文檔中輸入完一段文字后，按Enter鍵，就會生成一個段落。在HTML中同樣可以以段落形式顯示文字，本節將介紹與段落相關的一些標簽。

3.3.1　段落標簽—

在HTML語言中，段落通過標簽來表示。語法格式如下。

     <p>段落文字</p>

【例3.8】巧用段落標簽介紹明日學院。（實例位置：資源包\TM\sl\3\8）

使用段落標簽在網頁中介紹明日學院，并且添加創意邊框。具體代碼如下。

運行這段代碼，可以看到段落標簽成功地對文字進行了分段，效果如圖3.8所示。

圖3.8　段落標簽的使用效果

3.3.2　換行標簽—

默認情況下，段落與段落之間是隔行換行的，這樣使得文字的行間距會比較大。如果要避免這種情況，則需要使用換行標簽 來完成文字的緊湊換行顯示。語法格式如下。

     文字<br>

一個 標簽代表一個換行符，多次使用標簽可以多次換行。

【例3.9】網頁中顯示《三國演義》片首歌詞。（實例位置：資源包\TM\sl\3\9）

本實例使用標簽和 標簽實現在網頁中顯示《三國演義》片首歌詞，代碼如下。

     <p align="center">
          臨江仙<br>
          <!--使用2個換行標簽-->
          楊慎<br><br>
          <!--以下使用換行標簽-->
          滾滾長江東逝水，浪花淘盡英雄。<br>
          是非成敗轉頭空。<br>
          青山依舊在，幾度夕陽紅。<br>
          白發漁樵江渚上，慣看秋月春風。<br>
          一壺濁酒喜相逢。<br>
          古今多少事，都付笑談中。<br>
     </p>

運行這段代碼，效果如圖3.9所示。

圖3.9　文字的換行顯示

說明

實際開發中，也可以使用 標簽進行換行。

3.3.3　保留原始排版方式標簽—<pre>

在網頁創作中，一般是通過各種標簽對文字進行排版的。但是在實際應用中，往往需要一些特殊的排版效果，這樣使用標簽控制起來會比較麻煩。解決的方法就是保留文本的原始排版效果，例如空格、制表符等。如果要保留原始的文本排版效果，則需要使用<pre>標簽。語法格式如下。

     <pre>要保留原始格式的文字<pre>

【例3.10】巧用原始排版標簽輸出二十四節氣歌。（實例位置：資源包\TM\sl\3\10）

本實例使用原始排版標簽<pre>實現以設計網頁時編寫的默認格式輸出二十四節氣歌。具體代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <!--指定頁面編碼格式-->
          <meta charset="UTF-8">
          <!--指定頁頭信息-->
          <title>原格式標簽</title>
     </head>
     <body>
          <h1>原格式標簽&<pre&></h1>
          <!--使用原始排版標簽，輸出二十四節氣歌-->
          <pre>
                          二十四節氣歌
                               ——傳統版
               春雨驚春清谷天，夏滿芒夏暑相連。
               秋處露秋寒霜降，冬雪雪冬小大寒。
               每月兩節不變更，最多相差一兩天。
               上半年來六廿一，下半年是八廿三。
          </pre>
     </body>
     </html>

運行這段代碼，可以看到排版效果中的《二十四節氣歌》的顯示形式與設計網頁時是一致的，如圖3.10所示。

圖3.10　保留原始的排版效果

3.3.4　向右縮進標簽—<blockquote>

<blockquote>標簽可以用于實現頁面文字的段落縮進，使用該標簽時，每使用一次，段落就縮進一次。另外，<blockquote>標簽可以嵌套使用，以達到不同的縮進效果。語法格式如下。

     <blockquote>文字</blockquote>

在該標簽之間的文字會自動縮進。

【例3.11】巧用<blockquote>標簽階梯式呈現古文名句。（實例位置：資源包\TM\sl\3\11）

本實例實現在網頁中顯示《荀子》中的4句名句時，除了第一句使用<blockquote>標簽縮進顯示，其他每句都通過嵌套使用<blockquote>標簽進行設置，以使其相比上一句的位置再向右縮進一次。具體代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
         <title>段落的縮進效果</title>
     </head>
     <body>
          《荀子》
          <blockquote>不登高山</blockquote>
          <blockquote>
               <blockquote>不知天之高也</blockquote>
          </blockquote>
          <blockquote><blockquote><blockquote>
               不臨深溪
          </blockquote></blockquote></blockquote>
          <blockquote>
               <blockquote><blockquote><blockquote>
                    不知地之厚也
               </blockquote></blockquote></blockquote>
          </blockquote>
     </body>
     </html>

運行這段代碼，效果如圖3.11所示。

圖3.11　段落的縮進效果

編程訓練（答案位置：資源包\TM\sl\3\編程訓練）

【訓練5】實現新年快樂字符畫　使用<pre>標簽實現“新年快樂”字符畫。

【訓練6】制作清明節放假通知　使用<h1>標簽和標簽實現在網頁中顯示清明節放假通知。

官术网_书友最值得收藏!

3.3　設置段落格式

3.3.1　段落標簽—<p>

3.3.2　換行標簽—<br>

3.3.3　保留原始排版方式標簽—<pre>

3.3.4　向右縮進標簽—<blockquote>

官术网_书友最值得收藏!

HTML5從入門到精通（第4版）

3.3 設置段落格式

3.3.1 段落標簽—<p>

3.3.2 換行標簽—<br>

3.3.3 保留原始排版方式標簽—<pre>

3.3.4 向右縮進標簽—<blockquote>

3.3　設置段落格式

3.3.1　段落標簽—<p>

3.3.2　換行標簽—<br>

3.3.3　保留原始排版方式標簽—<pre>

3.3.4　向右縮進標簽—<blockquote>