網(wǎng)頁(yè)html代碼詳解

1、第第2章章 HTML語(yǔ)言語(yǔ)言本章要點(diǎn)：本章要點(diǎn)： HTML的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí) 常用常用HTML標(biāo)記標(biāo)記 XHTML2.1 HTML簡(jiǎn)介簡(jiǎn)介nHTML（Hyper Text Markup Language）稱(chēng)為稱(chēng)為，是一種描述文檔結(jié)構(gòu)的標(biāo)記，是一種描述文檔結(jié)構(gòu)的標(biāo)記語(yǔ)言，它是一種應(yīng)用非常廣泛的語(yǔ)言，它是一種應(yīng)用非常廣泛的，也，也是最早被用來(lái)顯示是最早被用來(lái)顯示W(wǎng)eb頁(yè)的語(yǔ)言之一。它與操頁(yè)的語(yǔ)言之一。它與操作系統(tǒng)平臺(tái)的選擇無(wú)關(guān)，只要有作系統(tǒng)平臺(tái)的選擇無(wú)關(guān)，只要有就可以就可以運(yùn)行運(yùn)行HTML文檔，顯示網(wǎng)頁(yè)內(nèi)容。文檔，顯示網(wǎng)頁(yè)內(nèi)容。nHTML文檔類(lèi)似于文檔類(lèi)似于.txt文本文件，不同的是，文文本文件

2、，不同的是，文檔里還包含一種被稱(chēng)為檔里還包含一種被稱(chēng)為的符號(hào)。的符號(hào)。2.1.1 標(biāo)記的格式標(biāo)記的格式1. 標(biāo)記的功能標(biāo)記的功能n控制網(wǎng)頁(yè)的顯示方式控制網(wǎng)頁(yè)的顯示方式2. 標(biāo)記的構(gòu)成標(biāo)記的構(gòu)成n由由 及括在其中的命令字符串組成及括在其中的命令字符串組成 、成對(duì)出現(xiàn)，成對(duì)出現(xiàn)， 如如、 ，如，如、2.1.1 標(biāo)記的格式標(biāo)記的格式3. 標(biāo)記的使用方法標(biāo)記的使用方法 (1) 文本或超文本文本或超文本 (2) 文本或超文本文本或超文本 例：例：你好！你好！ (3) 2.1.1 標(biāo)記的格式標(biāo)記的格式n書(shū)寫(xiě)書(shū)寫(xiě)HTML代碼時(shí)應(yīng)代碼時(shí)應(yīng)以下幾點(diǎn)：以下幾點(diǎn)：1) HTML標(biāo)記及屬性中字母標(biāo)記及屬性中字母不區(qū)分

3、大小寫(xiě)不區(qū)分大小寫(xiě)，如，如與與對(duì)瀏覽器來(lái)說(shuō)是完全相同的。對(duì)瀏覽器來(lái)說(shuō)是完全相同的。2) 標(biāo)記名與左尖括號(hào)之間不能留有空白，如標(biāo)記名與左尖括號(hào)之間不能留有空白，如是錯(cuò)誤的。是錯(cuò)誤的。3) 屬性要寫(xiě)在開(kāi)始標(biāo)記的尖括號(hào)中，放在標(biāo)記名后，屬性要寫(xiě)在開(kāi)始標(biāo)記的尖括號(hào)中，放在標(biāo)記名后，并且與標(biāo)記名之間要有空白；多個(gè)屬性之間也要有并且與標(biāo)記名之間要有空白；多個(gè)屬性之間也要有空白；屬性值最好用單引號(hào)或雙引號(hào)引起來(lái)，引號(hào)空白；屬性值最好用單引號(hào)或雙引號(hào)引起來(lái)，引號(hào)一定要是一定要是英文英文的引號(hào)，不能是中文引號(hào)。的引號(hào)，不能是中文引號(hào)。4) 結(jié)束標(biāo)記要書(shū)寫(xiě)正確，不能忘掉斜杠。結(jié)束標(biāo)記要書(shū)寫(xiě)正確，不能忘掉斜杠。2.

4、1.2 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)表表2-1 html文件構(gòu)成骨架文件構(gòu)成骨架文件開(kāi)始文件開(kāi)始頭頭 部部 標(biāo)題名標(biāo)題名 其他頭部?jī)?nèi)容定義標(biāo)記其他頭部?jī)?nèi)容定義標(biāo)記 主主 體體 網(wǎng)頁(yè)內(nèi)容（文本、圖像等網(wǎng)頁(yè)內(nèi)容（文本、圖像等) 文件結(jié)束文件結(jié)束2.1.2 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)1. 文件頭部文件頭部之間定義，內(nèi)容可包括標(biāo)題之間定義，內(nèi)容可包括標(biāo)題名、文本文件地址、創(chuàng)作者信息等網(wǎng)頁(yè)信息說(shuō)名、文本文件地址、創(chuàng)作者信息等網(wǎng)頁(yè)信息說(shuō)明。明。n文件頭部還可包括一些其他標(biāo)記：文件頭部還可包括一些其他標(biāo)記： 定義網(wǎng)頁(yè)的標(biāo)題；定義網(wǎng)頁(yè)的標(biāo)題； ：說(shuō)明一些與文檔相關(guān)的信息，如作：說(shuō)明一些與文檔相關(guān)的信息，如作 者、關(guān)

