第4講使用HTML設置文本和圖像

1、回顧內(nèi)容:htmlhtml文件的基本結構是怎樣的文件的基本結構是怎樣的? ?htmlhtml標記及其屬性如何命名標記及其屬性如何命名? ?頭部標記頭部標記主體標記主體標記1第4 4講 使用htmlhtml設置文本和圖像4.1 4.1 段落標記段落標記4.2 4.2 文字標記文字標記4.3 4.3 列表標記列表標記4.4 4.4 圖片標記圖片標記24.1 4.1 段落標記網(wǎng)頁中對文字要安排文字位置需要通過網(wǎng)頁中對文字要安排文字位置需要通過特定的特定的htmlhtml標記來完成。標記來完成。htmlhtml文件中無論輸入多少個空格（按空文件中無論輸入多少個空格（按空格鍵）均視為一個空格；換行（按回

2、車格鍵）均視為一個空格；換行（按回車鍵）也無效。鍵）也無效。31)1)段落標記所謂段落，指得是一段格式上統(tǒng)一的文本所謂段落，指得是一段格式上統(tǒng)一的文本基本語法基本語法語法解釋語法解釋 從從開始處創(chuàng)建一個段落，開始處創(chuàng)建一個段落，段落與上下文段落與上下文都有一空行的間隔都有一空行的間隔標標 記記描描 述述屬屬 性性屬性取值屬性取值 雙標記雙標記alignleftcenterright42)2)換行標記 作用作用: : 產(chǎn)生一個換行效果產(chǎn)生一個換行效果基本語法基本語法 53 3）居中標記基本語法基本語法 作用：使作用：使標記標記對之間的文字在瀏覽器窗口中居對之間的文字在瀏覽器窗口中居中對齊中對齊6

3、段落、換行及居中標記綜合示例74 4）預格式化標記基本語法基本語法 語法解釋語法解釋預格式化，是指保留預格式化，是指保留之間的之間的文文字在字在源代碼源代碼中的格式，使其在頁面中顯示的中的格式，使其在頁面中顯示的效果和源代碼中的效果幾乎完全一致效果和源代碼中的效果幾乎完全一致8預格式化標記示例95 5） 水平線標記 水平線用于段落與段落之間的分隔，使文水平線用于段落與段落之間的分隔，使文檔結構更加清晰，使文字的編排更加整齊檔結構更加清晰，使文字的編排更加整齊基本語法基本語法 常用屬性常用屬性 屬屬 性性描描 述述width設置水平線寬度設置水平線寬度,單位為像素或瀏覽器窗口的單位為像素或瀏覽器

4、窗口的%size水平線高度水平線高度,單位為像素單位為像素align水平線對齊方式水平線對齊方式,取值取值left|center|right,默認居中對齊默認居中對齊noshade默認的水平線的空心立體效果改設為實心的不帶陰影的效默認的水平線的空心立體效果改設為實心的不帶陰影的效果果color水平線顏色水平線顏色,顯示顏色時，當水平線將顯示成實心顯示顏色時，當水平線將顯示成實心10水平線標記114.2 4.2 文字標記文字標記主要用于設置網(wǎng)頁中的所有文字標記主要用于設置網(wǎng)頁中的所有有關文字方面的內(nèi)容，具體包括普通有關文字方面的內(nèi)容，具體包括普通文字、特殊字符、標題字、字體以及文字、特殊字符、標

5、題字、字體以及文字格式等方面的設置文字格式等方面的設置12表表4-1 4-1 常用文字標記常用文字標記標標 記記描描 述述文字內(nèi)容文字內(nèi)容包括普通文字、空格及特殊符號等包括普通文字、空格及特殊符號等標題字標記標題字標記以某幾種固定的字號顯示文字，共以某幾種固定的字號顯示文字，共分為六個級別（分為六個級別（h1h6h1h6），對應著），對應著六種字號六種字號文字的修飾標記文字的修飾標記通過這些修飾標記，可設定文字的通過這些修飾標記，可設定文字的不同格式，如粗體、斜體等不同格式，如粗體、斜體等字體標記字體標記設定文字的字體、字號及顏色等設定文字的字體、字號及顏色等131 1）文字內(nèi)容網(wǎng)頁中涉及到的

6、文字主要包括網(wǎng)頁中涉及到的文字主要包括: :普通文字、普通文字、特殊符號以及頁面的注釋語句特殊符號以及頁面的注釋語句普通文字的輸入普通文字的輸入: : 直接在直接在和和標記之間輸入標記之間輸入 特殊字符的輸入特殊字符的輸入: : 在源代碼中特殊字符使用其對應的符號碼代替在源代碼中特殊字符使用其對應的符號碼代替. .特殊符號特殊符號符號碼符號碼空格空格 “"&> · xק¢￥¥£ © &re

