欧美午夜福利一级高清一区二区,国产精品尤物在线

主頁(yè) > 知識(shí)庫(kù) > HTML網(wǎng)頁(yè)各種字體格式的細(xì)節(jié)修飾

HTML網(wǎng)頁(yè)各種字體格式的細(xì)節(jié)修飾

本節(jié)從文字的細(xì)節(jié)修飾入手，使讀者能把握HTML的各種字體格式的變化，制作出更為專業(yè)的網(wǎng)頁(yè)。
4.2 文字的多樣化修飾
上一節(jié)學(xué)習(xí)了大塊段落的各種設(shè)置，對(duì)于文字本身修飾似乎更加吸引人。本節(jié)從文字的細(xì)節(jié)修飾入手，使讀者能把握HTML的各種字體格式的變化，制作出更為專業(yè)的網(wǎng)頁(yè)。
4.2.1 文字樣式設(shè)置的基本標(biāo)簽—
設(shè)置字體樣式的基本標(biāo)簽是，被其包含的文本為樣式作用區(qū)。在初學(xué)者的HTML代碼編寫(xiě)中，容易被多重嵌套，如文本。還有一種情況是標(biāo)簽嵌套錯(cuò)位，如文本。為了規(guī)范代碼的編寫(xiě)，避免不必要的錯(cuò)誤，讀者在初學(xué)時(shí)一定要謹(jǐn)慎。
4.2.2 設(shè)置文字的顏色
color是標(biāo)簽的屬性之一，用于設(shè)置文字顏色。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為font_color.htm，編寫(xiě)代碼如代碼4.7所示。
代碼4.7 字體顏色的設(shè)置：font_color.htm
<html>
<head>
<title>字體顏色的設(shè)置</title>
</head>
<body>
淺紅色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深紅色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
淺綠色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深綠色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
淺藍(lán)色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深藍(lán)色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
淺黃色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深黃色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
淺青色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深青色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
淺紫色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
深紫色文字：HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么 
</body>
</html>
在瀏覽器地址欄輸入http://localhost/font_color.htm，瀏覽效果如圖4.7所示。

圖4.7 字體顏色的設(shè)置
讀者不但可以從代碼4.7中學(xué)到color屬性在font標(biāo)簽中的用法，還可以熟悉各種顏色的表示方法。
4.2.3 設(shè)置文字的尺寸
size也是標(biāo)簽的屬性，用于設(shè)置文字大小。size的值為1-7，默認(rèn)為3。我們可以size 屬性值之前加上“＋”、“－”字符，來(lái)指定相對(duì)于字號(hào)初始值的增量或減量。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為font_size.htm，編寫(xiě)代碼如代碼4.8所示。
代碼4.8 字體尺寸的設(shè)置：font_size.htm
<html>
<head>
<title>字體尺寸的設(shè)置</title>
</head>
<body>
size為1：HTML學(xué)習(xí) 
size為2：HTML學(xué)習(xí) 
size為3：HTML學(xué)習(xí) 
size為4：HTML學(xué)習(xí) 
size為5：HTML學(xué)習(xí) 
size為6：HTML學(xué)習(xí) 
size為7：HTML學(xué)習(xí) 
</body>
</html>
在瀏覽器地址欄輸入http://localhost/font_size.htm，瀏覽效果如圖4.8所示。

圖4.8 字體尺寸的設(shè)置
讀者可嘗試在size值前面加上“＋”、“－”字符，更靈活地設(shè)置文字尺寸。
4.2.4 設(shè)置文字的字體
face也是標(biāo)簽的屬性，用于設(shè)置文字字體（字型）。HTML網(wǎng)頁(yè)中顯示的字型從瀏覽端的系統(tǒng)中調(diào)用，所以為了保持字型一致，建議采用宋體，HTML頁(yè)面也是默認(rèn)采用宋體。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為font_face.htm，編寫(xiě)代碼如代碼4.9所示。
代碼4.9 字體字型的設(shè)置：font_face.htm
<html>
<head>
<title>字體字型的設(shè)置</title>
</head>
<body>
字型為宋體：沁園春·長(zhǎng)沙-毛澤東 
字型為楷體：沁園春·長(zhǎng)沙-毛澤東 
字型為黑體：沁園春·長(zhǎng)沙-毛澤東 
字型為隸書(shū)：沁園春·長(zhǎng)沙-毛澤東
</body>
</html>
在瀏覽器地址欄輸入http://localhost/font_face.htm，瀏覽效果如圖4.9所示。