5、鍵內(nèi)容、所用語(yǔ)言等；者、關(guān)鍵內(nèi)容、所用語(yǔ)言等；2.1.2 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)2. 文件主體文件主體n位于頭部之后，在位于頭部之后，在之間定義，之間定義，定義了網(wǎng)頁(yè)上顯示的主要內(nèi)容和顯示格式。定義了網(wǎng)頁(yè)上顯示的主要內(nèi)容和顯示格式。n文件主體內(nèi)可包括眾多其他標(biāo)記。文件主體內(nèi)可包括眾多其他標(biāo)記。2.1.2 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)n標(biāo)記常用標(biāo)記常用： background：設(shè)置網(wǎng)頁(yè)背景圖案。設(shè)置網(wǎng)頁(yè)背景圖案。 例如例如 bgcolor：設(shè)置網(wǎng)頁(yè)背景色。設(shè)置網(wǎng)頁(yè)背景色。 例如例如 text：設(shè)置文本顏色，默認(rèn)黑色。設(shè)置文本顏色，默認(rèn)黑色。 link：設(shè)置尚未被訪(fǎng)問(wèn)過(guò)的超文本鏈接的顏色。設(shè)置尚未被

6、訪(fǎng)問(wèn)過(guò)的超文本鏈接的顏色。 vlink：設(shè)置已被訪(fǎng)問(wèn)過(guò)的超文本鏈接的顏色。設(shè)置已被訪(fǎng)問(wèn)過(guò)的超文本鏈接的顏色。2.1.2 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)3. 注釋注釋n格式：格式：n注釋以注釋以“”結(jié)束，注釋的內(nèi)容會(huì)結(jié)束，注釋的內(nèi)容會(huì)被瀏覽器忽略。利用注釋可以為被瀏覽器忽略。利用注釋可以為HTML文檔的不同文檔的不同部分加上說(shuō)明，方便日后修改，也可以利用注釋為部分加上說(shuō)明，方便日后修改，也可以利用注釋為HTML文檔加上版權(quán)聲明。文檔加上版權(quán)聲明。n注釋可有多行。注釋可有多行。2.1.3 HTML的制作的制作n制作制作HTML文檔需要兩個(gè)基本工具，一個(gè)文檔需要兩個(gè)基本工具，一個(gè)HTML編輯器，編輯器，一

7、個(gè)一個(gè)Web瀏覽器。瀏覽器。nHTML編輯器可分為兩類(lèi)：編輯器可分為兩類(lèi)：基于文本或代碼基于文本或代碼的編的編輯器和輯器和所見(jiàn)即所得所見(jiàn)即所得(WYSIWYG)編輯器。前者在編輯器。前者在創(chuàng)建文檔時(shí)只能看到創(chuàng)建文檔時(shí)只能看到HTML代碼，后者在編輯時(shí)代碼，后者在編輯時(shí)即顯示出類(lèi)似于最終瀏覽器窗口顯示的結(jié)果。即顯示出類(lèi)似于最終瀏覽器窗口顯示的結(jié)果。nWeb瀏覽器用來(lái)瀏覽瀏覽器用來(lái)瀏覽HTML文檔，在文檔，在Windows操操作系統(tǒng)上，常用的瀏覽器是作系統(tǒng)上，常用的瀏覽器是Microsoft Internet Explorer，也常簡(jiǎn)稱(chēng)為也常簡(jiǎn)稱(chēng)為IE。2.1.3 HTML的制作的制作用記事本制作

8、網(wǎng)頁(yè)的步驟如下：用記事本制作網(wǎng)頁(yè)的步驟如下：1) 打開(kāi)記事本。打開(kāi)記事本。2) 在記事本中輸入代碼：在記事本中輸入代碼： 我的第一個(gè)網(wǎng)頁(yè)我的第一個(gè)網(wǎng)頁(yè) 這是我用記事本做的第一個(gè)網(wǎng)頁(yè)，我會(huì)努力學(xué)好這是我用記事本做的第一個(gè)網(wǎng)頁(yè)，我會(huì)努力學(xué)好HTML！ 2.1.3 HTML制作工具制作工具3) 保存文件：保存文件：HTML文件的擴(kuò)展名為文件的擴(kuò)展名為.htm、.html、.aspx或或asp，因?yàn)橛行?，因?yàn)橛行￤eb服務(wù)器對(duì)中文文件名不服務(wù)器對(duì)中文文件名不能很好支持，所以文能很好支持，所以文件名中盡量不要使用漢字。件名中盡量不要使用漢字。4) 用瀏覽器打開(kāi)上步保存的文件，即可看到如圖用瀏覽器打開(kāi)上步

