HTML網頁各種字體格式的細節修飾

作者：Eve Cole 更新時間：2025-06-07 00:48:02

本節從文字的細節修飾入手，使讀者能把握HTML的各種字體格式的變化，製作出更為專業的網頁。

4.2 文字的多樣化修飾

上一節學習了大塊段落的各種設置，對於文字本身修飾似乎更加吸引人。本節從文字的細節修飾入手，使讀者能把握HTML的各種字體格式的變化，製作出更為專業的網頁。

4.2.1 文字樣式設置的基本標籤—

設置字體樣式的基本標籤是，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，容易被多重嵌套，如文本。還有一種情況是標籤嵌套錯位，如文本。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。

4.2.2 設置文字的顏色

color是標籤的屬性之一，用於設置文字顏色。在D:/web/目錄下創建網頁文件，命名為font_color.htm，編寫代碼如代碼4.7所示。

代碼4.7 字體顏色的設置：font_color.htm

<html>

<head>

<title>字體顏色的設置</title>

</head>

<body>

淺紅色文字：HTML學習的本質就是該是什麼就用什麼

深紅色文字：HTML學習的本質就是該是什麼就用什麼

淺綠色文字：HTML學習的本質就是該是什麼就用什麼

深綠色文字：HTML學習的本質就是該是什麼就用什麼

淺藍色文字：HTML學習的本質就是該是什麼就用什麼

深藍色文字：HTML學習的本質就是該是什麼就用什麼

淺黃色文字：HTML學習的本質就是該是什麼就用什麼

深黃色文字：HTML學習的本質就是該是什麼就用什麼

淺青色文字：HTML學習的本質就是該是什麼就用什麼

深青色文字：HTML學習的本質就是該是什麼就用什麼

淺紫色文字：HTML學習的本質就是該是什麼就用什麼

深紫色文字：HTML學習的本質就是該是什麼就用什麼

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_color.htm，瀏覽效果如圖4.7所示。

圖4.7 字體顏色的設置

讀者不但可以從代碼4.7中學到color屬性在font標籤中的用法，還可以熟悉各種顏色的表示方法。

4.2.3 設置文字的尺寸

size也是標籤的屬性，用於設置文字大小。 size的值為1-7，默認為3。我們可以size 屬性值之前加上＋、－字符，來指定相對於字號初始值的增量或減量。在D:/web/目錄下創建網頁文件，命名為font_size.htm，編寫代碼如代碼4.8所示。

代碼4.8 字體尺寸的設置：font_size.htm

<html>

<head>

<title>字體尺寸的設置</title>

</head>

<body>

size為1：HTML學習

size為2：HTML學習

size為3：HTML學習

size為4：HTML學習

size為5：HTML學習

size為6：HTML學習

size為7：HTML學習

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_size.htm，瀏覽效果如圖4.8所示。

圖4.8 字體尺寸的設置

讀者可嘗試在size值前面加上＋、－字符，更靈活地設置文字尺寸。

4.2.4 設置文字的字體

face也是標籤的屬性，用於設置文字字體（字型）。 HTML網頁中顯示的字型從瀏覽端的系統中調用，所以為了保持字型一致，建議採用宋體，HTML頁面也是默認採用宋體。在D:/web/目錄下創建網頁文件，命名為font_face.htm，編寫代碼如代碼4.9所示。

代碼4.9 字體字型的設置：font_face.htm

<html>

<head>

<title>字體字型的設置</title>

</head>

<body>

字型為宋體：沁園春·長沙-毛澤東

字型為楷體：沁園春·長沙-毛澤東

字型為黑體：沁園春·長沙-毛澤東

字型為隸書：沁園春·長沙-毛澤東

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_face.htm，瀏覽效果如圖4.9所示。

圖4.9 字體字型的設置

筆者把被修改字型部分的文字尺寸設置為5號，方便讀者查看。

4.2.5 使文字傾斜

用雙標籤可使被作用文字傾斜，達到特殊的效果，例如文章的日期。 被稱為強調標籤，也是斜體，目前使用比標籤更頻繁，其編寫方法如下：

這是斜體文字

這也是斜體文字

4.2.6 使文字加粗

用雙標籤可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。 被稱為特別強調標籤，也是文字加粗，目前使用比標籤更頻繁，其編寫方法如下：

這是粗體文字

這也是粗體文字

4.2.7 給文字加下劃線

用雙標籤可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:/web/目錄下創建網頁文件，命名為font_style.htm，編寫代碼如代碼4.10所示。

代碼4.10 文字修飾的設置：font_style.htm

<html>

<head>

<title>字體修飾的設置</title>

</head>

<body>

斜體：沁園春·長沙-毛澤東

加粗體：沁園春·長沙-毛澤東

下劃線：沁園春·長沙-毛澤東

斜體加粗體下劃線：沁園春·長沙-毛澤東

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_style.htm，瀏覽效果如圖4.10所示。

圖4.10 字體修飾的設置

筆者把<body></body>內的所有文字尺寸設置為5號，方便讀者查看。

— 注意：在多個標籤包含同一塊文字時，其包含順序不能錯位。

4.2.8 多種標題樣式的使用

