官术网_书友最值得收藏!

第3章 設(shè)計網(wǎng)頁文本內(nèi)容

視頻講解:28分鐘)

在網(wǎng)頁創(chuàng)作中,文字是最基本的元素之一。增加文字的易讀性,讓瀏覽者在短時間內(nèi)閱讀更多的文字、理解更多的信息,同時也能為文字設(shè)置視覺上的效果,從而達(dá)到網(wǎng)頁創(chuàng)作者所追求的目標(biāo)。

通過閱讀本章,您可以掌握:

 標(biāo)題文字的建立

 設(shè)置文字格式

 設(shè)置段落格式

 水平線標(biāo)記

 其他文字標(biāo)記

3.1 標(biāo)題文字的建立

視頻講解

在瀏覽器中的正文部分,可以顯示標(biāo)題文字,所謂標(biāo)題文字就是以某種固定的字號顯示文字。HTML文檔中的標(biāo)題文字分別用來指明頁面上的1~6級標(biāo)題。

3.1.1 標(biāo)題字標(biāo)記<H>

標(biāo)題文字共包含6種標(biāo)記,每一種的標(biāo)題在字號上有明顯的區(qū)別,從1級~6級依次減小。

語法
語法解釋

在該語法中,1級標(biāo)題使用最大的字號表示,6級標(biāo)題使用的是最小的字號。

【例3.1】實例代碼。(實例位置:資源包\TM\sl\3\1)

運行這段代碼可以看到網(wǎng)頁中6種不同大小的標(biāo)題文字,如圖3.1所示。

圖3.1 標(biāo)題文字的效果

3.1.2 標(biāo)題文字的對齊方式——align

默認(rèn)情況下,標(biāo)題文字是左對齊的。而在網(wǎng)頁制作的過程中,可以實現(xiàn)標(biāo)題文字的編排設(shè)置。對于文字標(biāo)題的屬性設(shè)置中,最常用的就是關(guān)于對齊方式的設(shè)置,這就需要使用align參數(shù)來進(jìn)行設(shè)置。

語法
語法解釋

在該語法中,align屬性需要設(shè)置在標(biāo)題標(biāo)記的后面,標(biāo)題文字的對齊屬性如表3.1所示。

表3.1 標(biāo)題文字的對齊方式

【例3.2】實例代碼。(實例位置:資源包\TM\sl\3\2)

運行這段代碼,可以看到不同對齊方式的標(biāo)題效果,如圖3.2所示。

圖3.2 標(biāo)題文字的對齊效果

3.2 設(shè)置文字格式

視頻講解

除了標(biāo)題文字外,在網(wǎng)頁中普通的文字信息更是不可缺少的。而多種多樣的文字效果可以使網(wǎng)頁變得更加絢麗。

在網(wǎng)頁的編輯中,可以直接在文字的主體部分輸入文字,這些文字會顯示在頁面中。這是HTML語言編輯中最簡單的事情,只需要在<body>標(biāo)記和</body>標(biāo)記之間輸入相應(yīng)的文字即可。設(shè)置不同的文字效果的屬性位于文字格式標(biāo)記<font>中,下面將逐一進(jìn)行講解各種文字格式的設(shè)置方式。

3.2.1 設(shè)置文字字體——face

在HTML語言中,可以通過face屬性設(shè)置文字的不同字體效果。設(shè)置的字體效果必須在瀏覽器安裝了相應(yīng)的字體后才可以正確瀏覽,否則這些特殊字體會被瀏覽器中的普通字體所代替。因此,在網(wǎng)頁中盡量減少使用過多的特殊字體,以免在用戶瀏覽時無法看到正確的效果。由于瀏覽器默認(rèn)情況下都包含了宋體、黑體等幾種基本字體,因此網(wǎng)頁的創(chuàng)建者應(yīng)該注意在設(shè)計網(wǎng)頁時,多利用這幾種字體。

