1、第二章,文本標(biāo)記 段落標(biāo)記 圖像標(biāo)記,復(fù)習(xí)： 上節(jié)課我們已經(jīng)討論了HTML語(yǔ)言的基本原理并且使用記事本書寫了一些web頁(yè)。同時(shí)也將網(wǎng)頁(yè)設(shè)置背景顏色、背景圖片等效果。其中，我們還設(shè)置了文字的顏色，并且知道在中所設(shè)置的是所以文字的顏色。今天我們首先來(lái)看在網(wǎng)頁(yè)中究竟如何設(shè)置文字的屬性。,（1）文字標(biāo)記,在網(wǎng)頁(yè)中我們所看到的文字屬性可以分為：大小、顏色、字體等 這些屬性其實(shí)都是由一個(gè)標(biāo)簽決定的： 文字 size是用來(lái)定義字體的大小的,可以是“1-7” color是定義字體的顏色的 face是控制字型的，可選：宋體，黑體，隸書，arial,arial black等等。, 網(wǎng)頁(yè)的標(biāo)題 我的網(wǎng)頁(yè) 我的網(wǎng)頁(yè)

2、我的第五個(gè)網(wǎng)頁(yè) 我的網(wǎng)頁(yè) 我的第五個(gè)網(wǎng)頁(yè) 我的網(wǎng)頁(yè) 我的網(wǎng)頁(yè) 我的網(wǎng)頁(yè) , 黑體 隸書 幼圓 以下是常用英文字體： Times New Roman Arial Arial Black Courtier New,face 屬性,Comic Sans MS Verdana ,圖 2-8 常用字體示例,物理字符樣式 所謂物理字符樣式，是指標(biāo)記符本身就說(shuō)明了所修飾文字的效果的標(biāo)記符。例如，B 標(biāo)記符表示粗體，SUB 標(biāo)記符表示下標(biāo)因?yàn)?B 是 Bold（粗體）這個(gè)單詞的首字母，而 SUB 是 subscript（下標(biāo)）這個(gè)單詞的前三個(gè)字母。常用的物理字符樣式標(biāo)記符有：黑體標(biāo)記 B、斜體標(biāo)記 I、下劃線

3、標(biāo)記 U 等，如表 所示。,常用物理字符樣式,使用這些物理字符樣式時(shí)，只需將設(shè)置格式的字符括在標(biāo)記符之間即可。例如，以下 HTML 代碼在瀏覽器中的顯示如圖 所示。,物理字符樣式效果, 物理字符樣式效果示例 此處為粗體顯示文本 此處為大字體文本 此處為小字體文本 此處為斜體文本 此處為等寬字體文本 此處為下劃線文本 此處為使用標(biāo)記設(shè)置的刪除線文本 此處為上標(biāo)示例：x2 + y2 = R2 此處為下標(biāo)示例：H2SO4 ,（2）段落標(biāo)記,標(biāo)題標(biāo)記符 Hn 段落標(biāo)記符 P 和換行標(biāo)記符 BR 水平線標(biāo)記符 HR 段落對(duì)齊,標(biāo)題標(biāo)記符 Hn 以下HTML代碼顯示了 1 至 6 級(jí)標(biāo)題的效果，如圖 所示

4、。 標(biāo)題效果 此為一級(jí)標(biāo)題 此為二級(jí)標(biāo)題 此為三級(jí)標(biāo)題 此為四級(jí)標(biāo)題 此為五級(jí)標(biāo)題 此為六級(jí)標(biāo)題 此為正常文本 ,標(biāo)題效果,可以看出，瀏覽器在解釋標(biāo)題標(biāo)記符時(shí)，會(huì)自動(dòng)改變文本的大小并將字體設(shè)為黑體，同時(shí)自動(dòng)將內(nèi)容設(shè)置為一個(gè)段落。, 標(biāo)記符可以產(chǎn)生多個(gè)空行效果 此為最后一段 ,段落標(biāo)記符 P 和換行標(biāo)記符 BR,P 與 BR 的用法,水平線標(biāo)記符 HR size 屬性 width 屬性 noshade 屬性 color 屬性,以下 HTML 代碼顯示了如何用 HR 標(biāo)記符的各種屬性控制水平線的顯示，效果如圖所示。 水平線效果 以下是默認(rèn)水平線： 以下是粗為 5 像素的水平線： 以下是長(zhǎng)度為100