7、g;&trade；142 2）標題字標記l 所謂標題字就是以某幾種固定的字號去顯所謂標題字就是以某幾種固定的字號去顯示文字，一般用于強調(diào)段落要表現(xiàn)的內(nèi)容示文字，一般用于強調(diào)段落要表現(xiàn)的內(nèi)容或作為文章的標題或作為文章的標題l具有加粗顯示并與下一行產(chǎn)生一空行的特具有加粗顯示并與下一行產(chǎn)生一空行的特性性l根據(jù)字號的大小分為六級，分別用標記根據(jù)字號的大小分為六級，分別用標記h1h6h1h6表示，字號的大小隨數(shù)字增大而遞減表示，字號的大小隨數(shù)字增大而遞減標標 記記描描 述述屬屬 性性屬性取值屬性取值一級標題一級標題alignleft（默認值）（默認值）二級標題二級標題三級標題三級標題center

8、四級標題四級標題五級標題五級標題right六級標題六級標題15標題字標記綜合示例163 3）文字的修飾標記用于對文字進行格式化用于對文字進行格式化常用的修飾標記如下：常用的修飾標記如下：標標 記記描描 述述粗體粗體斜體斜體上標上標下標下標大字號大字號小字號小字號下劃線下劃線刪除線刪除線地址，用于地址、地址，用于地址、email17文字修飾標記綜合示例184-14-1）字體標記作用：作用：設置文字的字體、字號及顏色設置文字的字體、字號及顏色基本語法基本語法font face= 表表4-3 4-3 字體標記的屬性字體標記的屬性屬屬 性性描描 述述face設置字體設置字體size字號，取值范圍為從字

9、號，取值范圍為從1到到7，或者從，或者從+1到到+7、從、從-1到到-7（正負取值相對于（正負取值相對于頁面默認字號頁面默認字號3），超出取值），超出取值范圍的，范圍的，與取值范圍的最近的極值效果相同與取值范圍的最近的極值效果相同color文字顏色文字顏色19字體標記綜合示例204.3 4.3 列表標記所謂列表，通俗的講就是各列表項按所謂列表，通俗的講就是各列表項按一定的方式進行排列而成的一張表一定的方式進行排列而成的一張表按列表項排列方式的不同，可分成：按列表項排列方式的不同，可分成：有序列表有序列表無序列表無序列表嵌套列表嵌套列表21有序列表有序列表 以數(shù)字或字母等表示順序的符號為項目以數(shù)

10、字或字母等表示順序的符號為項目前導符來排列列表項目的列表。例如前導符來排列列表項目的列表。例如: :無序列表無序列表 以無順序的符號（以無順序的符號（、等）為項目前等）為項目前導符來排列列表項目或沒有任何符號作項導符來排列列表項目或沒有任何符號作項目前導符的列表。目前導符的列表。嵌套列表嵌套列表 指多于一級層次的列表，一級列表項下指多于一級層次的列表，一級列表項下面可以存在二級項目、三級項目等面可以存在二級項目、三級項目等 221 1）有序列表基本語法基本語法 項目一項目一 項目二項目二 23有序列表標記示例24常用屬性常用屬性屬屬 性性描描 述述屬性值屬性值type設置有序列設置有序列表的前

11、導符表的前導符1前導符為數(shù)字前導符為數(shù)字1、2、3a前導符為小寫字母前導符為小寫字母a、b、ca前導符為大寫字母前導符為大寫字母a、b、ci前導符為小寫羅馬數(shù)字前導符為小寫羅馬數(shù)字i、ii、iiii前導符為大寫羅馬數(shù)字前導符為大寫羅馬數(shù)字i、start設置有序列設置有序列表的起始編表的起始編號號value在默認情況下，有序列表從數(shù)字在默認情況下，有序列表從數(shù)字1開始編號；開始編號；不論列表編號是數(shù)字、英文字母不論列表編號是數(shù)字、英文字母還是羅馬數(shù)字，還是羅馬數(shù)字，value的值都是需的值都是需要起始的要起始的數(shù)字數(shù)字25有序列表前導符和起始編號設置示例262) 2) 無序列表 常用無序列表如下