網頁的文章中，為了凸顯標題的重要性，標題的樣式比較特殊。 HTML技術保護了一套針對標題的樣式標籤，分別為雙標籤<h1>到<h6>，文字尺寸從大到小代表不同級別的標題。標題標籤有一個特點，獨占一行、文字加粗、文字居中。這樣，在設置標題的時候就很輕鬆了，並且可設多級標題。在D:/web/目錄下創建網頁文件，命名為font_h.htm，編寫代碼如代碼4.11所示。

代碼4.11 標題的設置：font_h.htm

<html>

<head>

<title>標題的設置</title>

</head>

<body>

<h1>財富雜誌：谷歌為何不會盛極而衰</h1>

<h3>遭遇潛在問題</h3>

一些業內人士認為，長期壟斷互聯網搜索和廣告市場谷歌可能會盛極而衰。 ...與此同時，谷歌近日推出的多項新計劃，例如開放手機聯盟、社交網站通用平台OpenSocial、以及可能投資數十億美元競購無線頻段，也遭到了廣泛的質疑。

<h3>將繼續壟斷搜索</h3>

最近有一些文章稱，如果出現更好的搜索引擎，人們會毫不猶豫地放棄谷歌。但是，即使真有更好的搜索引擎出現，谷歌仍然可以在一段時間內屹立不倒。 ...在這種情況下，網站速度往往會成為決定勝負的關鍵。

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_h.htm，瀏覽效果如圖4.11所示。

圖4.11 標題的設置

4.2.9 學會處理網頁中的特殊字符

在HTML中，有一些字符有特殊含義，例如<和>是標籤的左括號和右括號，而標籤是控制HTML顯示的，標籤本身只能被瀏覽器解析，並不能在頁面中顯示。那麼，該怎樣在HTML中顯示<和>呢？ HTML規定了一些特殊字符的寫法，以便在網頁中顯示，如表4.1所示。

表4.1 HTML中的特殊字符

特殊符號

HTML代碼

特殊符號

HTML代碼

™（商標符號）

™

®（註冊符號）

（英文半角）

©（版權符號）

在D:/web/目錄下創建網頁文件，命名為string.htm，編寫string.htm代碼如代碼4.12所示。

代碼4.12 特殊字符的設置：string.htm

<html>

<head>

<title>特殊字符的設置</title>

</head>

<body>

標籤的顯示方法：<HTML>

引號的顯示方法："英文半角雙引號"

商標的顯示方法：™

註冊符號的顯示方法：®

顯示§

顯示×

</body>

</html>

在瀏覽器地址欄輸入http://localhost/string.htm，瀏覽效果如圖4.12所示。

圖4.12 特殊字符的設置

— 說明：單獨顯示符號&必須用代碼&。

4.2.10 如何更方便地忽略瀏覽器對部分HTML的解析

如果在網頁中作一個類似本書的HTML代碼示例，恐怕得把所有的<和>轉換成<和>，顯得比較麻煩。 HTML代碼中的<plaintext>和<xmp></xmp>可以輕鬆解決這個問題。

<plaintext>是單標籤，它插入到HTML代碼中時，其後面的所有HTML標籤全部失效，即瀏覽器對<plaintext>後面所有的HTML標籤不作解析，直接在頁面上顯示。

<xmp></xmp>是雙標籤，它只使其包含的內容中的標籤失效，<xmp></xmp>的使用更為普遍。在D:/web/目錄下創建網頁文件，命名為html.htm，編寫代碼如代碼4.13所示。

代碼4.13 忽略標籤的設置：html.htm

<html>

<head>

<title>忽略標籤的設置</title>

</head>

<body>

<xmp>獨立寒秋，湘江北去，橘子洲頭。 看萬山紅遍，層林盡染； 漫江碧透，百舸爭流。 </xmp>

鷹擊長空，魚翔淺底， 萬類霜天競自由。 悵寥廓，問蒼茫大地，誰主沉浮？

攜來百侶曾遊， 憶往昔崢嶸歲月稠。 恰同學少年，風華正茂； 書生意氣，揮斥方遒。 指點江山，激揚文字， 糞土當年萬戶侯。 曾記否，到中流擊水，浪遏飛舟！

</body>

</html>

在瀏覽器地址欄輸入http://localhost/string.htm，瀏覽效果如圖4.13所示。

圖4.13 忽略標籤的設置

4.2.11 其他文字修飾方法

為了滿足不同領域的需要，HTML還有其他修飾文字的標籤。比較常用的有上標格式標籤和下標格式標籤。某些場合甚至要用到刪除效果，即可用HTML的中劃線標籤。

— 上標格式標籤為雙標籤，多用於數學指數的表示，比如某個數的平方或立方。

— 下標格式標籤為雙標籤，多用於註釋，以及數學的底數表示。

— 中劃線標籤為雙標籤<strike></strike>，多用於刪除效果。

在D:/web/目錄下創建網頁文件，命名為other.htm，編寫代碼如代碼4.14所示。

代碼4.14 其他修飾標籤的設置：other.htm

<html>

<head>

<title>其他修飾標籤的設置</title>

</head>

<body>

沁園春長沙！

數學指數的表示：23=8、1002=10000 <hr />

沁園春長沙！

數學底數的表示：log381=4、log5125=3 <hr />

刪除效果：<strike>我被刪除了</strike>

</body>

</html>

在瀏覽器地址欄輸入http://localhost/other.htm，瀏覽效果如圖4.14所示。

圖4.14 其他修飾標籤的設置