圖4.9 字體字型的設(shè)置
筆者把被修改字型部分的文字尺寸設(shè)置為5號(hào)，方便讀者查看。
4.2.5 使文字傾斜
用雙標(biāo)簽可使被作用文字傾斜，達(dá)到特殊的效果，例如文章的日期。被稱為強(qiáng)調(diào)標(biāo)簽，也是斜體，目前使用比標(biāo)簽更頻繁，其編寫(xiě)方法如下：
這是斜體文字
這也是斜體文字
4.2.6 使文字加粗
用雙標(biāo)簽可使被作用文字加粗，是文字更加醒目，例如文章的標(biāo)題部分。被稱為特別強(qiáng)調(diào)標(biāo)簽，也是文字加粗，目前使用比標(biāo)簽更頻繁，其編寫(xiě)方法如下：
這是粗體文字
這也是粗體文字
4.2.7 給文字加下劃線
用雙標(biāo)簽可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為font_style.htm，編寫(xiě)代碼如代碼4.10所示。
代碼4.10 文字修飾的設(shè)置：font_style.htm
<html>
<head>
<title>字體修飾的設(shè)置</title>
</head>
<body>
斜體：沁園春·長(zhǎng)沙-毛澤東 
加粗體：沁園春·長(zhǎng)沙-毛澤東 
下劃線：沁園春·長(zhǎng)沙-毛澤東 
斜體加粗體下劃線：沁園春·長(zhǎng)沙-毛澤東
</body>
</html>
在瀏覽器地址欄輸入http://localhost/font_style.htm，瀏覽效果如圖4.10所示。

圖4.10 字體修飾的設(shè)置
筆者把<body></body>內(nèi)的所有文字尺寸設(shè)置為5號(hào)，方便讀者查看。
— 注意：在多個(gè)標(biāo)簽包含同一塊文字時(shí)，其包含順序不能錯(cuò)位。
4.2.8 多種標(biāo)題樣式的使用
網(wǎng)頁(yè)的文章中，為了凸顯標(biāo)題的重要性，標(biāo)題的樣式比較特殊。HTML技術(shù)保護(hù)了一套針對(duì)標(biāo)題的樣式標(biāo)簽，分別為雙標(biāo)簽<h1>到<h6>，文字尺寸從大到小代表不同級(jí)別的標(biāo)題。標(biāo)題標(biāo)簽有一個(gè)特點(diǎn)，獨(dú)占一行、文字加粗、文字居中。這樣，在設(shè)置標(biāo)題的時(shí)候就很輕松了，并且可設(shè)多級(jí)標(biāo)題。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為font_h.htm，編寫(xiě)代碼如代碼4.11所示。
代碼4.11 標(biāo)題的設(shè)置：font_h.htm
<html>
<head>
<title>標(biāo)題的設(shè)置</title>
</head>
<body>
<h1>一號(hào)標(biāo)題</h1>
<h2>二號(hào)標(biāo)題</h2>
<h3>三號(hào)標(biāo)題</h3>
<h4>四號(hào)標(biāo)題</h4>
<h5>五號(hào)標(biāo)題</h5>
<h6>六號(hào)標(biāo)題</h6>
<h1>財(cái)富雜志：谷歌為何不會(huì)盛極而衰</h1>
　　　<h3>遭遇潛在問(wèn)題</h3>
　　    一些業(yè)內(nèi)人士認(rèn)為，長(zhǎng)期壟斷互聯(lián)網(wǎng)搜索和廣告市場(chǎng)谷歌可能會(huì)盛極而衰。...與此同時(shí)，谷歌近日推出的多項(xiàng)新計(jì)劃，例如開(kāi)放手機(jī)聯(lián)盟、社交網(wǎng)站通用平臺(tái)OpenSocial、以及可能投資數(shù)十億美元競(jìng)購(gòu)無(wú)線頻段，也遭到了廣泛的質(zhì)疑。
　　<h3>將繼續(xù)壟斷搜索</h3>
　　    最近有一些文章稱，如果出現(xiàn)更好的搜索引擎，人們會(huì)毫不猶豫地放棄谷歌。但是，即使真有更好的搜索引擎出現(xiàn)，谷歌仍然可以在一段時(shí)間內(nèi)屹立不倒。...在這種情況下，網(wǎng)站速度往往會(huì)成為決定勝負(fù)的關(guān)鍵。
</body>
</html>
在瀏覽器地址欄輸入http://localhost/font_h.htm，瀏覽效果如圖4.11所示。

圖4.11 標(biāo)題的設(shè)置
4.2.9 學(xué)會(huì)處理網(wǎng)頁(yè)中的特殊字符
在HTML中，有一些字符有特殊含義，例如“<”和“>”是標(biāo)簽的左括號(hào)和右括號(hào)，而標(biāo)簽是控制HTML顯示的，標(biāo)簽本身只能被瀏覽器解析，并不能在頁(yè)面中顯示。那么，該怎樣在HTML中顯示“<”和“>”呢？HTML規(guī)定了一些特殊字符的寫(xiě)法，以便在網(wǎng)頁(yè)中顯示，如表4.1所示。
表4.1 HTML中的特殊字符