5、像素的水平線： 以下是長(zhǎng)度為屏幕寬度 50% 的水平線： 以下是粗為 5 像素的實(shí)心水平線： 以下是紅色的水平線： ,在水平線屬性中，size屬性的取值是有范圍，一般情況是100px 水平線的主要是用于分段，當(dāng)我們?cè)谒骄€后面添加文字時(shí)，文字會(huì) 自動(dòng)換行，這也是它能夠?qū)崿F(xiàn)分段功能的重要屬性。,段落對(duì)齊 align 屬性 align屬性可應(yīng)用于多種標(biāo)記符，例如前面介紹的 P、Hn、HR 等。 使用 align 屬性 本行為默認(rèn)對(duì)齊的段落，相當(dāng)于 align=left 本行為居中對(duì)齊的段落 本行為右對(duì)齊的段落 本行為居中對(duì)齊的一級(jí)標(biāo)題 以下為左對(duì)齊的水平線： ,使用 align 屬性,注意：對(duì)于不

6、同的標(biāo)記符，默認(rèn)的 align 屬性值不同。P 和 Hn標(biāo)記符的默認(rèn) align 屬性值是 left，而 HR 標(biāo)記符的默認(rèn) align 屬性值是 center。, DIV 標(biāo)記符與 CENTER 標(biāo)記符 如果需要將多個(gè)段落使用相同的對(duì)齊方式，那么可以不必在每個(gè)段落中設(shè)置 align 屬性，而是使用 DIV 標(biāo)記符將所有段落包括起來(lái)，然后在 DIV 標(biāo)記符中設(shè)置 align 屬性。例如，以下 HTML 代碼將多個(gè)段落的內(nèi)容都設(shè)置為居中對(duì)齊，效果如圖 所示。, 使用 DIV 標(biāo)記符 浣溪沙 晏殊 ,一曲新詞酒一杯， 去年天氣舊池臺(tái)， 夕陽(yáng)西下幾時(shí)回？ 無(wú)可奈何花落去， 似曾相識(shí)燕歸來(lái)， 小園香徑

7、獨(dú)徘徊。 ,使用 DIV 標(biāo)記符,其實(shí)，在這里有個(gè)對(duì)齊是例外的：center。 在THML語(yǔ)言有個(gè)單獨(dú)的標(biāo)記.，在這個(gè)標(biāo)記里面的所有元素都會(huì)相對(duì)頁(yè)面水平居中對(duì)齊。, 格式的嵌套 （1）如果所設(shè)置的格式是相容的，則取格式疊加的效果。例如，如果為一段文字同時(shí)設(shè)置了粗體和斜體格式，則該段文字將以粗斜體顯示。 （2）如果所設(shè)置的格式是沖突的，則取最近樣式符的修飾效果。例如，如果同時(shí)在不同標(biāo)記符中設(shè)置了段落對(duì)齊方式，那么相應(yīng)內(nèi)容的對(duì)齊方式以最近的標(biāo)記符為準(zhǔn)。 例如，以下 HTML 代碼可以說(shuō)明瀏覽器如何解釋格式嵌套, 格式嵌套示例 本行使用 對(duì)齊 本行的對(duì)齊方式被更改了 本行文字顯示了如何同時(shí)應(yīng)用粗體和

8、斜體 ,圖 2-6 格式嵌套示例,（3）圖像標(biāo)記,Web 頁(yè)圖像基礎(chǔ) 圖像標(biāo)記符 IMG 在頁(yè)面中顯示動(dòng)畫,Web 頁(yè)圖像基礎(chǔ) Web 頁(yè)圖像格式 1 GIF 格式 對(duì)于目前廣泛使用的 GIF 格式而言，還具有透明色的特點(diǎn)，即可以將圖片中的某種顏色設(shè)置為透明色。這對(duì)于實(shí)現(xiàn)某些網(wǎng)頁(yè)效果來(lái)說(shuō)，具有非?，F(xiàn)實(shí)的意義。例如，圖 3-1 對(duì)比了一般的 GIF 圖像和具有透明色的 GIF 圖像。對(duì)于多數(shù)圖像處理軟件（例如 Fireworks）甚至某些網(wǎng)頁(yè)制作軟件（例如 FrontPage），都提供了將圖片中的某種顏色轉(zhuǎn)換為透明色的功能。,圖 3-1 普通 GIF 與透明 GIF 的區(qū)別,2 JPEG 格式

