HTML字體屬性

HTML字體屬性

 一、文字樣式設置的基本標籤—<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>

 淺紅色文字:<fontcolor="#dd0000">HTML學習的本質就是該是什麼就用什麼</font><br/>

 深紅色文字:<fontcolor="#660000">HTML學習的本質就是該是什麼就用什麼</font><br/>

 淺綠色文字:<font color="#00dd00">HTML學習的本質就是該是什麼就用什麼</font><br />

 深綠色文字:<fontcolor="#006600">HTML學習的本質就是該是什麼就用什麼</font><br/>

 淺藍色文字:<fontcolor="#0000dd">HTML學習的本質就是該是什麼就用什麼</font><br/>

 深藍色文字:<fontcolor="#000066">HTML學習的本質就是該是什麼就用什麼</font><br/>

 淺黃色文字:<fontcolor="#dddd00">HTML學習的本質就是該是什麼就用什麼</font><br/>

 深黃色文字:<fontcolor="#666600">HTML學習的本質就是該是什麼就用什麼</font><br/>

 淺青色文字:<fontcolor="#00dddd">HTML學習的本質就是該是什麼就用什麼</font><br/>

 深青色文字:<fontcolor="#006666">HTML學習的本質就是該是什麼就用什麼</font><br/>

 淺紫色文字:<fontcolor="#dd00dd">HTML學習的本質就是該是什麼就用什麼</font><br/>

 深紫色文字:<fontcolor="#660066">HTML學習的本質就是該是什麼就用什麼</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:<fontsize="1">HTML學習</font><br />

 size爲2:<fontsize="2">HTML學習</font><br />

 size爲3:<fontsize="3">HTML學習</font><br />

 size爲4:<fontsize="4">HTML學習</font><br />

 size爲5:<fontsize="5">HTML學習</font><br />

 size爲6:<fontsize="6">HTML學習</font><br />

 size爲7:<fontsize="7">HTML學習</font><br />

</body>

</html>

 

 四、 設置文字的字體

 

face也是<font></font>標籤的屬性,用於設置文字字體(字型)。HTML網頁中顯示的字型從瀏覽端的系統中調用,所以爲了保持字型一致,建議採用宋體,HTML頁面也是默認採用宋體。編寫代碼如代碼2.3所示。

代碼2.3  字體字型的設置:font_face.htm

<html>

<head>

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

</head>

<body>

 字型爲宋體:<fontsize="5">沁園春·長沙-毛澤東</font><br />

 字型爲楷體:<fontsize="5">沁園春·長沙-毛澤東</font><br />

 字型爲黑體:<fontsize="5">沁園春·長沙-毛澤東</font><br />

 字型爲隸書:<fontsize="5">沁園春·長沙-毛澤東</font>

</body>

</html>


     五、 使文字傾斜

 

用雙標籤<i></i>可使被作用文字傾斜,達到特殊的效果,例如文章的日期。<em></em>被稱爲強調標籤,也是斜體,目前使用比<i></i>標籤更頻繁,其編寫方法如下:

<i>這是斜體文字</i>

<em>這也是斜體文字</em>

 

六、 使文字加粗

 

用雙標籤<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的標題部分。<strong></strong>被稱爲特別強調標籤,也是文字加粗,目前使用比<b></b>標籤更頻繁,其編寫方法如下:

<b>這是粗體文字</b>

<strong>這也是粗體文字</strong>

 

 七、 給文字加下劃線

 

用雙標籤<u></u>可添加下劃線到被作用文字。以下爲文字傾斜、加粗和下劃線的綜合示例。編寫代碼如代碼2.4所示。

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

<html>

<head>

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

</head>

<body>

 <fontsize="5">斜體:<em>沁園春·長沙-毛澤東</em><br/>

 加粗體:<strong>沁園春·長沙-毛澤東</strong><br />

 下劃線:<u>沁園春·長沙-毛澤東</u><br />

 斜體+加粗體+下劃線:<em><strong><u>沁園春·長沙-毛澤東</u></strong></em></font>

</body>

</html>

 

     八、 多種標題樣式的使用

網頁的文章中,爲了凸顯標題的重要性,標題的樣式比較特殊。HTML技術保護了一套針對標題的樣式標籤,分別爲雙標籤<h1>到<h6>,文字尺寸從大到小代表不同級別的標題。標題標籤有一個特點,獨佔一行、文字加粗、文字居中。這樣,在設置標題的時候就很輕鬆了,並且可設多級標題。編寫代碼如代碼2.5所示。

代碼2.5 標題的設置:font_h.htm

<html>

<head>

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

</head>

<body>

<h1>一號標題</h1>

<h2>二號標題</h2>

<h3>三號標題</h3>

<h4>四號標題</h4>

<h5>五號標題</h5>

<h6>六號標題</h6>

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

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

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

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

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

</body>

</html>

 

九、處理網頁中的特殊字符

 

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

表1.1  HTML中的特殊字符

特殊符號

HTML代碼

特殊符號

HTML代碼

<

&lt;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章