語法
語法解釋

在該語法中,face屬性的值可以是1個或者多個。默認(rèn)情況下,使用第1種字體進(jìn)行顯示;如果第1種字體不存在,則使用第2種字體進(jìn)行代替,以此類推。如果設(shè)置的幾種字體在瀏覽器中都不存在,則會以默認(rèn)字體顯示。

【例3.3】實例代碼。(實例位置:資源包\TM\sl\3\3)

運行這段代碼,可以看到幾種不同的字體效果,如圖3.3所示。

圖3.3 設(shè)置不同的文字字體

3.2.2 設(shè)置字號——size

HTML頁面中的文字可以使用不同的字號表現(xiàn)。字號指的是字體的大小,它沒有一個相對的大小標(biāo)準(zhǔn),其大小只是相對于默認(rèn)字體而言。除了使用標(biāo)題文字標(biāo)記設(shè)置固定大小的字號之外,HTML語言提供了<font>標(biāo)記size屬性來設(shè)置普通文字的字號。

語法
語法解釋

在該語法中,文字的字號可以設(shè)置1~7,也可以是+1~+7或者是-1~-7。這些字號并沒有一個固定的大小值,而是相對于默認(rèn)文字大小來設(shè)定的,默認(rèn)文字的大小與3號字相同,而數(shù)值越大,文字也越大。

【例3.4】實例代碼。(實例位置:資源包\TM\sl\3\4)

運行這段代碼,可以看到文字的大小變化,其效果如圖3.4所示。

圖3.4 設(shè)置不同的字號

3.2.3 設(shè)置文字顏色——color

在HTML頁面中,還可以通過不同的顏色表現(xiàn)不同的文字效果。豐富的字符顏色毫無疑問能夠極大增強文檔的表現(xiàn)力。

語法
語法解釋

與網(wǎng)頁背景色的設(shè)置類似,顏色代碼頁是十六進(jìn)制的。

【例3.5】實例代碼。(實例位置:資源包\TM\sl\3\5)

運行這段代碼,可看到不同色彩的文字效果,如圖3.5所示。

圖3.5 設(shè)置不同的文字顏色

3.2.4 粗體、斜體、下畫線——strong、em、u

在瀏覽網(wǎng)頁時,還常常可以看到一些特殊效果的文字,例如粗體字、斜體字以及下畫線文字。而這些文字效果也可以通過設(shè)置HTML語言的標(biāo)記來實現(xiàn)。

語法
語法解釋

這幾種效果的語法類似,只是標(biāo)記不同。粗體的效果也可以通過標(biāo)記<b>來實現(xiàn);斜體字也可以使用標(biāo)記<I>或者<cite>表示。

【例3.6】實例代碼。(實例位置:光盤\TM\sl\3\6)

運行這段代碼,可以看到不同的樣式效果,且使用不同的標(biāo)記也可以達(dá)到相同的效果,如圖3.6所示。

圖3.6 設(shè)置文字的不同樣式

3.2.5 上標(biāo)與下標(biāo)——sup、sub

除了設(shè)置不同的文字效果之外,有時候在網(wǎng)頁中還需要一種特殊的文字效果,即上標(biāo)和下標(biāo),這在顯示公式時常常會出現(xiàn),而在HTML語言中,也可以通過標(biāo)記輕松進(jìn)行設(shè)置。

語法
語法解釋

在該語法中,上標(biāo)標(biāo)記和下標(biāo)標(biāo)記的使用方法基本相同,只需要將文字放在標(biāo)記中間即可。

【例3.7】實例代碼。(實例位置:光盤\TM\sl\3\7)

運行這段代碼,可以看到如圖3.7所示的效果。

圖3.7 設(shè)置文字的上標(biāo)與下標(biāo)

3.2.6 設(shè)置刪除線——strike

在網(wǎng)頁中可以通過strike參數(shù)對文字添加刪除線效果。

