HTML對字型的所有操作詳解（經典）
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> /* 如果現實亂碼請在head標籤裡面新增這條語句，這是為了統一字型格式，我們採用常見的utf-8
一、文字樣式設定的基本標籤—<font>
設定字型樣式的基本標籤是<font></font>，被其包含的文字為樣式作用區。在初學者的HTML程式碼編寫中，<font></font>容易被多重巢狀，如<font 屬性1=值1><font 屬性2=值2>文字</font></font>。還有一種情況是標籤巢狀錯位，如<font><p>文字</font></p>。為了規範程式碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。
二 、 設定文字的顏色
color是<font></font>標籤的屬性之一，用於設定文字顏色。編寫程式碼如程式碼2.1所示。
程式碼2.1 字型顏色的設定：font_color.htm
<html>
<head>
<title>字型顏色的設定</title>
</head>
<body>
淺紅色文字：<font color="#dd0000">網路人VS灰鴿子</font><br />
深紅色文字：<font color="#660000">網路人VS灰鴿子</font><br />
淺綠色文字：<font color="#00dd00">網路人VS灰鴿子</font><br />
深綠色文字：<font color="#006600">網路人VS灰鴿子</font><br />
淺藍色文字：<font color="#0000dd">網路人VS灰鴿子</font><br />
深藍色文字：<font color="#000066">網路人VS灰鴿子</font><br />
淺黃色文字：<font color="#dddd00">網路人VS灰鴿子</font><br />
深黃色文字：<font color="#666600">網路人VS灰鴿子</font><br />
淺青色文字：<font color="#00dddd">網路人VS灰鴿子</font><br />
深青色文字：<font color="#006666">網路人VS灰鴿子</font><br />
淺紫色文字：<font color="#dd00dd">網路人VS灰鴿子</font><br />
深紫色文字：<font color="#660066">網路人VS灰鴿子</font><br />
</body>
</html
效果現實如圖一：
圖一 圖二 圖三
三、設定文字的尺寸
size也是<font></font>標籤的屬性，用於設定文字大小。size的值為1-7，預設為3。我們可以size 屬性值之前加上“＋”、“－”字元，來指定相對於字號初始值的增量或減量。編寫程式碼如程式碼2.2所示。
程式碼2.2 字型尺寸的設定：font_size.htm
<html>
<head>
<title>字型尺寸的設定</title>
</head>
<body>
size為1：<font size="1">HTML學習</font><br />
size為2：<font size="2">HTML學習</font><br />
size為3：<font size="3">HTML學習</font><br />
size為4：<font size="4">HTML學習</font><br />
size為5：<font size="5">HTML學習</font><br />
size為6：<font size="6">HTML學習</font><br />
size為7：<font size="7">HTML學習</font><br />
</body>
</html>
瀏覽效果現實如圖二：
可嘗試在size值前面加上“＋”、“－”字元，更靈活地設定文字尺寸
四、 設定文字的字型
face也是<font></font>標籤的屬性，用於設定文字字型（字型）。HTML網頁中顯示的字型從瀏覽端的系統中呼叫，所以為了保持字型一致，建議採用宋體，HTML頁面也是預設採用宋體。
程式碼2.3 字型字型的設定：font_face.htm 在標籤中新增style="font-family:宋體"這個類別就OK
<html>
<head>
<title>字型字型的設定</title>
</head>
<body>
字型為宋體：<font style="font-family:宋體">網路人VS灰鴿子</font><br />
字型為楷體：<font style="font-family:楷體">網路人VS灰鴿子</font><br />字型為黑體：<font style="font-family:黑體">網路人VS灰鴿子</font><br />
字型為隸書：<font style="font-family:隸書">網路人VS灰鴿子</font><br/>
</body>
</html>
瀏覽效果如圖三所示。
五、 使文字傾斜
用雙標籤<i></i>可使被作用文字傾斜，達到特殊的效果，例如文章的日期。<em></em>被稱為強調標籤，也是斜體，目前使用比<i></i>標籤更頻繁，其編寫方法如下：
<i>這是斜體文字</i>
<em>這也是斜體文字</em>
六、 使文字加粗
用雙標籤<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。<strong></strong>被稱為特別強調標籤，也是文字加粗，目前使用比<b></b>標籤更頻繁，其編寫方法如下：
<b>這是粗體文字</b>
<strong>這也是粗體文字</strong>
七、處理網頁中的特殊字元
在HTML中，有一些字元有特殊含義，例如“<”和“>”是標籤的左括號和右括號，而標籤是控制HTML顯示的，標籤本身只能被瀏覽器解析，並不能在頁面中顯示。那麼，該怎樣在HTML中顯示“<”和“>”呢？HTML規定了一些特殊字元的寫法，以便在網頁中顯示，如表1.1所示。
表1.1 HTML中的特殊字元
特殊符號 |
HTML程式碼 |
特殊符號 |
HTML程式碼 |
< |
< |
?（商標符號） |
™ |
> |
> |
?（註冊符號） |
® |
“”（英文半形） |
" |
× |
× |
§ |
§ |
?（版權符號） |
© |
<html>
<head>
<title>特殊字元的設定</title>
</head>
<body>
<font size="5">
標籤的顯示方法：<HTML><br />
引號的顯示方法："英文半形雙引號"<br />
商標的顯示方法：™<br />
註冊符號的顯示方法：®<br />
版權符號的顯示方法：©<br />
顯示§<br />
顯示×
</font>
</body>
</html>
瀏覽效果如圖2.6所示。
圖4.12 特殊字元的設定
———— 說明：單獨顯示符號&必須用程式碼&。
十、 如何更方便地忽略瀏覽器對部分HTML的解析
如果在網頁中作一個類似本書的HTML程式碼示例，恐怕得把所有的<和>轉換成<和>，顯得比較麻煩。HTML程式碼中的<plaintext>和<xmp></xmp>可以輕鬆解決這個問題。
<plaintext>是單標籤，它插入到HTML程式碼中時，其後面的所有HTML標籤全部失效，即瀏覽器對<plaintext>後面所有的HTML標籤不作解析，直接在頁面上顯示。
<xmp></xmp>是雙標籤，它只使其包含的內容中的標籤失效，<xmp></xmp>的使用更為普遍。編寫程式碼如程式碼2.7所示。
程式碼2.7 忽略標籤的設定：
<html>
<head>
<title>忽略標籤的設定</title>
</head>
<body>
<h2>沁園春·長沙</h2>
<xmp>獨立寒秋，<strong>湘江北去</strong>，橘子洲頭。 <br />看萬山紅遍，層林盡染； <br />漫江碧透，<u>百舸爭流。</u> <br /></xmp>
鷹擊長空，<strong>魚翔淺底，</strong> <br />萬類霜天競自由。 <br />悵寥廓，<u>問蒼茫大地</u>，誰主沉浮？<br />
<plaintext>
攜來百侶曾遊，<br />憶往昔崢嶸歲月稠。 <br /> 恰同學少年，風華正茂； <br /> 書生意氣，揮斥方遒。 <br /> 指點江山，激揚文字， <br /> 糞土當年萬戶侯。 <br /> 曾記否，<strong>到中流擊水</strong>，浪遏飛舟！
</body>
</html>
瀏覽效果如圖2.7所示。
圖2.7 忽略標籤的設定
十一、 其他文字修飾方法
為了滿足不同領域的需要，HTML還有其他修飾文字的標籤。比較常用的有上標格式標籤和下標格式標籤。某些場合甚至要用到刪除效果，即可用HTML的中劃線標籤。
— 上標格式標籤為雙標籤<sup></sup>，多用於數學指數的表示，比如某個數的平方或立方。
— 下標格式標籤為雙標籤<sub></sub>，多用於註釋，以及數學的底數表示。
— 中劃線標籤為雙標籤<strike></strike>，多用於刪除效果。
編寫程式碼如程式碼2.8所示。
程式碼2.8 其他修飾標籤的設定
<html>
<head>
<title>其他修飾標籤的設定</title>
</head>
<body>
<font size="5">
沁園春<sup>長沙</sup>！<br />
數學指數的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁園春<sub>長沙</sub>！<br />
數學底數的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
刪除效果：<strike>我被刪除了</strike>
</font>
</body>
</html>
瀏覽效果如圖2.8所示。
圖4.14 其他修飾標籤的設定
十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標籤產生這些效果，現將常用的標籤列舉如下：
<B> </B> 粗體 HTML語言
<I> </I> 斜體 HTML語言
<U> </U> 加下劃線 HTML語言
<TT> <TT> 打字機字型 HTML語言
<BIG> </BIG> 大型字型 HTML語言
<SMALL> </SMALL> 小型字型 HTML語言
<BLINK> </BLINK> 閃爍效果 HTML語言
<EM> </EM> 表示強調，一般為斜體 HTML語言
<STRONG> </STRONG> 表示特別強調，一般為粗體 HTML語言
<CITE> </CITE> 用於引證、舉例，一般為斜體 HTML語言
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