特殊符號(hào)
HTML代碼
特殊符號(hào)
HTML代碼
<
<
™（商標(biāo)符號(hào)）
™
>
>
®（注冊(cè)符號(hào)）
®
“”（英文半角）
"
×
×
§
§
©（版權(quán)符號(hào)）
©
在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為string.htm，編寫(xiě)string.htm代碼如代碼4.12所示。
代碼4.12 特殊字符的設(shè)置：string.htm
<html>
<head>
<title>特殊字符的設(shè)置</title>
</head>
<body>

標(biāo)簽的顯示方法：<HTML> 
引號(hào)的顯示方法："英文半角雙引號(hào)" 
商標(biāo)的顯示方法：™ 
注冊(cè)符號(hào)的顯示方法：® 
版權(quán)符號(hào)的顯示方法：© 
顯示§ 
顯示×

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

圖4.12 特殊字符的設(shè)置
— 說(shuō)明：?jiǎn)为?dú)顯示符號(hào)&必須用代碼&。
4.2.10 如何更方便地忽略瀏覽器對(duì)部分HTML的解析
如果在網(wǎng)頁(yè)中作一個(gè)類似本書(shū)的HTML代碼示例，恐怕得把所有的<和>轉(zhuǎn)換成<和>，顯得比較麻煩。HTML代碼中的<plaintext>和<xmp></xmp>可以輕松解決這個(gè)問(wèn)題。
<plaintext>是單標(biāo)簽，它插入到HTML代碼中時(shí)，其后面的所有HTML標(biāo)簽全部失效，即瀏覽器對(duì)<plaintext>后面所有的HTML標(biāo)簽不作解析，直接在頁(yè)面上顯示。
<xmp></xmp>是雙標(biāo)簽，它只使其包含的內(nèi)容中的標(biāo)簽失效，<xmp></xmp>的使用更為普遍。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為html.htm，編寫(xiě)代碼如代碼4.13所示。
代碼4.13 忽略標(biāo)簽的設(shè)置：html.htm
<html>
<head>
<title>忽略標(biāo)簽的設(shè)置</title>
</head>
<body>
<h2>沁園春·長(zhǎng)沙</h2>
<xmp>獨(dú)立寒秋，湘江北去，橘子洲頭。 看萬(wàn)山紅遍，層林盡染； 漫江碧透，百舸爭(zhēng)流。 </xmp>
鷹擊長(zhǎng)空，魚(yú)翔淺底， 萬(wàn)類霜天競(jìng)自由。 悵寥廓，問(wèn)蒼茫大地，誰(shuí)主沉浮？ 
<plaintext>
攜來(lái)百侶曾游， 憶往昔崢嶸歲月稠。 恰同學(xué)少年，風(fēng)華正茂； 書(shū)生意氣，揮斥方遒。 指點(diǎn)江山，激揚(yáng)文字， 糞土當(dāng)年萬(wàn)戶侯。 曾記否，到中流擊水，浪遏飛舟！
</body>
</html>
在瀏覽器地址欄輸入http://localhost/string.htm，瀏覽效果如圖4.13所示。

圖4.13 忽略標(biāo)簽的設(shè)置
4.2.11 其他文字修飾方法
為了滿足不同領(lǐng)域的需要，HTML還有其他修飾文字的標(biāo)簽。比較常用的有上標(biāo)格式標(biāo)簽和下標(biāo)格式標(biāo)簽。某些場(chǎng)合甚至要用到刪除效果，即可用HTML的中劃線標(biāo)簽。
— 上標(biāo)格式標(biāo)簽為雙標(biāo)簽，多用于數(shù)學(xué)指數(shù)的表示，比如某個(gè)數(shù)的平方或立方。
— 下標(biāo)格式標(biāo)簽為雙標(biāo)簽，多用于注釋，以及數(shù)學(xué)的底數(shù)表示。
— 中劃線標(biāo)簽為雙標(biāo)簽<strike></strike>，多用于刪除效果。
在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件，命名為other.htm，編寫(xiě)代碼如代碼4.14所示。
代碼4.14 其他修飾標(biāo)簽的設(shè)置：other.htm
<html>
<head>
<title>其他修飾標(biāo)簽的設(shè)置</title>
</head>
<body>

沁園春長(zhǎng)沙！ 
數(shù)學(xué)指數(shù)的表示：23=8、1002=10000 <hr />
沁園春長(zhǎng)沙！ 
數(shù)學(xué)底數(shù)的表示：log381=4、log5125=3 <hr />
刪除效果：<strike>我被刪除了</strike>

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

圖4.14 其他修飾標(biāo)簽的設(shè)置

標(biāo)簽：延安四川白銀樂(lè)山阿拉善盟貴陽(yáng) 錫林郭勒盟濟(jì)南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML網(wǎng)頁(yè)各種字體格式的細(xì)節(jié)修飾》，本文關(guān)鍵詞 HTML,網(wǎng)頁(yè),各種,字體,格式,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。