語法
語法解釋

這兩種標(biāo)記都可以創(chuàng)建刪除線效果,使用起來也很簡單,只要把需要設(shè)置成刪除線效果的文字設(shè)置在標(biāo)記中間即可。

【例3.8】實例代碼。(實例位置:資源包\TM\sl\3\8)

運行這段代碼,可以看到如圖3.8所示的效果。

圖3.8 刪除線效果

3.2.7 等寬文字標(biāo)記——code

等寬文字標(biāo)記常用于英文效果,使用該標(biāo)記可以實現(xiàn)網(wǎng)頁中字體的等寬效果。使用等寬效果能夠使頁面顯得更加整齊。

語法
語法解釋

在該語法中的這兩種標(biāo)記都可以實現(xiàn)文字的等寬顯示,而在應(yīng)用時只要把需要等寬顯示文字的放置在標(biāo)記中間即可。

【例3.9】實例代碼。(實例位置:資源包\TM\sl\3\9)

運行這段代碼,可以看到如圖3.9所示的效果。

圖3.9 等寬文字的效果

3.2.8 空格——&nbsp;

一般情況下,在網(wǎng)頁中輸入文字時,如果在段落開始增加了空格,在使用瀏覽器進(jìn)行瀏覽時往往看不到這些空格。這主要是因為在HTML文件中,瀏覽器本身會將兩個句子之間的所有半角空白僅當(dāng)作一個來看待。如果需要保留空格的效果,一般需要使用全角空格符號,或者通過空格碼來代替。下面將介紹如何應(yīng)用空格碼來輸入保留文字中的空格效果。

語法
語法解釋

在網(wǎng)頁中可以有多個空格,一個&nbsp;只代表一個半角空格,多個空格則可以多次使用這一符號。

