HTML字體屬性

心如明月 2013-01-15

展開全文

HTML字體屬性

一、文字樣式設(shè)置的基本標(biāo)簽—

設(shè)置字體樣式的基本標(biāo)簽是，被其包含的文本為樣式作用區(qū)。在初學(xué)者的HTML代碼編寫中，容易被多重嵌套，如文本。還有一種情況是標(biāo)簽嵌套錯位，如文本。為了規(guī)范代碼的編寫，避免不必要的錯誤，讀者在初學(xué)時一定要謹(jǐn)慎。

二 、設(shè)置文字的顏色

color是標(biāo)簽的屬性之一，用于設(shè)置文字顏色。編寫代碼如代碼2.1所示。

代碼2.1 字體顏色的設(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>

瀏覽效果如圖2.2所示。

圖2.1 字體顏色的設(shè)置

三、設(shè)置文字的尺寸

size也是標(biāo)簽的屬性，用于設(shè)置文字大小。size的值為1-7，默認(rèn)為3。我們可以size 屬性值之前加上“＋”、“－”字符，來指定相對于字號初始值的增量或減量。編寫代碼如代碼2.2所示。

代碼2.2 字體尺寸的設(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>

瀏覽效果如圖2.2所示。

圖4.8 字體尺寸的設(shè)置

可嘗試在size值前面加上“＋”、“－”字符，更靈活地設(shè)置文字尺寸

四、設(shè)置文字的字體

face也是標(biāo)簽的屬性，用于設(shè)置文字字體（字型）。HTML網(wǎng)頁中顯示的字型從瀏覽端的系統(tǒng)中調(diào)用，所以為了保持字型一致，建議采用宋體，HTML頁面也是默認(rèn)采用宋體。編寫代碼如代碼2.3所示。

代碼2.3 字體字型的設(shè)置：font_face.htm

<html>

<head>

<title>字體字型的設(shè)置</title>

</head>

<body>

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

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

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

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

</body>

</html>

瀏覽效果如圖2.3所示。

圖4.9 字體字型的設(shè)置

五、使文字傾斜

用雙標(biāo)簽可使被作用文字傾斜，達(dá)到特殊的效果，例如文章的日期。被稱為強(qiáng)調(diào)標(biāo)簽，也是斜體，目前使用比標(biāo)簽更頻繁，其編寫方法如下：

這是斜體文字

這也是斜體文字

六、使文字加粗

用雙標(biāo)簽可使被作用文字加粗，是文字更加醒目，例如文章的標(biāo)題部分。被稱為特別強(qiáng)調(diào)標(biāo)簽，也是文字加粗，目前使用比標(biāo)簽更頻繁，其編寫方法如下：

這是粗體文字

這也是粗體文字

七、給文字加下劃線

用雙標(biāo)簽可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。編寫代碼如代碼2.4所示。

代碼4.10 文字修飾的設(shè)置：font_style.htm

<html>

<head>

<title>字體修飾的設(shè)置</title>

</head>

<body>

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

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

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

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

</body>

</html>

瀏覽效果如圖2.4所示。

圖2.4 字體修飾的設(shè)置

———— 注意：在多個標(biāo)簽包含同一塊文字時，其包含順序不能錯位。

八、多種標(biāo)題樣式的使用

網(wǎng)頁的文章中，為了凸顯標(biāo)題的重要性，標(biāo)題的樣式比較特殊。HTML技術(shù)保護(hù)了一套針對標(biāo)題的樣式標(biāo)簽，分別為雙標(biāo)簽<h1>到<h6>，文字尺寸從大到小代表不同級別的標(biāo)題。標(biāo)題標(biāo)簽有一個特點，獨占一行、文字加粗、文字居中。這樣，在設(shè)置標(biāo)題的時候就很輕松了，并且可設(shè)多級標(biāo)題。編寫代碼如代碼2.5所示。

代碼2.5 標(biāo)題的設(shè)置：font_h.htm

<html>

<head>

</head>

<body>

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

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

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

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

</body>

</html>

瀏覽效果如圖2.5所示。

圖2.5 標(biāo)題的設(shè)置

九、處理網(wǎng)頁中的特殊字符

在HTML中，有一些字符有特殊含義，例如“<”和“>”是標(biāo)簽的左括號和右括號，而標(biāo)簽是控制HTML顯示的，標(biāo)簽本身只能被瀏覽器解析，并不能在頁面中顯示。那么，該怎樣在HTML中顯示“<”和“>”呢？HTML規(guī)定了一些特殊字符的寫法，以便在網(wǎng)頁中顯示，如表1.1所示。

表1.1 HTML中的特殊字符

^特殊符號	^HTML^代碼	^特殊符號	^HTML^代碼
^<	^<	^{（商標(biāo)符號）}	^™
^>	^>	^{（注冊符號）}	^®
^{“”（英文半角）}	^"	^×	^×
^§	^§	^{（版權(quán)符號）}	^©

如代碼2.6所示。

代碼2.6 特殊字符的設(shè)置：string.htm

<html>

<head>

<title>特殊字符的設(shè)置</title>

</head>

<body>

標(biāo)簽的顯示方法：<HTML>

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

商標(biāo)的顯示方法：™

注冊符號的顯示方法：®

版權(quán)符號的顯示方法：©

顯示§

顯示×

</body>

</html>

瀏覽效果如圖2.6所示。

圖4.12 特殊字符的設(shè)置

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

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

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

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

<xmp></xmp>是雙標(biāo)簽，它只使其包含的內(nèi)容中的標(biāo)簽失效，<xmp></xmp>的使用更為普遍。編寫代碼如代碼2.7所示。

代碼2.7 忽略標(biāo)簽的設(shè)置：

<html>

<head>

</head>

<body>

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

鷹擊長空，魚翔淺底， 萬類霜天競自由。 悵寥廓，問蒼茫大地，誰主沉?。?SPAN lang=EN-US>

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

</body>

</html>

瀏覽效果如圖2.7所示。

圖2.7 忽略標(biāo)簽的設(shè)置

十一、其他文字修飾方法

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

— 上標(biāo)格式標(biāo)簽為雙標(biāo)簽，多用于數(shù)學(xué)指數(shù)的表示，比如某個數(shù)的平方或立方。

— 下標(biāo)格式標(biāo)簽為雙標(biāo)簽，多用于注釋，以及數(shù)學(xué)的底數(shù)表示。

— 中劃線標(biāo)簽為雙標(biāo)簽<strike></strike>，多用于刪除效果。

編寫代碼如代碼2.8所示。

代碼2.8 其他修飾標(biāo)簽的設(shè)置

<html>

<head>

<title>其他修飾標(biāo)簽的設(shè)置</title>

</head>

<body>

沁園春長沙！

數(shù)學(xué)指數(shù)的表示：23=8、1002=10000 <hr />

沁園春長沙！

數(shù)學(xué)底數(shù)的表示：log381=4、log5125=3 <hr />

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

</body>

</html>

瀏覽效果如圖2.8所示。

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

十二、為了讓文字富有變化，或者為了著意強(qiáng)調(diào)某一部分，HTML提供了一些標(biāo)簽產(chǎn)生這些效果，現(xiàn)將常用的標(biāo)簽列舉如下：

粗體　　　　　　　　　　　　　　HTML語言

斜體　　　　　　　　　　　　　　HTML語言

加下劃線　　　　　　　　　　　　HTML語言

<TT>　　　　 <TT>　　　　　打字機(jī)字體　　　　　　　　　　　HTML語言

<BIG>　　　　</BIG>　　　　大型字體　　　　　　　　　　　　HTML語言

小型字體　　　　　　　　　　　　HTML語言

<BLINK>　　　</BLINK>　　　閃爍效果　　　　　　　　　　　　HTML語言

表示強(qiáng)調(diào)，一般為斜體　　　　　　HTML語言

表示特別強(qiáng)調(diào)，一般為粗體　　　　HTML語言

<CITE>　　　 </CITE>　　　用于引證、舉例，一般為斜體　　　HTML語言

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：心如明月 > 《博客》

舉報/認(rèn)領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

心如明月

關(guān)注對話

TA的最新館藏

[轉(zhuǎn)] 五種PS工具摳圖教程
這樣吃雞蛋，等于吃“炸彈”！99%的人竟不知道
[轉(zhuǎn)] 65個鄉(xiāng)村醫(yī)生總結(jié)出來的實用偏方
[轉(zhuǎn)] 【民間偏方】所有結(jié)石一次治愈
屠呦呦諾獎報告會演講：中醫(yī)藥學(xué)是一個偉大寶庫
[轉(zhuǎn)] 香蕉泡上醋，奇跡出現(xiàn)了！可惜知道的女人太少??！

喜歡該文的人也喜歡更多

熱門閱讀換一換

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

HTML字體屬性