9、保存的文件，即可看到如圖2.1所示的頁(yè)面。所示的頁(yè)面。圖圖2.1 第一個(gè)網(wǎng)頁(yè)第一個(gè)網(wǎng)頁(yè)2.2 常用常用HTML標(biāo)記標(biāo)記 本節(jié)分類(lèi)介紹常用的本節(jié)分類(lèi)介紹常用的HTML標(biāo)記及其常用屬標(biāo)記及其常用屬性，其它標(biāo)記的詳細(xì)情況請(qǐng)參考相關(guān)書(shū)籍。性，其它標(biāo)記的詳細(xì)情況請(qǐng)參考相關(guān)書(shū)籍。2. 字體標(biāo)記字體標(biāo)記4. 圖像標(biāo)記圖像標(biāo)記6. 表格標(biāo)記表格標(biāo)記8. 其他標(biāo)記其他標(biāo)記 排版標(biāo)記排版標(biāo)記 3. 列表標(biāo)記列表標(biāo)記 5. 鏈接標(biāo)記鏈接標(biāo)記 7. 表單標(biāo)記表單標(biāo)記2.2.1 排版標(biāo)記排版標(biāo)記1. 段落標(biāo)記段落標(biāo)記n用于分段，用于分段，和和之間的文字在同一段落，之間的文字在同一段落，并使并使前段與后段之間加一空白行。

10、前段與后段之間加一空白行。結(jié)束標(biāo)記結(jié)束標(biāo)記可以省略，下一個(gè)可以省略，下一個(gè)開(kāi)始意味著上一個(gè)開(kāi)始意味著上一個(gè)結(jié)束結(jié)束 。n的常用屬性的常用屬性align，用來(lái)設(shè)定段落的對(duì)齊方，用來(lái)設(shè)定段落的對(duì)齊方式，可取屬性值有：式，可取屬性值有： left：左對(duì)齊；：左對(duì)齊； center：居中對(duì)齊；：居中對(duì)齊； right：右對(duì)齊。：右對(duì)齊。2.2.1 排版標(biāo)記排版標(biāo)記2. 強(qiáng)制換行強(qiáng)制換行n稱(chēng)為換行標(biāo)記，在網(wǎng)頁(yè)設(shè)計(jì)中比較常用，稱(chēng)為換行標(biāo)記，在網(wǎng)頁(yè)設(shè)計(jì)中比較常用，它的作用就是換行。它的作用就是換行。屬于屬于單標(biāo)記，單標(biāo)記，沒(méi)有結(jié)沒(méi)有結(jié)束標(biāo)記，且不包含任何屬性。束標(biāo)記，且不包含任何屬性。3. 預(yù)格式化標(biāo)記預(yù)格

11、式化標(biāo)記n稱(chēng)為預(yù)格式化標(biāo)記，它的作用是稱(chēng)為預(yù)格式化標(biāo)記，它的作用是按原始代按原始代碼的排列方式顯示內(nèi)容。碼的排列方式顯示內(nèi)容。通常情況下，瀏覽器通常情況下，瀏覽器顯示時(shí)會(huì)忽略?xún)?nèi)容中的空白及換行，而顯示時(shí)會(huì)忽略?xún)?nèi)容中的空白及換行，而與與之間的空白及換行會(huì)被保留。之間的空白及換行會(huì)被保留。2.2.1 排版標(biāo)記排版標(biāo)記4. 水平線(xiàn)標(biāo)記水平線(xiàn)標(biāo)記n稱(chēng)為水平線(xiàn)標(biāo)記，可以在頁(yè)面中產(chǎn)生一條水稱(chēng)為水平線(xiàn)標(biāo)記，可以在頁(yè)面中產(chǎn)生一條水平線(xiàn)，沒(méi)有結(jié)束標(biāo)記。平線(xiàn)，沒(méi)有結(jié)束標(biāo)記。的常用的常用屬性屬性有：有： align：對(duì)齊方式，屬性值有對(duì)齊方式，屬性值有l(wèi)eft、center、right； width：長(zhǎng)度，屬性值可

12、以是絕對(duì)值長(zhǎng)度，屬性值可以是絕對(duì)值(像素像素)或相對(duì)或相對(duì)值值(百分比百分比) ； size：粗細(xì)，屬性值為整數(shù)，單位為像素；粗細(xì)，屬性值為整數(shù)，單位為像素； color：顏色。顏色。例：例： 2.2.1 排版標(biāo)記排版標(biāo)記5. n稱(chēng)為居中標(biāo)記，可以使標(biāo)記的內(nèi)容居中稱(chēng)為居中標(biāo)記，可以使標(biāo)記的內(nèi)容居中顯示，使用時(shí)需要結(jié)束標(biāo)記顯示，使用時(shí)需要結(jié)束標(biāo)記。6. n是塊定義標(biāo)簽，用于定義一個(gè)塊的風(fēng)格。是塊定義標(biāo)簽，用于定義一個(gè)塊的風(fēng)格。ndiv要有開(kāi)始標(biāo)簽要有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽和結(jié)束標(biāo)簽 n當(dāng)要在許多段落中設(shè)置對(duì)齊方式時(shí)，常用當(dāng)要在許多段落中設(shè)置對(duì)齊方式時(shí)，常用標(biāo)標(biāo)記和記和align屬性。如：屬性。如：