12、常用無序列表如下: :項目列表項目列表 前導符默認為實心圓點前導符默認為實心圓點272 2）項目列表 基本語法基本語法 項目一項目一/ 項目二項目二/ / 常用屬性常用屬性type設置項目列設置項目列表的前導符表的前導符前導符為前導符為（默認前導符）（默認前導符）前導符為前導符為28項目列表前導符設置示例293 3） 嵌套列表嵌套列表指的是多于一級層次的列表，嵌套列表指的是多于一級層次的列表，一級列表項下面可以存在二級項目、一級列表項下面可以存在二級項目、三級項目等三級項目等嵌套列表類型：嵌套列表類型：定義列表的嵌套定義列表的嵌套無序列表和有序列表的嵌套無序列表和有序列表的嵌套 這種嵌套類型是

13、最常見的，它主要是通這種嵌套類型是最常見的，它主要是通過在過在 一種列表中的列表項中嵌套另一種列一種列表中的列表項中嵌套另一種列表的定表的定 義來實現(xiàn)義來實現(xiàn)30無序列表和有序列表嵌套示例314.4 4.4 圖片標記l網(wǎng)頁中的常用圖片格式網(wǎng)頁中的常用圖片格式- gif- gif（graphics interchange formatgraphics interchange format，圖形交，圖形交換格式）換格式） 最多使用最多使用256256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏單一顏 色的圖像，如站點圖標、導航條等。色的圖像，如站點圖標、導

14、航條等。- jpeg- jpeg（join photograph graphicjoin photograph graphic，聯(lián)合圖像，聯(lián)合圖像專家組標準專家組標準) ) 又稱又稱jgpjgp，用來顯示照片等顏色豐富的精美圖像，用來顯示照片等顏色豐富的精美圖像- png- png（portable network graphicsportable network graphics，可移植，可移植網(wǎng)絡圖形）網(wǎng)絡圖形） 既融合了既融合了gifgif格式透明顯示的顏色，又具有格式透明顯示的顏色，又具有jpegjpeg處處 理精美圖像的優(yōu)勢，是逐漸流行的網(wǎng)絡圖像格式，理精美圖像的優(yōu)勢，是逐漸流行的網(wǎng)

15、絡圖像格式，但目前瀏覽器對其支持并不一致但目前瀏覽器對其支持并不一致32插入圖片基本語法基本語法基本語法 常用屬性常用屬性 src指定圖片源文件所在路徑指定圖片源文件所在路徑(必設屬性必設屬性)alt設置提示文字設置提示文字width設置圖片的寬度設置圖片的寬度height設置圖片的高度設置圖片的高度hspace設置圖片與相鄰對象之間的左右間距設置圖片與相鄰對象之間的左右間距vspace設置圖片與相鄰對象之間的上下間距設置圖片與相鄰對象之間的上下間距align設置對齊方式設置對齊方式border設置圖片邊框，默認情況下，不顯示邊框設置圖片邊框，默認情況下，不顯示邊框align屬性值描 述bas

16、eline、bottom、absbottom圖片底端與文字底端對齊top、texttop圖片頂端與文字行最高字符的頂端對齊middle圖片的中間線與文字底端對齊absmiddle圖片的中間線與文字的中間線對齊right圖片在文字的右邊left圖片在文字的左邊align33插入圖片綜合示例34文件路徑路徑分為以下兩種情況：絕對路徑：先指明最高級別的層次，然后依次向下說明。p例：http:/ 結字體標記字體標記的的sizesize屬性的取值范圍是屬性的取值范圍是1717，其，其中中“1 1”為最小字號，為最小字號，“7 7”為最大字號。為最大字號?？崭裨谠创a中的表示是空格在源代碼中的表示是”&a

17、mp; &nbspnbsp; ;”，一個，一個& &nbspnbsp; ;表示一個半角空格。另外一些特殊符號表示一個半角空格。另外一些特殊符號如如“ ”等，在源代碼中也要象空格的表示一等，在源代碼中也要象空格的表示一樣，使用字符碼。樣，使用字符碼。設置文字的格式（如加粗顯示文字）需要使用設置文字的格式（如加粗顯示文字）需要使用文字修飾標記文字修飾標記標題標記的級別范圍是標題標記的級別范圍是h1h6h1h6，其中，其中“h1h1”的字的字號是最大的，號是最大的，“h6h6”的字號是最小的。的字號是最小的。37標記可使顯示的內(nèi)容的格式與源代標記可使顯示的內(nèi)容的格式與源代碼的格式幾乎完全一樣。碼的格式幾乎完全一樣。段落標記段落標記和換行標記和換行標記的一個顯著的一個顯著的不同之處是的不同之處是在換行的同時，會與上在換行的同時，會與上（下）文產(chǎn)生一空行的間隔，而（下）文產(chǎn)生一空行的間隔，而則則沒有。沒有。水平線標記水平線標記中的屬性中的屬性sizesize