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語言