13、文本或圖像文本或圖像 2.2.1 排版標(biāo)記排版標(biāo)記例例2-2 圖圖2.2 排版標(biāo)記排版標(biāo)記2.2.2 字體標(biāo)記字體標(biāo)記1. 標(biāo)題標(biāo)題 標(biāo)題標(biāo)題，n可取可取16之間的整數(shù)值之間的整數(shù)值 每個(gè)標(biāo)題標(biāo)記所標(biāo)記的文本加粗顯示獨(dú)占一行每個(gè)標(biāo)題標(biāo)記所標(biāo)記的文本加粗顯示獨(dú)占一行且上下保留一空白行，由且上下保留一空白行，由到到字體依次變字體依次變小。可用屬性設(shè)置標(biāo)題的對(duì)齊方式。小?？捎脤傩栽O(shè)置標(biāo)題的對(duì)齊方式。2.2.2 字體標(biāo)記字體標(biāo)記2. 標(biāo)記標(biāo)記文本文本 常用屬性：常用屬性： face：用來(lái)設(shè)定文本的用來(lái)設(shè)定文本的字體字體，屬性值為逗號(hào)隔，屬性值為逗號(hào)隔開(kāi)的字體列表，如果瀏覽器所在機(jī)器上沒(méi)有安開(kāi)的字體列表

14、，如果瀏覽器所在機(jī)器上沒(méi)有安裝指定的任何一種字體，則以瀏覽器默認(rèn)字體裝指定的任何一種字體，則以瀏覽器默認(rèn)字體顯示，所以使用時(shí)最好不使用特殊字體。顯示，所以使用時(shí)最好不使用特殊字體。2.2.2 字體標(biāo)記字體標(biāo)記 size：用來(lái)設(shè)定文本的用來(lái)設(shè)定文本的大小大小，屬性值可以是絕，屬性值可以是絕對(duì)的或相對(duì)的，如對(duì)的或相對(duì)的，如size=“5”是絕對(duì)的，表示文本是絕對(duì)的，表示文本以以5號(hào)字顯示號(hào)字顯示; size=“+2”是相對(duì)的，表示文本在是相對(duì)的，表示文本在原先大小的基礎(chǔ)上再增大原先大小的基礎(chǔ)上再增大2級(jí)。級(jí)。 size屬性可取屬性可取17之間的整數(shù)值之間的整數(shù)值. color：設(shè)定文本的設(shè)定文本的

15、顏色顏色。 2.2.2 字體標(biāo)記字體標(biāo)記3. 標(biāo)記標(biāo)記為為粗體粗體標(biāo)記，標(biāo)記，與與之間的文本產(chǎn)生加粗效果。之間的文本產(chǎn)生加粗效果。為為斜體斜體標(biāo)記，標(biāo)記，與與之間的文本產(chǎn)生斜體效果。之間的文本產(chǎn)生斜體效果。為加為加下劃線(xiàn)下劃線(xiàn)標(biāo)記，標(biāo)記，與與之間的文本顯示時(shí)會(huì)之間的文本顯示時(shí)會(huì)加底線(xiàn)。加底線(xiàn)。為加為加刪除線(xiàn)刪除線(xiàn)標(biāo)記，標(biāo)記，與與之間的文本顯示時(shí)會(huì)加之間的文本顯示時(shí)會(huì)加刪除線(xiàn)。刪除線(xiàn)。注：注：這四個(gè)標(biāo)記都是雙標(biāo)記，使用時(shí)如果忘掉結(jié)束標(biāo)這四個(gè)標(biāo)記都是雙標(biāo)記，使用時(shí)如果忘掉結(jié)束標(biāo) 記，則開(kāi)始標(biāo)記對(duì)后面的所有文本都起作用。記，則開(kāi)始標(biāo)記對(duì)后面的所有文本都起作用。2.2.2 字體標(biāo)記字體標(biāo)記圖圖2.3

16、字體標(biāo)記字體標(biāo)記例例2-32.2.3 列表標(biāo)記列表標(biāo)記1. 無(wú)序列表無(wú)序列表與與n 定義項(xiàng)目列表的語(yǔ)法為：定義項(xiàng)目列表的語(yǔ)法為： 項(xiàng)項(xiàng)1 項(xiàng)項(xiàng)2 n 的常用屬性只有一個(gè)的常用屬性只有一個(gè)type，用來(lái)，用來(lái)設(shè)定列表項(xiàng)前面出現(xiàn)的符號(hào)，可取屬設(shè)定列表項(xiàng)前面出現(xiàn)的符號(hào)，可取屬性值有：性值有： disc：列表項(xiàng)前面加上符號(hào)；：列表項(xiàng)前面加上符號(hào)； circle：列表項(xiàng)前面加上符號(hào)；：列表項(xiàng)前面加上符號(hào)； square：列表項(xiàng)前面加上符號(hào)。：列表項(xiàng)前面加上符號(hào)。2.2.3 列表標(biāo)記列表標(biāo)記2. 有序列表有序列表與與 定義編號(hào)列表的語(yǔ)法為：定義編號(hào)列表的語(yǔ)法為： 項(xiàng)項(xiàng)1 項(xiàng)項(xiàng)2 2.2.3 列表標(biāo)記列表標(biāo)

