有色视频_很黄很污视频_黄大片日本一级在线a_色屁屁www免费观看影院

將想法與焦點(diǎn)和您一起共享

HTML網(wǎng)頁各種字體格式的細(xì)節(jié)修飾發(fā)布者:本站     時(shí)間:2020-05-16 08:05:54

4.2  文字的多樣化修飾

上一節(jié)學(xué)習(xí)了大塊段落的各種設(shè)置,對于文字本身修飾似乎更加吸引人。
本節(jié)從文字的細(xì)節(jié)修飾入手,使讀者能把握HTML的各種字體格式的變化,制作出更為專業(yè)的網(wǎng)頁。
 

 4.2.1  文字樣式設(shè)置的基本標(biāo)簽—<font>

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

 4.2.2  設(shè)置文字的顏色

color是<font></font>標(biāo)簽的屬性之一,用于設(shè)置文字顏色。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為font_color.htm,編寫代碼如代碼4.7所示。
 

代碼4.7  字體顏色的設(shè)置:font_color.htm

<html>

<head>

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

</head>

<body>

  淺紅色文字:<font color="#dd0000">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深紅色文字:<font color="#660000">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  淺綠色文字:<font color="#00dd00">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深綠色文字:<font color="#006600">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  淺藍(lán)色文字:<font color="#0000dd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深藍(lán)色文字:<font color="#000066">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  淺黃色文字:<font color="#dddd00">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深黃色文字:<font color="#666600">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br /> 

  淺青色文字:<font color="#00dddd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深青色文字:<font color="#006666">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  淺紫色文字:<font color="#dd00dd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

  深紫色文字:<font color="#660066">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br />

</body>

</html>



讀者不但可以從代碼4.7中學(xué)到color屬性在font標(biāo)簽中的用法,還可以熟悉各種顏色的表示方法。
 

 4.2.3  設(shè)置文字的尺寸

size也是<font></font>標(biāo)簽的屬性,用于設(shè)置文字大小。
size的值為1-7,默認(rèn)為3。
我們可以size 屬性值之前加上“+”、“-”字符,來指定相對于字號初始值的增量或減量。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為font_size.htm,編寫代碼如代碼4.8所示。
 

代碼4.8  字體尺寸的設(shè)置:font_size.htm

<html>

<head>

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

</head>

<body>

  size為1:<font size="1">HTML學(xué)習(xí)</font><br />

  size為2:<font size="2">HTML學(xué)習(xí)</font><br />

  size為3:<font size="3">HTML學(xué)習(xí)</font><br />

  size為4:<font size="4">HTML學(xué)習(xí)</font><br />

  size為5:<font size="5">HTML學(xué)習(xí)</font><br />

  size為6:<font size="6">HTML學(xué)習(xí)</font><br />

  size為7:<font size="7">HTML學(xué)習(xí)</font><br />

</body>

</html>


 


讀者可嘗試在size值前面加上“+”、“-”字符,更靈活地設(shè)置文字尺寸。
 

 4.2.4  設(shè)置文字的字體

face也是<font></font>標(biāo)簽的屬性,用于設(shè)置文字字體(字型)。
HTML網(wǎng)頁中顯示的字型從瀏覽端的系統(tǒng)中調(diào)用,所以為了保持字型一致,建議采用宋體,HTML頁面也是默認(rèn)采用宋體。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為font_face.htm,編寫代碼如代碼4.9所示。
 

代碼4.9  字體字型的設(shè)置:font_face.htm

<html>

<head>

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

</head>

<body>

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

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

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

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

</body>

</html>


筆者把被修改字型部分的文字尺寸設(shè)置為5號,方便讀者查看。
 

 4.2.5  使文字傾斜

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

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

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

 4.2.6  使文字加粗

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

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

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

 4.2.7  給文字加下劃線

用雙標(biāo)簽<u></u>可添加下劃線到被作用文字。
以下為文字傾斜、加粗和下劃線的綜合示例。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為font_style.htm,編寫代碼如代碼4.10所示。
 

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

<html>

<head>

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

</head>

<body>

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

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

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

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

</body>

</html>


筆者把<body></body>內(nèi)的所有文字尺寸設(shè)置為5號,方便讀者查看。
 

—  注意:在多個(gè)標(biāo)簽包含同一塊文字時(shí),其包含順序不能錯(cuò)位。
 

 4.2.8  多種標(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)簽有一個(gè)特點(diǎn),獨(dú)占一行、文字加粗、文字居中。
這樣,在設(shè)置標(biāo)題的時(shí)候就很輕松了,并且可設(shè)多級標(biāo)題。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為font_h.htm,編寫代碼如代碼4.11所示。
 

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

<html>

<head>

  <title>標(biāo)題的設(shè)置</title>

</head>

<body>

<h1>一號標(biāo)題</h1>

<h2>二號標(biāo)題</h2>

<h3>三號標(biāo)題</h3>

<h4>四號標(biāo)題</h4>

<h5>五號標(biāo)題</h5>

<h6>六號標(biāo)題</h6>

<h1>財(cái)富雜志:谷歌為何不會盛極而衰</h1>

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

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

<h3>將繼續(xù)壟斷搜索</h3>

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

</body>

</html>


 4.2.9  學(xué)會處理網(wǎng)頁中的特殊字符

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

表4.1  HTML中的特殊字符

 

在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為string.htm,編寫string.htm代碼如代碼4.12所示。
 

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

<html>

<head>

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

</head>

<body>

<font size="5">

標(biāo)簽的顯示方法:&lt;HTML&gt;<br />

引號的顯示方法:&quot;英文半角雙引號&quot;<br />

商標(biāo)的顯示方法:&trade;<br />

注冊符號的顯示方法:&reg;<br />

版權(quán)符號的顯示方法:&copy;<br />

顯示&sect;<br />

顯示&times;

</font>

</body>

</html>


—  說明:單獨(dú)顯示符號&必須用代碼&amp;。
 

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

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

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

<xmp></xmp>是雙標(biāo)簽,它只使其包含的內(nèi)容中的標(biāo)簽失效,<xmp></xmp>的使用更為普遍。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為html.htm,編寫代碼如代碼4.13所示。
 

代碼4.13  忽略標(biāo)簽的設(shè)置:html.htm

<html>

<head>

  <title>忽略標(biāo)簽的設(shè)置</title>

</head>

<body>

<h2>沁園春·長沙</h2>

<xmp>獨(dú)立寒秋,<strong>湘江北去</strong>,橘子洲頭。
<br />看萬山紅遍,層林盡染; <br />漫江碧透,<u>百舸爭流。
</u> <br /></xmp>

鷹擊長空,<strong>魚翔淺底,</strong> <br />萬類霜天競自由。
<br />悵寥廓,<u>問蒼茫大地</u>,誰主沉浮?<br />

<plaintext>

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

</body>

</html>


 4.2.11  其他文字修飾方法

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

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

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

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

在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為other.htm
 

代碼4.14  其他修飾標(biāo)簽的設(shè)置:other.htm

<html>

<head>

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

</head>

<body>

<font size="5">

沁園春<sup>長沙</sup>!<br />

數(shù)學(xué)指數(shù)的表示:2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />

沁園春<sub>長沙</sub>!<br />

數(shù)學(xué)底數(shù)的表示:log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />

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

</font>

</body>

</html>



選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032