9、圖3-2中顯示了兩種不同壓縮比率的 JPEG 圖的效果。,圖 3-2 不同質(zhì)量 JPEG 圖像的對(duì)比,3 PNG 格式 4 矢量格式 位圖格式與矢量格式的區(qū)別如圖 3-3 所示。,圖 3-3 位圖與矢量圖的對(duì)比,使用網(wǎng)頁(yè)圖像的要點(diǎn) 確保文件較小 使圖像具有所需的像素大小 所謂圖像的像素大小就是指由圖像本身的像素寬和像素高所確定的圖像大小，例如，在同一種顯示模式下，一個(gè) 1024768 的圖像就顯然比 800600的圖像大的多。,在大多數(shù)情況下，如要將原來(lái)像素大小比較大的圖像縮小，應(yīng)使用圖形圖像處理軟件更改圖像的“Image Size”。一般在修改之后，圖像的文件大小會(huì)顯著變化。 例如，在 Ph

10、otoshop 中，可以使用“Image”菜單中的“Image Size”命令，此時(shí)彈出如圖 所示的“Image Size”對(duì)話框，可以在其中更改圖像的寬度、高度和分辨率。,圖 3-7 Photoshop6.0 的“Image Size”對(duì)話框, 插入圖像示例 我插入的第一幅圖像： ,這段代碼中，覺(jué)得了所插入圖片的地址及文件名。 Alt是圖像標(biāo)記的一個(gè)屬性，用以說(shuō)明圖像。當(dāng)我們用鼠標(biāo)指向圖像是就可以發(fā)現(xiàn)在鼠標(biāo)下方會(huì)出現(xiàn)相應(yīng)的文字信息。,設(shè)置圖像在頁(yè)面中的對(duì)齊與設(shè)置文本對(duì)齊類似，可以使用 DIV 或 P 標(biāo)記符將 IMG 標(biāo)記符括起來(lái)，然后使用 align 屬性。 例如，以下 HTML 語(yǔ)句將使

11、圖像居中對(duì)齊（圖像默認(rèn)時(shí)與文本一樣是左對(duì)齊的）： ,圖像除了與頁(yè)面水平對(duì)齊之外還有就是與周圍內(nèi)容的垂直對(duì)齊 這個(gè)屬性此時(shí)屬于img標(biāo)記里面 以下HTML代碼說(shuō)明了 align 屬性如何控制文本與圖像的垂直對(duì)齊（同時(shí)顯示了 border邊框 屬性的效果），如圖 所示。 文本與圖像的垂直對(duì)齊示例 ,此圖像與文本頂部對(duì)齊 此圖像與文本中央對(duì)齊 此圖像與文本底部對(duì)齊 ,文字與圖像的垂直對(duì)齊,圖文混排時(shí)的圖像對(duì)齊 以下 HTML 代碼顯示了文本與圖像的環(huán)繞效果（同時(shí)顯示了 hspace 和 vspace 屬性的效果）（水平邊界與垂直邊界），如圖 所示。 文本與圖像的環(huán)繞示例,野蠻人-文明邊緣的幾個(gè)部落中的成員之一，拒絕一切看起來(lái)溫柔和軟弱的事物對(duì)他的影響。在部落之間的不斷戰(zhàn)爭(zhēng)中他活了下來(lái)，這得益于堅(jiān)定的意志和強(qiáng)健的體格。雖然缺乏文明人的心計(jì)，但是他能夠敏銳的感覺(jué)到周圍的環(huán)境，因?yàn)檫@一切來(lái)自他那動(dòng)物般的直覺(jué)，這也使得野蠻人讓人想起了民間關(guān)于狼人的一些傳說(shuō)。事實(shí)上他們堅(jiān)信能夠召喚圖騰上動(dòng)物的靈魂來(lái)鼓舞他們，并且因而得到非凡的