- HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
- 聶斌 張明遙
- 3264字
- 2019-10-23 17:37:34
2.1 文字格式
文字格式主要是用一些HTML元素來標記文本的方式，用來更改文字的大小、字體、顏色等屬性，還能為文本增加如粗體、斜體、上標、下標等修飾效果。
2.1.1 設置文字大小
在HTML中，<FONT>元素可以用來顯示文字的屬性，包括文字的大小、顏色、字體等。其中設置文字大小的屬性為SIZE，其語法格式如下。
<FONT SIZE="n">文字</FONT>
其中n的有效范圍是數字1～7。
【示例2-1】請看下面的例子，注意加粗的代碼。
01 <HTML> 02 <HEAD> 03 <TITLE>文字大小</TITLE> 04 </HEAD> 05 <BODY> 06 這是默認的文字大小<BR> 07 <FONT SIZE="1">1號字體大小</FONT><BR> 08 <FONT SIZE="2">2號字體大小</FONT><BR> 09 <FONT SIZE="3">3號字體大小</FONT><BR> 10 <FONT SIZE="4">4號字體大小</FONT><BR> 11 <FONT SIZE="5">5號字體大小</FONT><BR> 12 <FONT SIZE="6">6號字體大小</FONT><BR> 13 <FONT SIZE="7">7號字體大小</FONT><BR> 14 </BODY> 15 </HTML>
第7～13行分別為文字內容設置字號為1～7號。
示例2-1運行效果如圖2.1所示。從圖2.1中可以看出，SIZE屬性的值越大，在瀏覽器中顯示出來的文字就越大。當然，SIZE屬性的值不可能無限大，其有限范圍為1～7。如果大于7，則顯示的文字大小與SIZE等于7的文字大小相同；如果小于1，則顯示的文字大小與SIZE等于1的文字大小相同。
圖2.1 設置文字大小運行效果
2.1.2 設置字體
文字可以設置多種字體，中文的有宋體、仿宋、黑體等，英文字體有Arial、Times New Roman等，為了保證網頁的通用性，HTML的早期版本是不允許為文字指定字體的，從HTML 3.2版本開始，可以為網頁中的文字指定不同的字體，使網頁的表現形式更為豐富。
1. 設置網頁字體
設置文字字體使用<FONT>標簽的FACE屬性，其語法格式如下。
<FONT FACE="字體名稱">文字</FONT>
其中FACE屬性值為字體的名稱。要想知道自己計算機中安裝了什么字體，可以在操作系統所在盤的Windows\Fonts目錄下看到，如圖2.2所示，在“預覽、刪除或者顯示和隱藏計算機上安裝的字體”欄下的都是可用的字體。
圖2.2 計算機上安裝的字體
【示例2-2】設置字體，注意加粗的代碼。
01 <HTML> 02 <HEAD> 03 <TITLE>設置字體</TITLE> 04 </HEAD> 05 <BODY> 06 這是默認的字體<BR> 07 <FONT FACE="宋體">這是字體名為“宋體”的文字</FONT><BR> 08 <FONT FACE="黑體">這是字體名為“黑體”的文字</FONT><BR> 09 <FONT FACE="仿宋">這是字體名為“仿宋”的文字</FONT><BR> 10 <FONT FACE="楷體">這是字體名為“楷體”的文字</FONT><BR> 11 <FONT FACE="隸書">這是字體名為“隸書”的文字</FONT><BR> 12 <FONT FACE="華文行楷">這是字體名為“華文行楷”的文字</FONT><BR> 13 <FONT FACE="Arial">Arial</FONT><BR> 14 <FONT FACE="Freestyle Script">Freestyle Script</FONT><BR> 15 <FONT FACE="Harlow Solid Italic">Harlow Solid Italic</FONT><BR> 16 下面是一些好玩的字體：<BR> 17 <FONT FACE="Wingdings 1">Wingdings 1</FONT><BR> 18 <FONT FACE="Wingdings 2">Wingdings 2</FONT><BR> 19 <FONT FACE="Wingdings 2">Wingdings 3</FONT><BR> 20 </BODY> 21 </HTML>
第6～19行，使用<FONT>標記的FACE屬性來為文字設置不同的字體，其中第6行為默認字體，其他各行分別采用不同的字體來顯示文字內容。
示例2-2運行效果如圖2.3所示。從圖2.3中可以看出，為FONT元素指定不同的FACE屬性值之后，在瀏覽器中可以顯示不同的字體。
圖2.3 設置字體運行效果
2. 設置瀏覽器默認字體
需要注意的是，在示例2-2中顯示的字體在設計者的計算機上可以正常瀏覽，但是換成在用戶的計算機上就不一定可以正常瀏覽了。例如，在該文件中指定了“華文行楷”字體，如果讀者的計算機中沒有安裝這種字體，瀏覽器就會用默認的字體來顯示這種字體。
在Internet Explorer瀏覽器中設置默認字體的方法如下。
（1）啟動Internet Explorer瀏覽器，單擊菜單欄中的“工具”|“Internet選項”命令，彈出圖2.4所示的“Internet選項”對話框。
圖2.4 “Internet選項”對話框
（2）選擇“常規”選項卡，然后單擊“字體”按鈕。
（3）彈出圖2.5所示的“字體”對話框，在該對話框中可以設置瀏覽器的默認字體。
圖2.5 “字體”對話框
注意
因為無法確認訪問網頁的瀏覽者的計算機里都會安裝什么字體，所以在設計網頁時，最好不要使用不常用的字體，盡量指定宋體、楷體等一般計算機都會默認安裝的字體。
2.1.3 設置字體顏色
如果沒有設置網頁文字字體的顏色，那么這個網頁就是黑白的，失去了其繽紛的色彩。使用<FONT>元素的COLOR屬性可以為文字設置不同的顏色，其語法格式如下。
<FONT COLOR="顏色">文字</FONT>
顏色可以有兩種表示方法：顏色名稱與RGB顏色數值。顏色名稱就是類似RED、BLUE等顏色的英文名。RGB顏色是由紅色、綠色、藍色的組合來指定的一種顏色，任何一種顏色都可以用0～255的一個數值表示，但必須使用十六進制的數字來表示這些組合。例如，一種顏色的RGB代碼為“#FFC0CB”，就代表是用強度為FF（也就是255）的紅色、強度為C0的綠色與強度為CB的藍色混合成的顏色，也就是粉紅色。
注意
使用RGB顏色，必須在十六進制組合前加上“#”字符。
幾乎所有瀏覽器都能識別以下16種預定義的顏色：Red（紅色）、Yellow（黃色）、Blue（藍色）、Navy（深藍色）、Green（綠色）、Lime（淺綠色）、Aqua（碧綠色）、Olive（橄欖綠）、Black（黑色）、Gray（灰色）、Silver（銀色）、Maroon（栗色）、Purple（紫色）、Fuchsia（紫紅色）、Teal（深青色）和White（白色）。而Internet Explorer瀏覽器可以識別更多的顏色單詞，表2.1列出了Internet Explorer瀏覽器能識別的顏色單詞。
表2.1 Internet Explorer瀏覽器能識別的顏色單詞
【示例2-3】設置文字字體顏色。
01 <HTML> 02 <HEAD> 03 <TITLE>設置文字顏色</TITLE> 04 </HEAD> 05 <BODY> 06 以下是預定義的十六種顏色：<BR> 07 <TABLE WIDTH="100%"> 08 <TR> 09 <TD ALIGN="CENTER"> <FONT COLOR="Red">Red ：紅色</FONT></TD> 10 <TD ALIGN="CENTER"> <FONT COLOR="Yellow">Yellow：黃色</FONT></TD> 11 <TD ALIGN="CENTER"> <FONT COLOR="Blue">Blue ：藍色</FONT></TD> 12 <TD ALIGN="CENTER"> <FONT COLOR="Navy">Navy ：深藍色</FONT></TD> 13 </TR> 14 <TR> 15 <TD ALIGN="CENTER"> <FONT COLOR="Green">Green：綠色</FONT></TD> 16 <TD ALIGN="CENTER"> <FONT COLOR="Lime">Lime ：淺綠色</FONT></TD> 17 <TD ALIGN="CENTER"> <FONT COLOR="Aqua">Aqua ：碧綠色</FONT></TD> 18 <TD ALIGN="CENTER"> <FONT COLOR="Olive">Olive：橄欖綠</FONT></TD> 19 </TR> 20 <TR> 21 <TD ALIGN="CENTER"> <FONT COLOR="Black">Black：黑色</FONT></TD> 22 <TD ALIGN="CENTER"> <FONT COLOR="Gray">Gray ：灰色</FONT></TD> 23 <TD ALIGN="CENTER"> <FONT COLOR="Silver">Silver：銀色</FONT></TD> 24 <TD ALIGN="CENTER"> <FONT COLOR="Maroon">Maroon：栗色</FONT></TD> 25 </TR> 26 <TR> 27 <TD ALIGN="CENTER"> <FONT COLOR="Purple">Purple：紫色</FONT></TD> 28 <TD ALIGN="CENTER"> <FONT COLOR="Fuchsia">Fuchsia：紫紅色</FONT></TD> 29 <TD ALIGN="CENTER"> <FONT COLOR="Teal">Teal ：深青色</FONT></TD> 30 <TD ALIGN="CENTER" BGCOLOR="Black"><FONT COLOR="White">White ：白色 </FONT></TD> 31 </TR> 32 </TABLE> 33 以下是使用的是 RGB 顏色： 34 <TABLE WIDTH="100%"> 35 <TR> 36 <TD ALIGN="CENTER"> <FONT COLOR="#8A2BE2">8A2BE2</FONT></TD> 37 <TD ALIGN="CENTER"> <FONT COLOR="#7FFF00">7FFF00</FONT></TD> 38 <TD ALIGN="CENTER"> <FONT COLOR="#008B8B">008B8B</FONT></TD> 39 <TD ALIGN="CENTER"> <FONT COLOR="#BDB76B">BDB76B</FONT></TD> 40 </TR> 41 </TABLE> 42 </BODY> 43 </HTML>
第7～39行在表格中顯示不同顏色的文字內容，其中使用了3FONT標記的COLOR屬性。示例2-3運行結果如圖2.6所示。
圖2.6 設置字體顏色運行結果
注意
雖然可以用顏色名稱來代替RGB顏色，但是并不是所有的瀏覽器都可以識別這些英文名稱，因此還是建議使用RGB顏色值。
2.1.4 加粗與斜體
通常在處理文字時，都會對比較重要的內容使用加粗、斜體來引起讀者的注意。在網頁上同樣可以使用加粗與斜體來達到相同的效果。
在HTML元素中，可以用<B>元素來加粗文字，用<I>元素來使文字傾斜。除了<B>元素與<I>元素之外，還可以使用<STRONG>元素來加粗文字，使用<EM>元素來使文字傾斜。設置加粗與斜體的語法格式如下。
<B>加粗的文字</B> <I>傾斜的文字</I> <STRONG>加粗的文字</STRONG> <EM>傾斜的文字</EM>
【示例2-4】設置文字為加粗和斜體。
01 <HTML> 02 <HEAD> 03 <TITLE>粗體與斜體</TITLE> 04 </HEAD> 05 <BODY> 06 <FONT SIZE=4> 07 這是四號文字大小<BR> 08 <B> 這是使用B 元素加粗的四號文字</B><BR> 09 <I>這是使用I 元素傾斜的四號文字</I><BR> 10 <STRONG>這是使用STRONG 元素加粗的四號文字</STRONG><BR> 11 <EM>這是使用EM元素傾斜的四號文字</EM><BR> 12 <BIG>這是加大的四號文字</BIG><BR> 13 </FONT> 14 </BODY> 15 </HTML>
第8～12行分別采用特殊標記來使字體顯示相應的特殊效果，如加粗、斜體等。示例2-4的運行效果如圖2.7所示。從圖2.7中可以看出，使用<STRONG>元素與<B>元素加粗文字沒有什么區別，使用<EM>元素與<I>元素使文字傾斜也沒有什么區別。
圖2.7 加粗與斜體運行結果
注意
B元素與BIG元素的區別是：BIG元素是將文字加大，并不變粗；而B元素只是讓文字變粗，并不加大。
2.1.5 下畫線與刪除線
有些時候希望文字帶下畫線顯示，例如可以使用下畫線元素突出顯示某些說明文字。刪除線一般在修改文章時常常用到，表示原來的這部分文字被刪除了。
1. 被反對使用的元素
在HTML的早期版本中，使用<STRIKE>元素來標注帶有刪除線的文字，使用<U>元素來標注帶有下畫線的文字。不過<STRIKE>元素與<U>元素都是在HTML 4以上版本中被反對的元素。所謂“被反對”，是指不希望再使用的元素，被反對的原因在后繼章節里還會介紹。
雖然<STRIKE>元素與<U>元素是被反對的元素，但是大多瀏覽器還是支持該元素，而且筆者相信在將來很長一段時間里，瀏覽器也不會取消對這些反對元素的支持，因此讀者可以放心地使用這些元素。
2. 被贊成使用的元素
從HTML 4.0版本開始，正式使用了兩個新元素：<DEL>元素（刪除線）和<INS>元素（插入線），用來替代<STRIKE>元素與<U>元素，不過它們在瀏覽器中的顯示效果都是一樣的。
刪除線與下畫線元素的語法格式如下。
<STRIKE>刪除線</STRIKE> <U>下畫線</U> <DEL>刪除線</DEL> <INS>插入線</INS>
【示例2-5】設置刪除線和下畫線，注意加粗的代碼。
01 <HTML> 02 <HEAD> 03 <TITLE>刪除線與下畫線</TITLE> 04 </HEAD> 05 <BODY> 06 <STRIKE> 刪除線</STRIKE><BR> 07 <U>下畫線</U><BR> 08 <DEL>刪除線</DEL><BR> 09 <INS>插入線</INS><BR> 10 </BODY> 11 </HTML>
第6～9行分別演示了兩種不同的下畫線與刪除線標記的使用。示例2-5的運行效果如圖2.8所示。
圖2.8 使用刪除線和下畫線運行效果
注意
<STRIKE></STRIKE>標記可以簡寫為<S></S>。
2.1.6 上標與下標
在描述一些復雜的表達式，特別是一些數學公式時，經常會用到上標和下標，如3的平方（32）。在HTML頁面中，上標采用<SUB>元素，下標采用<SUP>元素。其語法格式如下。
<SUB>作為上標的文字</SUB> <SUP>作為下標的文字</SUP>
【示例2-6】設置上標和下標，注意加粗代碼。
01 <HTML> 02 <HEAD> 03 <TITLE>上標與下標</TITLE> 04 </HEAD> 05 <BODY> 06 <FONT SIZE=4> 07 水的分子式是：H<SUB>2</SUB>O<BR> 08 3<SUP>2</SUP>等于9 09 </FONT> 10 </BODY> 11 </HTML>
第7行使用<SUB>標記顯示下標效果，第8行使用<SUP>標記顯示上標效果。示例2-6的運行效果如圖2.9所示。
圖2.9 使用上標和下標的運行效果
2.1.7 等寬字
等寬字體一般針對的是英文字體，所謂等寬，就是像打字機文本一樣的字體，在默認情況下，這種字體是Courier字體。通常只有在顯示計算機代碼等情況下，才會使用等寬字體。HTML中的<TT>元素可以用來設置等寬字體。使用<TT></TT>標記表明標注的文字為類似打印機文本（typewriter text）使用的等寬字體。TT元素的語法格式如下。
<TT>英文文字</TT>
由于該內容比較簡單，使用也很少，在此就不舉例了。
- 中文版Flash CC完全自學教程
- 眾妙之門：網站UI設計之道2
- jQuery+Bootstrap Web開發案例教程（在線實訓版）
- Dreamweaver CS6網頁設計與制作教程
- 眾妙之門：自由網站設計師成功之道
- 全能網頁設計師精煉手冊
- HTML+CSS+JavaScript網頁設計與布局：從新手到高手
- 淘寶店鋪頁面設計與裝修實戰教程
- Web開發者晉級之道：架構、模式和領域驅動設計
- ASP快速建站全程實錄
- 巧學巧用Dreamweaver CS6制作網頁
- Dreamweaver CS6網頁設計入門、進階與提高
- 精通網站建設：100%全能建站密碼
- 中文版Dreamweaver CS6高手之道
- 移動優先與響應式Web設計(2冊)