17、記 的常用的常用有：有： type：用來(lái)設(shè)定列表的編號(hào)形式，可取屬性值有：用來(lái)設(shè)定列表的編號(hào)形式，可取屬性值有： 1：用阿拉伯?dāng)?shù)字：用阿拉伯?dāng)?shù)字1，2，3，編號(hào)；編號(hào)； a：用小寫(xiě)英文字母：用小寫(xiě)英文字母a，b，c，編號(hào)；編號(hào)； A：用大寫(xiě)英文字母：用大寫(xiě)英文字母A，B，C，編號(hào)；編號(hào)； i：用小寫(xiě)羅馬字母：用小寫(xiě)羅馬字母，編號(hào)；編號(hào)； I：用大寫(xiě)羅馬字母：用大寫(xiě)羅馬字母，編號(hào)。編號(hào)。 start：用來(lái)設(shè)定列表開(kāi)始編號(hào)的位置，不論采用來(lái)設(shè)定列表開(kāi)始編號(hào)的位置，不論采 用何種編號(hào)形式，屬性值都為用何種編號(hào)形式，屬性值都為整數(shù)整數(shù)，如，如 start=“3”表示第一項(xiàng)從第表示第一項(xiàng)從第3的位置開(kāi)始

18、編號(hào)。的位置開(kāi)始編號(hào)。2.2.3 列表標(biāo)記列表標(biāo)記3. 標(biāo)記標(biāo)記 用來(lái)標(biāo)記列表中的一項(xiàng)，需同用來(lái)標(biāo)記列表中的一項(xiàng)，需同或或一一 起使用，它的起使用，它的有：有： type：用來(lái)設(shè)定列表項(xiàng)的符號(hào)，如果用來(lái)設(shè)定列表項(xiàng)的符號(hào)，如果用用 里，屬性取值為里，屬性取值為disc、circle或或square，如果，如果 用在用在里，則屬性取值為里，則屬性取值為1、a、A、i或或I。 value：此屬性?xún)H當(dāng)此屬性?xún)H當(dāng)用在用在里有效，屬性值里有效，屬性值 為一為一整數(shù)整數(shù)，用來(lái)設(shè)定當(dāng)前項(xiàng)的編號(hào)，其后的項(xiàng)目，用來(lái)設(shè)定當(dāng)前項(xiàng)的編號(hào)，其后的項(xiàng)目 將以此值為起始數(shù)目遞增，前面各項(xiàng)不受影響。將以此值為起始數(shù)目遞增，前面

19、各項(xiàng)不受影響。2.2.3 列表標(biāo)記列表標(biāo)記例例2-4圖圖2.4 列表標(biāo)記列表標(biāo)記2.2.4 圖像標(biāo)記圖像標(biāo)記1. 圖像文件的格式圖像文件的格式 常用圖片格式：常用圖片格式：png、jpeg、gif、bmp。2. 加入圖像加入圖像 常用常用 src：圖像文件。圖像文件。 alt：替代文本。替代文本。 height：高度；高度；width：寬度。寬度。 border：邊框?qū)挾?。邊框?qū)挾取?vspace：垂直邊距；垂直邊距；hspace：水平邊距。水平邊距。2.2.4 圖像標(biāo)記圖像標(biāo)記 align：圖像與文本的對(duì)齊方式，可取值為：圖像與文本的對(duì)齊方式，可取值為： top：文本與圖像頂部對(duì)齊；：文本與

20、圖像頂部對(duì)齊； middle：文本與圖像中央對(duì)齊；：文本與圖像中央對(duì)齊； bottom：文本與圖像底部對(duì)齊；：文本與圖像底部對(duì)齊； left：圖像居左；：圖像居左； right：圖像居右。：圖像居右。例例2-52.2.4 圖像標(biāo)記圖像標(biāo)記絕對(duì)路徑絕對(duì)路徑n指定文檔或文件的完整地址。指定文檔或文件的完整地址。相對(duì)路徑相對(duì)路徑n相對(duì)路徑又分為相對(duì)路徑又分為和和，根相對(duì)路徑總是以站點(diǎn)根目錄根相對(duì)路徑總是以站點(diǎn)根目錄“/”為起始目錄，為起始目錄，寫(xiě)起來(lái)比較簡(jiǎn)單；寫(xiě)起來(lái)比較簡(jiǎn)單；文檔相對(duì)路徑是以當(dāng)前文件文檔相對(duì)路徑是以當(dāng)前文件所在路徑為起始目錄，進(jìn)行相對(duì)的文件查找。所在路徑為起始目錄，進(jìn)行相對(duì)的文件查找

21、。2.2.4 圖像標(biāo)記圖像標(biāo)記文檔相對(duì)路徑的幾種形式：文檔相對(duì)路徑的幾種形式：同一個(gè)目錄中的文件：同一個(gè)目錄中的文件：如果源文件和目標(biāo)文件如果源文件和目標(biāo)文件在同一個(gè)目錄里，直接寫(xiě)目標(biāo)文件名即可。在同一個(gè)目錄里，直接寫(xiě)目標(biāo)文件名即可。表示上級(jí)目錄：表示上級(jí)目錄： 表示源文件所在表示源文件所在目錄目錄的上一的上一級(jí)目錄，級(jí)目錄，表示源文件所在目錄的上上級(jí)目表示源文件所在目錄的上上級(jí)目錄，以此類(lèi)推。錄，以此類(lèi)推。表示下級(jí)目錄：表示下級(jí)目錄：直接寫(xiě)下級(jí)目錄文件的路徑即直接寫(xiě)下級(jí)目錄文件的路徑即可?？?。2.2.4 圖像標(biāo)記圖像標(biāo)記 例例2-6：假設(shè)有如：假設(shè)有如圖圖2.5所示的目錄結(jié)構(gòu)，所示的目錄結(jié)構(gòu)

