捕鱼机只电小鱼是什么原因

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

3.2　設置文字格式

除了標題文字，普通的文字信息在網頁中也是不可缺少的。多種多樣的文字效果可以使網頁變得更加絢麗。

在設計HTML網頁時，你可以直接在文字的主體部分（即<body>和</body>之間）輸入文字，這些文字會以默認的樣式和大小顯示在頁面中，但你可以根據實際需求對文字的樣式進行設置，下面將逐一講解各種文字格式的設置方式。

3.2.1　粗體、斜體、下畫線標簽—、、

在瀏覽網頁時，常常可以看到一些特殊效果的文字，如粗體字、斜體字或者下畫線文字，這些文字效果通過設置HTML中的相應標簽來實現。語法格式如下。

     <strong>粗體的文字</strong>
     <em>斜體字</em>
     <u>帶下畫線的文字</u>

【例3.3】使用文本標簽裝飾文本。（實例位置：資源包\TM\sl\3\3）

本實例通過顯示一則圖書打折活動信息，綜合使用標簽、標簽以及標簽設置文字的不同樣式。具體代碼如下。

     <!--顯示商品圖片-->
     <img src="book.jpg" width="200"/><br>
     <!--顯示圖書名稱，書名文字用斜體效果-->
     書名：<em>《Python樹莓派開發從入門到精通》</em><br>
     <!--顯示圖書作者-->
     作者：明日科技<br>
     <!--顯示出版社-->
     出版社：清華大學出版社<br>
     <!--顯示出版時間，文字用下畫線效果-->
     出版時間：<u>2021年10月</u><br>
     <!--顯示頁數-->
     頁數：400頁<br>
     <!--顯示圖書價格，促銷價格使用使用粗體文字效果-->
     原價：89.80元  促銷價格：<strong>69.80</strong>元<br>

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

圖3.3　設置文字的不同顯示樣式

說明

文字的粗體效果也可通過標簽來實現，斜體字也可使用標簽或者<cite>標簽來實現。

3.2.2　上標與下標標簽—、

網頁中除了設置不同的文字效果，有時候還需要設置一種特殊的文字效果，即上標和下標，這種效果在顯示公式時常常會出現。在HTML語言中，你可以通過和標簽分別設置上標和下標，它們的語法格式如下。

     <sup>…</sup>  <!--上標標簽-->
     <sub>…</sub>  <!--下標標簽-->

使用這兩個標簽時，你只需要將文字放在標簽中間即可。

【例3.4】使用上標與下標展示數學方程式。（實例位置：資源包\TM\sl\3\4）

本實例使用和標簽在網頁中顯示兩個數學方程式，具體實現時，首先輸入用到的全部數學符號，然后將需要置上或者置下的符號放入上標和下標標簽中。具體代碼如下。

     <!--表示文章標題-->
     <h1 align="center">上標和下標標簽</h1>
     <h3 align="center">在數學計算中:</h3>
     <!--使用上標標簽，將文字置上-->
     <h3 align="center">
          上標：X<sup>3</sup>+9X<sup>2</sup>-3=0
     </h3>
     <!--使用下標標簽，將文字置下-->
     <h3 align="center">
          下標：3X<sub>1</sub>+2X<sub>2</sub>=10
     </h3>

運行這段代碼，可以看到如圖3.4所示的效果。

圖3.4　設置文字的上標與下標

3.2.3　設置刪除線標簽—<del>/<s>

你可以通過<del>標簽或<s>標簽為網頁中的文字添加刪除線效果。語法格式如下。?

     <del>文字</del>
     <s>文字</s>

這兩種標簽都可以實現刪除線效果，它們的區別是，<s>標簽用于定義不正確或者沒有用的文本，<del>標簽用于定義已刪除的文本。

【例3.5】刪除線的使用。（實例位置：資源包\TM\sl\3\5）

本實例演示了刪除線標簽<del>和<s>標簽的使用。具體代碼如下。

     正常的文字效果<br />
     在文字上使用<s>標簽定義不正確文本<br />
     <s>刪除文字的效果</s><br/><br/>
     在文字上使用<del>標簽來添加刪除線<br />
     <del>刪除文字的效果</del>