【例3.10】實例代碼。(實例位置:資源包\TM\sl\3\10

運行這段代碼,可以清楚地看到不管在兩個句子間輸入多少個半角空格,其中僅有一個半角的空格符會被接受,其余多出的空格符將被忽略掉。而輸入空格代碼則可以完整地保留空格的效果,如圖3.10所示。

圖3.10 在網(wǎng)頁中輸入空格

3.2.9 其他特殊符號

除了空格以外,在網(wǎng)頁的創(chuàng)作過程中,還有一些特殊的符號也需要使用代碼進(jìn)行代替。一般情況下,特殊符號的代碼由前綴“&”、字符名稱和后綴“;”組成。使用方法與空格符號類似,具體如表3.2所示。

表3.2 特殊符號的表示

說明

在需要輸入這些特殊符號的位置處,使用相應(yīng)的代碼代替即可。

3.3 設(shè)置段落格式

視頻講解

文字屬性的設(shè)定我們已經(jīng)做了介紹,文字的組合就是段落,在文本編輯窗口中,輸入完一段文字后,按下Enter鍵后就生成了一個段落。在HTML中可以通過標(biāo)記實現(xiàn)段落的效果,下面具體介紹和段落相關(guān)的一些標(biāo)記。

3.3.1 段落標(biāo)記——p

在HTML語言中,段落通過<p>標(biāo)記來表示。

語法
語法解釋

可以使用成對的<p>標(biāo)記來包含段落,也可以使用單獨的<p>標(biāo)記來劃分段落。

【例3.11】實例代碼。(實例位置:資源包\TM\sl\3\11)

運行這段代碼,可以看到兩種方法的段落標(biāo)記都可以成功地將文字分段。效果如圖3.11所示。

圖3.11 段落效果

3.3.2 取消文字換行標(biāo)記——nobr

如果瀏覽器中單行文字的寬度過長,瀏覽器會自動將該文字換行顯示,如果希望強制瀏覽器不換行顯示,可以使用相應(yīng)的標(biāo)記。

語法
語法解釋

在標(biāo)記之間的文字在顯示的過程中不會自動換行。

【例3.12】實例代碼。(實例位置:資源包\TM\sl\3\12)

運行這段代碼,可以看到強制文字不換行的效果,如圖3.12所示。

圖3.12 文字不換行的效果

3.3.3 換行標(biāo)記——br

段落與段落之間是隔行換行的,文字的行間距過大,這時可以使用換行標(biāo)記來完成文字的緊湊換行顯示。

語法
語法解釋

一個<br>標(biāo)記代表一個換行,連續(xù)的多個標(biāo)記可以多次換行。

【例3.13】實例代碼。(實例位置:資源包\TM\sl\3\13)

運行這段代碼,可以看到使用換行標(biāo)記的效果,如圖3.13所示。

圖3.13 文字的換行

3.3.4 保留原始排版方式標(biāo)記——pre

在網(wǎng)頁創(chuàng)作中,一般是通過各種標(biāo)記對文字進(jìn)行排版的。但是在實際應(yīng)用中,往往需要一些特殊的排版效果,這樣使用標(biāo)記控制起來會比較麻煩。解決的方法就是保留文本格式的排版效果,例如空格、制表符等。如果要保留原始的文本排版效果,則需要使用<pre>標(biāo)記。

【例3.14】實例代碼。(實例位置:資源包\TM\sl\3\14)

運行這段代碼,可以看到運行效果和文本中的效果相同,如圖3.14所示。

圖3.14 保留原始的排版效果

3.3.5 居中對齊標(biāo)記——center

對于段落來說,和普通文字類似,有時候也需要將段落居中。在HTML語言中提供了專門的標(biāo)記。

語法
語法解釋

在標(biāo)記之間的文字會自動居中顯示。

【例3.15】實例代碼。(實例位置:資源包\TM\sl\3\15)

運行這段代碼,可以看到這首古詩居中顯示,如圖3.15所示。

圖3.15 段落的居中顯示

3.3.6 向右縮進(jìn)標(biāo)記——blockquote

使用<blockquote>標(biāo)記可以實現(xiàn)頁面文字的段落縮進(jìn)。這一標(biāo)記也是每使用一次,段落就縮進(jìn)一次,可以嵌套使用,以達(dá)到不同的縮進(jìn)效果。

語法
語法解釋

在該標(biāo)記之間的文字會自動縮進(jìn)。

【例3.16】實例代碼。(實例位置:資源包\TM\sl\3\16)

在上面的代碼中,多次嵌套使用了<blockquote>標(biāo)記,運行這段代碼效果如圖3.16所示。

圖3.16 段落的縮進(jìn)效果

3.4 水平線標(biāo)記

視頻講解

水平線用于段落與段落之間的分隔,使文檔結(jié)構(gòu)清晰明白,使文字的編排更整齊。水平線自身具有很多屬性,如寬度、高度、顏色、排列對齊等。在HTML文檔中經(jīng)常會用到水平線,合理使用水平線可以獲得非常好的效果。一篇內(nèi)容繁雜的文檔,如果合理放置幾條水平線,就會變得層次分明,便于閱讀。

3.4.1 添加水平線——hr

語法
語法解釋

在網(wǎng)頁中輸入一個<hr>標(biāo)記,就添加了一條默認(rèn)樣式的水平線。

【例3.17】實例代碼。(實例位置:資源包\TM\sl\3\17)

運行代碼,可以看到在網(wǎng)頁中出現(xiàn)了一條水平線,如圖3.17所示。

圖3.17 添加水平線

3.4.2 設(shè)置水平線寬度與高度屬性——width、height

在默認(rèn)情況下,在網(wǎng)頁中插入的水平線是100%的寬度,1像素的高度。而在實際創(chuàng)建網(wǎng)頁時,可以對水平線的寬度和高度進(jìn)行設(shè)置。

語法
語法解釋

在該語法中,水平線的寬度值可以是確定的像素值,也可以是窗口的百分比。而水平線的高度值則只能是像素數(shù)。如果在創(chuàng)建水平線時只設(shè)置一個參數(shù),那么另外一個參數(shù)則會取默認(rèn)值。

【例3.18】實例代碼。(實例位置:資源包\TM\sl\3\18)

運行這段代碼,可以看到3條高度和寬度不等的水平線效果,如圖3.18所示

圖3.18 設(shè)置水平線寬度和高度

3.4.3 設(shè)置水平線的顏色——color

為了使水平線更美觀,同整體頁面更協(xié)調(diào),我們可以設(shè)置水平線的顏色。

語法
語法解釋

顏色代碼是十六進(jìn)制的數(shù)值。

【例3.19】實例代碼。(實例位置:資源包\TM\sl\3\19)

運行這段代碼,可以看到顏色和大小不同的兩條水平線,而這兩條水平線將文章的主體映襯得更加醒目,如圖3.19所示

圖3.19 設(shè)置水平線的顏色

3.4.4 設(shè)置水平線的對齊方式——align

通過前面幾個實例可以看到,水平線在默認(rèn)情況下是居中對齊的。如果希望水平線左對齊或右對齊,就需要使用align參數(shù)。

語法
語法解釋

在該語法中對齊方式可以有3種,包括left、center和right。其中,center的效果與默認(rèn)效果相同。

【例3.20】實例代碼。(實例位置:資源包\TM\sl\3\20)

運行這段代碼,可以看到分別位于左邊和右邊的不同效果的水平線,如圖3.20所示。

圖3.20 設(shè)置水平線的對齊方式

3.4.5 去掉水平線陰影——noshade

在默認(rèn)情況下,水平線是空心帶陰影的立體效果,通過設(shè)置noshade參數(shù)可以將水平線的陰影去掉。

語法

【例3.21】實例代碼。(實例位置:資源包\TM\sl\3\21)

運行代碼,可以看到如圖3.21所示的效果,上面的水平線是空心帶陰影的立體效果,而下面的水平線是通過noshade參數(shù)將陰影去除掉的水平線。

圖3.21 去掉水平線的陰影效果

3.5 其他文字標(biāo)記

3.5.1 文字標(biāo)注標(biāo)記——ruby

在網(wǎng)頁中可以通過添加對文字的標(biāo)注來說明網(wǎng)頁中的某段文字。

語法
語法解釋

在這段代碼中,被說明的文字就是網(wǎng)頁中需要添加標(biāo)注的那段文字,而文字的標(biāo)注則是真正的說明文字。

【例3.22】實例代碼。(實例位置:資源包\TM\sl\3\22)

運行這段代碼,可以在古詩的上面看到標(biāo)注文字“作者秦觀”,如圖3.22所示。

圖3.22 添加標(biāo)注文字

說明

在默認(rèn)情況下,標(biāo)注文字很小,但是在HTML中也可以像設(shè)置其他文字一樣調(diào)整標(biāo)注文字的各種屬性,包括大小、顏色等。

3.5.2 聲明變量標(biāo)記——var

在使用網(wǎng)頁講解某些知識時,為了統(tǒng)一地突出變量,常常將其設(shè)置為斜體。而在HTML中也提供了一種標(biāo)記,用于專門設(shè)置變量的效果。

語法
語法解釋

在標(biāo)記之間的文字就以聲明變量的效果顯示。

【例3.23】實例代碼。(實例位置:資源包\TM\sl\3\23)

運行這段代碼,可以看到如圖3.23所示的效果。

圖3.23 聲明變量

3.5.3 忽視HTML標(biāo)簽標(biāo)記——plaintext、xmp

忽視HTML標(biāo)簽標(biāo)記主要是用來使HTML標(biāo)簽失去作用,而直接顯示在頁面中。這一標(biāo)記在實際中應(yīng)用并不多。

語法
語法解釋

這兩個標(biāo)記中的任何一個如果加入HTML代碼中,都會使HTML標(biāo)記失去作用,一般放置在<body>標(biāo)記之后。

【例3.24】實例代碼。(實例位置:資源包\TM\sl\3\24)

運行程序的效果如圖3.24所示。

圖3.24 忽視HTML標(biāo)簽的作用

3.5.4 設(shè)置地址文字標(biāo)記<address>

<address>標(biāo)記可定義一個地址(如電子郵件地址)。我們可以使用它來定義地址、簽名或者文檔的作者身份等信息。該標(biāo)記主要用于英文字體的顯示。

語法

在標(biāo)記間的文字就是地址等內(nèi)容。

【例3.25】實例代碼。(實例位置:資源包\TM\sl\3\25)

運行結(jié)果如圖3.25所示。

圖3.25 設(shè)置地址文字標(biāo)記

說明

<address></address>標(biāo)記對中的內(nèi)容通常被顯示為斜體。大多數(shù)瀏覽器會在<address>標(biāo)記的前后添加一個換行符,如果有必要,還可以在地址文本的內(nèi)容添加額外的換行符。

3.6 小結(jié)

本章主要講解了如何設(shè)置文字以及段落。文字是網(wǎng)頁設(shè)計最基礎(chǔ)的部分,一個標(biāo)準(zhǔn)的文字頁面可以起到傳達(dá)信息的作用。通過本章的學(xué)習(xí),讀者可以設(shè)置文字格式、段落格式以及水平線標(biāo)記。在熟悉和掌握了各個知識點后,讀者可以在HTML中設(shè)置個性的文字樣式。

3.7 習(xí)題

選擇題

1.HTML文本顯示狀態(tài)代碼中,<SUP></SUP>表示(  )。

A.文本加注下標(biāo)

B.文本加注上標(biāo)

C.文本閃爍

D.文本或圖片居中

2.創(chuàng)建最小的標(biāo)題的文本標(biāo)簽是(  )。

A.<pre></pre>

B.<h1></h1>

C.<h6></h6>

D.<b></b>

3.創(chuàng)建黑體字的文本標(biāo)簽是(  )。

A.<pre></pre>

B.<h1></h1>

C.<h6></h6>

D.<b></b>

4.設(shè)置水平線高度的HTML代碼是(  )。

A.<hr>

B.<hr size=?>

C.<hr width=?>

D.<hr noshade>

5.在HTML中,下面是段落標(biāo)簽的是(  )。

A.<HTML>…</HTML>

B.<HEAD>…</HEAD>

C.<BODY>…</BODY>

D.<P>…</P>

6.HTML代碼<hr width=? >表示(  )。

A.設(shè)置水平線的高度

B.設(shè)置水平線的寬度

C.創(chuàng)建一個沒有陰影的水平線

D.創(chuàng)建任意水平線

判斷題

7.HTML的段落標(biāo)志中,標(biāo)注文本以原樣顯示的是<PRE></PRE>。(  )

8.HTML中,空格的代碼為“&nbsp;”。(  )

9.標(biāo)識<b>無須</b>標(biāo)識。(  )

填空題

10.要設(shè)置一條1像素粗的水平線,應(yīng)使用的HTML語句是________。

主站蜘蛛池模板: 和静县| 驻马店市| 东乌珠穆沁旗| 西平县| 石渠县| 荣成市| 金湖县| 固原市| 木兰县| 海原县| 永和县| 辰溪县| 新竹市| 武清区| 同江市| 合肥市| 奉节县| 山西省| 广水市| 岑巩县| 襄垣县| 广宗县| 丰台区| 余江县| 登封市| 五华县| 涡阳县| 易门县| 定安县| 西乡县| 吐鲁番市| 安西县| 汕尾市| 开原市| 雷山县| 铜山县| 镇远县| 苏尼特右旗| 车险| 佛冈县| 顺平县|