22、，其中其中root、web、a、b、c為文件夾，為文件夾，t.htm、1.gif、2.gif等為相應(yīng)文等為相應(yīng)文件夾中的文件，怎樣在件夾中的文件，怎樣在t.htm頁(yè)中分別插入頁(yè)中分別插入1至至5這五個(gè)圖片？這五個(gè)圖片？圖圖2.5 目錄結(jié)構(gòu)目錄結(jié)構(gòu)2.2.4 圖像標(biāo)記圖像標(biāo)記 使用使用文檔相對(duì)路徑文檔相對(duì)路徑在在t.htm中分別插入中分別插入5幅圖片：幅圖片：圖圖2.5 目錄結(jié)構(gòu)目錄結(jié)構(gòu)u在站點(diǎn)內(nèi)，通常都采用文檔相在站點(diǎn)內(nèi)，通常都采用文檔相對(duì)路徑，對(duì)路徑，2.2.5 鏈接標(biāo)記鏈接標(biāo)記n定義鏈接的語(yǔ)法定義鏈接的語(yǔ)法文本或圖片文本或圖片n常用常用 href：鏈接的目標(biāo)，指定一個(gè)鏈接的目標(biāo)，指定一個(gè)U

23、RL作為有效作為有效的鏈接資源的地址。的鏈接資源的地址。 name：錨點(diǎn)的名字。錨點(diǎn)的名字。 target：目標(biāo)窗口，保留目標(biāo)名有目標(biāo)窗口，保留目標(biāo)名有_blank、_parent、_top、_self。例例2-72.2.5 鏈接標(biāo)記鏈接標(biāo)記n如果指定的目標(biāo)文件存放在外部網(wǎng)站（本服務(wù)如果指定的目標(biāo)文件存放在外部網(wǎng)站（本服務(wù)器以外），只能使用器以外），只能使用絕對(duì)路徑絕對(duì)路徑，這種與本服務(wù)，這種與本服務(wù)器以外的文件的鏈接稱(chēng)為器以外的文件的鏈接稱(chēng)為。n如果目標(biāo)文件存放在本地服務(wù)器，稱(chēng)為如果目標(biāo)文件存放在本地服務(wù)器，稱(chēng)為，局部鏈接可以使用絕對(duì)路徑，但建議，局部鏈接可以使用絕對(duì)路徑，但建議最好最好使用

24、相對(duì)路徑使用相對(duì)路徑。2.2.5 鏈接標(biāo)記鏈接標(biāo)記 同一個(gè)目錄中文件的鏈接同一個(gè)目錄中文件的鏈接例：源文件例：源文件info.html，在在info.html里點(diǎn)擊里點(diǎn)擊“主頁(yè)主頁(yè)”鏈接到目標(biāo)文件鏈接到目標(biāo)文件index.html。 假設(shè)假設(shè)info.html路徑是：路徑是：c:Inetpubwwwrootsitesblablainfo.html 假設(shè)假設(shè)index .html路徑是：路徑是：c:Inetpubwwwrootsitesblablaindex.html 在在info.html加入加入index.html超鏈接的代碼：超鏈接的代碼： 主頁(yè)主頁(yè)2.2.5 鏈接標(biāo)記鏈接標(biāo)記 表示上級(jí)目

25、錄表示上級(jí)目錄例：假設(shè)例：假設(shè)info.html路徑是：路徑是： c :Inetpubwwwrootsitesblablainfo.html 假設(shè)假設(shè)index.html路徑是：路徑是：c:Inetpubwwwrootsitesindex.html 在在info.html加入加入index .html超鏈接：超鏈接： 主頁(yè)主頁(yè)2.2.5 鏈接標(biāo)記鏈接標(biāo)記例：假設(shè)例：假設(shè)info.html路徑是：路徑是： c:Inetpubwwwrootsitesblablainfo.html 假設(shè)假設(shè)index.html路徑是：路徑是：c:Inetpubwwwrootindex .html 在在info.ht

26、ml加入加入index .html超鏈接：超鏈接： 主頁(yè)主頁(yè)2.2.5 鏈接標(biāo)記鏈接標(biāo)記例：假設(shè)例：假設(shè)info.html路徑是：路徑是：c:Inetpubwwwrootsitesblablainfo.html 假設(shè)假設(shè)index.html路徑是：路徑是：c:Inetpubwwwrootsiteswowstoryindex.html 在在info .html加入加入index.html超鏈接：超鏈接： 主頁(yè)主頁(yè)2.2.5 鏈接標(biāo)記鏈接標(biāo)記 表示下級(jí)目錄表示下級(jí)目錄例：假設(shè)例：假設(shè)info .html路徑是：路徑是：c :Inetpubwwwrootsitesblablainfo.html 假設(shè)