運行這段代碼，可以看到如圖3.5所示的效果。

圖3.5　刪除線效果

3.2.4　等寬文字標簽—<code>

等寬文字標簽<code>常用于英文中，該標簽可以用來實現網頁中字體的等寬效果，使頁面顯得更加整齊。語法格式如下。

     <code>文字</code>

在使用<code>標簽時，只要把需要等寬顯示的文字放置在標簽中間即可。

【例3.6】等寬文字標簽的效果展示。（實例位置：資源包\TM\sl\3\6）

在網頁中添加兩句英文，其中第二句英文使用等寬文字標簽，代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>設置等寬文字</title>
     </head>
     <body>
          下面將顯示兩段相同的英文效果，突出等寬文字與普通英文文字的對比效果。<br/><br/>
          <!--下面這段英文使用了正常的效果顯示-->
          普通英文效果<br/>
          A day without sunshine is like night.<br/><br/>
          <!--下面這段英文使用了等寬效果的效果顯示-->
          等寬文字效果<br/>
          <code>A day without sunshine is like night.</code>
     </body>
     </html>

運行這段代碼，可以看到如圖3.6所示的效果。

圖3.6　等寬文字的效果

3.2.5　空格與其他特殊符號

一般情況下，在網頁中輸入文字時，如果在段落開始增加了空格，在瀏覽器中進行瀏覽時往往看不到這些空格。這主要是因為在HTML文件中，瀏覽器本身會將兩個句子之間的所有半角空格僅當作一個空格來看待。如果需要保留空格的效果，一般需要使用全角空格符號，或者通過空格碼來代替。下面將介紹如何應用空格碼來輸入保留文字中的空格效果。語法格式如下。

     &nbsp;

在網頁中可以有多個空格，一個 代表一個半角空格，多個空格則多次使用該符號即可。

另外，在網頁設計過程中，除了可以使用代碼表示空格，還可以使用代碼表示一些其他的特殊符號。一般情況下，表示特殊符號的代碼由前綴“&”、字符名稱和后綴“;”組成。網頁中常用的特殊符號及其代碼表示形式如表3.2所示。

表3.2　網頁中常用的特殊符號及其代碼表示形式

說明

在需要輸入這些特殊符號的位置處，使用相應的代碼代替即可。

【例3.7】使用特殊符號實現字符畫。（實例位置：資源包\TM\sl\3\7）

本實例綜合使用各種特殊字符實現在網頁中顯示一個小狗字符畫。關鍵代碼如下。

說明

上面代碼中使用<pre>標簽，該標簽用來保留網頁中的原始排版方式，詳解參見第3.3.3節。

運行這段代碼，可以看到由空格及多個特殊字符組成的小狗字符畫，如圖3.7所示。

圖3.7　使用特殊符號實現字符畫

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

【訓練3】顯示一元二次方程　在網頁中顯示一元二次方程2x²+4x=16。

【訓練4】顯示打折商品清單　在網頁中顯示一個打折商品清單，其中顯示原價時，以添加刪除線的效果顯示，參考數據如下。

     【帽子】原價：25.00元，打折：15.00元
     【衣服】原價：50.00元，打折：20.00元
     【褲子】原價：75.00元，打折：30.00元

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

3.2　設置文字格式

3.2.1　粗體、斜體、下畫線標簽—<strong>、<em>、<u>

3.2.2　上標與下標標簽—<sup>、<sub>

3.2.3　設置刪除線標簽—<del>/<s>

3.2.4　等寬文字標簽—<code>

3.2.5　空格與其他特殊符號

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

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

3.2 設置文字格式

3.2.1 粗體、斜體、下畫線標簽—<strong>、<em>、<u>

3.2.2 上標與下標標簽—<sup>、<sub>

3.2.3 設置刪除線標簽—<del>/<s>

3.2.4 等寬文字標簽—<code>

3.2.5 空格與其他特殊符號

3.2　設置文字格式

3.2.1　粗體、斜體、下畫線標簽—<strong>、<em>、<u>

3.2.2　上標與下標標簽—<sup>、<sub>

3.2.3　設置刪除線標簽—<del>/<s>

3.2.4　等寬文字標簽—<code>

3.2.5　空格與其他特殊符號