27、假設(shè)index.html路徑是：路徑是：c:Inetpubwwwrootsitesblablahtmlindex.html 在在info.html加入加入index.html超鏈接：超鏈接： 主頁(yè)主頁(yè)2.2.5 鏈接標(biāo)記鏈接標(biāo)記1. 鏈接網(wǎng)頁(yè)：鏈接網(wǎng)頁(yè)：文本或圖像文本或圖像2. 鏈接命名錨點(diǎn)：鏈接命名錨點(diǎn)： 字符串字符串 value值即值即錨名錨名，是定義的定位位置名，是定義的定位位置名 熱點(diǎn)文本熱點(diǎn)文本 點(diǎn)擊點(diǎn)擊“熱點(diǎn)文本熱點(diǎn)文本”鏈接到錨名所指定的位鏈接到錨名所指定的位置置 例例top 例例2-82.2.5 鏈接標(biāo)記鏈接標(biāo)記3. 鏈接非鏈接非Web數(shù)據(jù)：數(shù)據(jù)：簡(jiǎn)歷簡(jiǎn)歷4. 圖像鏈接：圖像鏈

28、接： 5. 電子郵件鏈接：電子郵件鏈接：聯(lián)系聯(lián)系2.2.6 表格標(biāo)記表格標(biāo)記n表格現(xiàn)已成為對(duì)文本和圖形進(jìn)行表格現(xiàn)已成為對(duì)文本和圖形進(jìn)行布局布局的強(qiáng)有力的的強(qiáng)有力的工具。工具。nHTML中一個(gè)表格通常由中一個(gè)表格通常由三個(gè)標(biāo)記來(lái)定義，分別表示表格、行、單元格。三個(gè)標(biāo)記來(lái)定義，分別表示表格、行、單元格。n在對(duì)表格進(jìn)行設(shè)置時(shí)，可以設(shè)置整個(gè)表格在對(duì)表格進(jìn)行設(shè)置時(shí)，可以設(shè)置整個(gè)表格或表格中的行或表格中的行或單元格或單元格的屬性，的屬性，它們優(yōu)先順序?yàn)椋簡(jiǎn)卧袼鼈儍?yōu)先順序?yàn)椋簡(jiǎn)卧駜?yōu)先于行優(yōu)先于行，行，行優(yōu)先于表格優(yōu)先于表格。2.2.6 表格標(biāo)記表格標(biāo)記1. 基本基本 表項(xiàng)表項(xiàng)1 表項(xiàng)表項(xiàng)2 表項(xiàng)表項(xiàng)1

29、表項(xiàng)表項(xiàng)2 2.2.6 表格標(biāo)記表格標(biāo)記(1) 標(biāo)記標(biāo)記n整個(gè)表格始于整個(gè)表格始于而終于而終于，是一個(gè)容，是一個(gè)容器標(biāo)記，器標(biāo)記，、等只能在它的范圍內(nèi)使用。等只能在它的范圍內(nèi)使用。n常用的常用的有：有： width=“n|n%”：表格寬度。表格寬度。 height =“n” ：表格高度。表格高度。 border=“n”：表格邊框粗細(xì)。表格邊框粗細(xì)。 bordercolor：表格邊框顏色。表格邊框顏色。2.2.6 表格標(biāo)記表格標(biāo)記 bgcolor：表格背景顏色。表格背景顏色。 background：表格背景圖像。表格背景圖像。 cellpadding：邊距，表單元線(xiàn)和單元格內(nèi)數(shù)據(jù)邊距，表單元線(xiàn)和

30、單元格內(nèi)數(shù)據(jù)之間的距離。之間的距離。 cellspacing：間距，表單元線(xiàn)與邊框間的空白。間距，表單元線(xiàn)與邊框間的空白。 align=“l(fā)eft/right/center”：表格水平對(duì)齊方式。表格水平對(duì)齊方式。 rules：設(shè)定有無(wú)表格線(xiàn)。設(shè)定有無(wú)表格線(xiàn)。 frame：設(shè)定有無(wú)邊框。設(shè)定有無(wú)邊框。2.2.6 表格標(biāo)記表格標(biāo)記(2) 標(biāo)記標(biāo)記n定義表格定義表格，是單元格，是單元格(或或)的容器。的容器。n常用常用有：有： align=“l(fā)eft/right/center”：這一行單元格中這一行單元格中內(nèi)容的水平對(duì)齊方式。內(nèi)容的水平對(duì)齊方式。 valign=“top/middle/bottom”

31、：用來(lái)設(shè)定這用來(lái)設(shè)定這一行單元格中內(nèi)容的垂直對(duì)齊方式。一行單元格中內(nèi)容的垂直對(duì)齊方式。 bgcolor：這一行的背景顏色。這一行的背景顏色。 2.2.6 表格標(biāo)記表格標(biāo)記(3) 標(biāo)記標(biāo)記標(biāo)記，使用時(shí)要放在標(biāo)記，使用時(shí)要放在與與之間。之間。n常用常用有：有： background：背景圖像。背景圖像。 bgcolor：背景顏色。背景顏色。 align：水平對(duì)齊方式。水平對(duì)齊方式。 valign：垂直對(duì)齊方式。垂直對(duì)齊方式。 width：寬度。寬度。 height：高度。高度。 colspan：跨列數(shù)目?？缌袛?shù)目。 rowspan：跨行數(shù)目?？缧袛?shù)目。2.2.6 表格標(biāo)記表格標(biāo)記2. 表題表題n使

32、用標(biāo)記使用標(biāo)記給表格添加表題，并使用給表格添加表題，并使用align屬性定義表題的位置。屬性定義表題的位置。 表題表題2.2.6 表格標(biāo)記表格標(biāo)記3. 表頭表頭使用標(biāo)記使用標(biāo)記可在表的第可在表的第1行或第行或第1列加表頭，列加表頭， 表項(xiàng)表項(xiàng)1 表項(xiàng)表項(xiàng)2 表項(xiàng)表項(xiàng)1 表項(xiàng)表項(xiàng)2 例例2-9 表項(xiàng)表項(xiàng)1 表項(xiàng)表項(xiàng)2 表項(xiàng)表項(xiàng)1 表項(xiàng)表項(xiàng)2 2.2.6 表格標(biāo)記表格標(biāo)記4.單元格的合并單元格的合并(1)合并行合并行 表項(xiàng)表項(xiàng) 或或 表項(xiàng)表項(xiàng) x為為垂直垂直方向上合并的行數(shù)方向上合并的行數(shù)(2)合并列合并列 表項(xiàng)表項(xiàng) 或或 表項(xiàng)表項(xiàng) x為為水平水平方向上合并的單元格數(shù)方向上合并的單元格數(shù)2.2.6

33、 表格標(biāo)記表格標(biāo)記圖圖2.7 表格標(biāo)記表格標(biāo)記例例2-10 2.2.6 表格標(biāo)記表格標(biāo)記圖圖2.6 表格標(biāo)記表格標(biāo)記例例2-112.2.7 表單標(biāo)記表單標(biāo)記 表單是用戶(hù)與網(wǎng)站進(jìn)行表單是用戶(hù)與網(wǎng)站進(jìn)行交互交互的主要方式，它的主要方式，它的的作用是從訪(fǎng)問(wèn)作用是從訪(fǎng)問(wèn)Web站點(diǎn)的用戶(hù)那里獲取信息。站點(diǎn)的用戶(hù)那里獲取信息。訪(fǎng)問(wèn)者可以使用諸如文本框、列表框、復(fù)選框以訪(fǎng)問(wèn)者可以使用諸如文本框、列表框、復(fù)選框以及單選按鈕之類(lèi)的表單對(duì)象輸入信息，然后單擊及單選按鈕之類(lèi)的表單對(duì)象輸入信息，然后單擊某個(gè)按鈕提交這些信息。某個(gè)按鈕提交這些信息。2.2.7 表單標(biāo)記表單標(biāo)記1. 標(biāo)記標(biāo)記 表單對(duì)象：表單對(duì)象： 文本框

34、文本框 選擇按鈕選擇按鈕 列表框列表框 按鈕按鈕 2.2.7 表單標(biāo)記表單標(biāo)記n標(biāo)記常用標(biāo)記常用 action：表單數(shù)據(jù)的處理手段。表單數(shù)據(jù)的處理手段。 method：表單數(shù)據(jù)傳輸方法，取值為表單數(shù)據(jù)傳輸方法，取值為get或或post。get：表單數(shù)據(jù)附加到：表單數(shù)據(jù)附加到URL中。中。post：表單數(shù)據(jù)嵌入：表單數(shù)據(jù)嵌入HTTP 請(qǐng)求中。請(qǐng)求中。2.2.7 表單標(biāo)記表單標(biāo)記2.表單對(duì)象表單對(duì)象(1) 文本框文本框用于單行文本的輸入。用于單行文本的輸入。常用常用name、value、size、maxlength等。等。(2) 密碼框密碼框常用常用name、value、size、maxlengt

35、h等。等。2.2.7 表單標(biāo)記表單標(biāo)記(3) 單選按鈕單選按鈕常用常用name、value、checked等。等。同一組中所有單選按鈕的同一組中所有單選按鈕的name屬性必須設(shè)屬性必須設(shè) 置相同。置相同。(4) 復(fù)選框復(fù)選框常用常用name、value、checked等。等。n value屬性用來(lái)設(shè)置當(dāng)用戶(hù)選中該項(xiàng)后，表單所提屬性用來(lái)設(shè)置當(dāng)用戶(hù)選中該項(xiàng)后，表單所提交的值交的值。2.2.7 表單標(biāo)記表單標(biāo)記(5) 按鈕按鈕 常用屬性：常用屬性：name、value等。等。 常用屬性：常用屬性：name、value等。等。 常用屬性：常用屬性：name、value等。等。 常用屬性：常用屬性：na

36、me、src、width、height、alt等。等。2.2.7 表單標(biāo)記表單標(biāo)記(6) 列表框列表框 選項(xiàng)選項(xiàng)1選項(xiàng)選項(xiàng)2 2.2.7 表單標(biāo)記表單標(biāo)記n的屬性：的屬性：name，等；等； size沒(méi)設(shè)置或設(shè)為沒(méi)設(shè)置或設(shè)為1，為，為下拉列表框下拉列表框；size設(shè)設(shè)置大于置大于1，為，為列表框列表框。 multiple不用賦值，若加入標(biāo)記中，則列表不用賦值，若加入標(biāo)記中，則列表框可選多項(xiàng)。框可選多項(xiàng)。n的屬性：的屬性：value，selected等。等。2.2.7 表單標(biāo)記表單標(biāo)記(7) 文本區(qū)域：文本區(qū)域： 可輸入多行文本?？奢斎攵嘈形谋?。文本文本n常用常用name、rows、cols、wrap