第1章HTML基礎(chǔ)

1、第1章 HTML基礎(chǔ)1.1什么是什么是HTML1.2 創(chuàng)建創(chuàng)建 Web 頁頁 1.3 發(fā)布發(fā)布 Web 頁頁 1.1什么是什么是HTML1.1.1Web 頁的基本概念頁的基本概念 Internet 與與 WWW WWW 與瀏覽器與瀏覽器 當(dāng)我們?cè)诰W(wǎng)上沖浪時(shí)，基本工作過程如圖當(dāng)我們?cè)诰W(wǎng)上沖浪時(shí)，基本工作過程如圖 1-1 所所示。示。圖 1-1 上網(wǎng)沖浪的基本工作原理 網(wǎng)站與主頁網(wǎng)站與主頁1.1.2HTML 的工作原理的工作原理 如果在瀏覽器中任意打開一個(gè)網(wǎng)頁，然后在窗如果在瀏覽器中任意打開一個(gè)網(wǎng)頁，然后在窗口中空白位置單擊鼠標(biāo)右鍵，選擇口中空白位置單擊鼠

2、標(biāo)右鍵，選擇“查看源文件查看源文件”命令（或者選擇命令（或者選擇“查看查看”菜單中的菜單中的“源文件源文件”命令命令），則系統(tǒng)會(huì)啟動(dòng)），則系統(tǒng)會(huì)啟動(dòng)“記事本記事本”，其中包含一些文本，其中包含一些文本信息，如圖信息，如圖 1-2 所示。所示。圖 1-2 網(wǎng)頁的源文件 這些文本其實(shí)就是網(wǎng)頁的本質(zhì)這些文本其實(shí)就是網(wǎng)頁的本質(zhì) HTML 源代源代碼。碼。HTML（HyperText Markup Language，超文，超文本標(biāo)記語言）是表示網(wǎng)頁的一種規(guī)范（或者說是一本標(biāo)記語言）是表示網(wǎng)頁的一種規(guī)范（或者說是一種標(biāo)準(zhǔn)），它通過標(biāo)記符定義了網(wǎng)頁內(nèi)容的顯示。種標(biāo)準(zhǔn)），它通過標(biāo)記符定義了網(wǎng)頁內(nèi)容的顯示。例如

3、，用例如，用 標(biāo)記符可以在網(wǎng)頁上定義一個(gè)表標(biāo)記符可以在網(wǎng)頁上定義一個(gè)表格。格。 說明：說明：超文本是相對(duì)普通文本而言的，與普通文超文本是相對(duì)普通文本而言的，與普通文本按順序定位不同，超文本最典型的特點(diǎn)就是文本本按順序定位不同，超文本最典型的特點(diǎn)就是文本中包含指向其他位置的鏈接，通過這些鏈接使文檔中包含指向其他位置的鏈接，通過這些鏈接使文檔組織成了網(wǎng)狀結(jié)構(gòu)，如圖組織成了網(wǎng)狀結(jié)構(gòu)，如圖 1-3 所示（這實(shí)際上也是所示（這實(shí)際上也是 WWW 信息組織的基本原理）。例如，我們可以把信息組織的基本原理）。例如，我們可以把常規(guī)意義上的書本理解為普通文本，而把由超鏈接常規(guī)意義上的書本理解為普通文本，而把由超

4、鏈接組織起來的電子文檔理解為超文本。組織起來的電子文檔理解為超文本。圖 1-3 超文本示意圖 在在 HTML 文檔中，通過使用標(biāo)記符可以告訴瀏文檔中，通過使用標(biāo)記符可以告訴瀏覽器如何顯示網(wǎng)頁，即確定內(nèi)容的顯示格式。瀏覽覽器如何顯示網(wǎng)頁，即確定內(nèi)容的顯示格式。瀏覽器按順序讀取器按順序讀取 HTML 文件，然后根據(jù)內(nèi)容周圍的文件，然后根據(jù)內(nèi)容周圍的 HTML 標(biāo)記符解釋和顯示各種內(nèi)容。例如，如果為標(biāo)記符解釋和顯示各種內(nèi)容。例如，如果為某段內(nèi)容添加某段內(nèi)容添加 標(biāo)記符，則瀏覽器會(huì)以比標(biāo)記符，則瀏覽器會(huì)以比一般文字大的粗體字顯示該段內(nèi)容，如圖一般文字大的粗體字顯示該段內(nèi)容，如圖 1-4 所示。所示。圖

5、 1-4 瀏覽器解釋 HTML 標(biāo)記符示意 HTML 中的超文本功能，也就是超鏈接功中的超文本功能，也就是超鏈接功能，使網(wǎng)頁之間可以鏈接起來。網(wǎng)頁與網(wǎng)頁的鏈能，使網(wǎng)頁之間可以鏈接起來。網(wǎng)頁與網(wǎng)頁的鏈接構(gòu)成了網(wǎng)站，而網(wǎng)站與網(wǎng)站的鏈接就構(gòu)成了多接構(gòu)成了網(wǎng)站，而網(wǎng)站與網(wǎng)站的鏈接就構(gòu)成了多姿多彩的姿多彩的 WWW。 HTML 由國際組織由國際組織 W3C（萬維網(wǎng)聯(lián)盟）制（萬維網(wǎng)聯(lián)盟）制定和維護(hù)，定和維護(hù)，HTML 3.2 是目前支持最好的標(biāo)準(zhǔn)（是目前支持最好的標(biāo)準(zhǔn)（幾乎所有瀏覽器都支持），但幾乎所有瀏覽器都支持），但 HTML 4.0 也已逐也已逐步普及。最新的標(biāo)準(zhǔn)是步普及。最新的標(biāo)準(zhǔn)是 HTML 4

6、.01，它對(duì)，它對(duì) HTML 4.0 作了一些小的修正。對(duì)于基本的標(biāo)記作了一些小的修正。對(duì)于基本的標(biāo)記符，符，3.2 與與 4.0 基本一致，在本書中不作區(qū)分，基本一致，在本書中不作區(qū)分，但本書中的主要內(nèi)容是以但本書中的主要內(nèi)容是以 4.0 為基礎(chǔ)的。為基礎(chǔ)的。 如果需要了解如果需要了解 HTML 的更詳細(xì)的更詳細(xì)情況，請(qǐng)?jiān)L問情況，請(qǐng)?jiān)L問 W3C 的官方網(wǎng)站：的官方網(wǎng)站：（如圖（如圖 1-5 所示），所示），可以從該網(wǎng)站中獲得最新的可以從該網(wǎng)站中獲得最新的 HTML 規(guī)規(guī)范。范。圖 1-5 W3C 的官方網(wǎng)站 1.2 創(chuàng)建創(chuàng)建 W

7、eb 頁頁1.2.1 標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ) 基本的基本的 HTML 語法語法 標(biāo)記符的屬性標(biāo)記符的屬性1.2.2 Web 頁的基本結(jié)構(gòu)頁的基本結(jié)構(gòu) HTML標(biāo)記標(biāo)記 首部標(biāo)記首部標(biāo)記1 基本的基本的HTML語法語法 在在HTML中，所有的標(biāo)記符都用尖括號(hào)（大中，所有的標(biāo)記符都用尖括號(hào)（大于號(hào)和小于號(hào)）括起來。例如于號(hào)和小于號(hào)）括起來。例如表示表示HTML標(biāo)記符。標(biāo)記符。 絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開始絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符，定義了標(biāo)記符所影響的范標(biāo)記符和結(jié)束標(biāo)記符，定義了標(biāo)記符所影響的范圍，例

8、如圍，例如.結(jié)束標(biāo)記符在小于結(jié)束標(biāo)記符在小于號(hào)后面有一條斜線。號(hào)后面有一條斜線。 但是某些標(biāo)記符，只要求單一標(biāo)記符號(hào)，如但是某些標(biāo)記符，只要求單一標(biāo)記符號(hào)，如換行標(biāo)記符換行標(biāo)記符。 HTML標(biāo)記符是不區(qū)分大小寫的。標(biāo)記符是不區(qū)分大小寫的。1.2.1 標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ) 2 標(biāo)記符的屬性標(biāo)記符的屬性 屬性是用來描述對(duì)象特征的特性。屬性是用來描述對(duì)象特征的特性。 在在HTML中，所有的屬性都放置在開始標(biāo)記中，所有的屬性都放置在開始標(biāo)記符的見括號(hào)里，符的見括號(hào)里， 屬性與標(biāo)記符之間用空格分隔；屬性與標(biāo)記符之間用空格分隔；屬性的值放在相應(yīng)屬性之后，用等號(hào)分隔，并且屬性的值放在相應(yīng)屬性之后，用等號(hào)分隔

9、，并且一般用雙引號(hào)包括（雙引號(hào)必須成對(duì)出現(xiàn)）；而一般用雙引號(hào)包括（雙引號(hào)必須成對(duì)出現(xiàn)）；而不同的屬性之間用空格分隔。不同的屬性之間用空格分隔。 例如：例如：本行本行字將以綠色較小字體顯示字將以綠色較小字體顯示 HTML屬性通常也不區(qū)分大小寫。屬性通常也不區(qū)分大小寫。1.2.1 標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ) 1HTML標(biāo)記符標(biāo)記符 和和是網(wǎng)頁的第一個(gè)和最是網(wǎng)頁的第一個(gè)和最后一個(gè)標(biāo)記符，網(wǎng)頁的其他內(nèi)容都位于這兩個(gè)標(biāo)后一個(gè)標(biāo)記符，網(wǎng)頁的其他內(nèi)容都位于這兩個(gè)標(biāo)記符之間。這兩個(gè)標(biāo)記符告訴瀏覽器或其他閱讀記符之間。這兩個(gè)標(biāo)記符告訴瀏覽器或其他閱讀程序，此文件是一個(gè)網(wǎng)頁。程序，此文件是一個(gè)網(wǎng)頁。 HTML標(biāo)記符的開

10、始和結(jié)束標(biāo)記符都可以省標(biāo)記符的開始和結(jié)束標(biāo)記符都可以省略，略，HTML標(biāo)記符通常不包含任何屬性。標(biāo)記符通常不包含任何屬性。 1.2.2 Web 頁的基本結(jié)構(gòu)頁的基本結(jié)構(gòu)HEAD標(biāo)記符標(biāo)記符 首部標(biāo)記首部標(biāo)記和和位于位于 Web 頁頁的開頭，其中不包括的開頭，其中不包括 Web 頁的任何實(shí)際內(nèi)容，而頁的任何實(shí)際內(nèi)容，而是提供一些與是提供一些與 Web 頁有關(guān)的特定信息。頁有關(guān)的特定信息。 首部標(biāo)記中的內(nèi)容也用相應(yīng)的標(biāo)記符括起來首部標(biāo)記中的內(nèi)容也用相應(yīng)的標(biāo)記符括起來。例如，樣式表（。例如，樣式表（CSS）定義位于）定義位于和和 之 間 ； 腳 本 定 義 位 于之 間 ； 腳 本 定 義 位 于之

11、間。之間。首部標(biāo)記符首部標(biāo)記符1TITLE 標(biāo)記符標(biāo)記符 在首部標(biāo)記符中，最基本、最常用的標(biāo)記符在首部標(biāo)記符中，最基本、最常用的標(biāo)記符是標(biāo)題標(biāo)記符是標(biāo)題標(biāo)記符 和和 ，用于定義，用于定義網(wǎng)頁的標(biāo)題。網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收網(wǎng)頁的標(biāo)題。網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收藏清單。當(dāng)網(wǎng)頁在瀏覽器中顯示時(shí)，網(wǎng)頁標(biāo)題將藏清單。當(dāng)網(wǎng)頁在瀏覽器中顯示時(shí)，網(wǎng)頁標(biāo)題將在瀏覽器窗口的標(biāo)題欄中顯示。在瀏覽器窗口的標(biāo)題欄中顯示。 例如，以下例如，以下 HTML 代碼在瀏覽器中的顯示如代碼在瀏覽器中的顯示如圖圖 1-6 所示。所示。首部標(biāo)記符首部標(biāo)記符圖 1-6 TITLE 標(biāo)記符的效果 這里是網(wǎng)頁標(biāo)題這里是網(wǎng)頁標(biāo)題

12、 請(qǐng)看瀏覽器的標(biāo)題欄。請(qǐng)看瀏覽器的標(biāo)題欄。 注意：注意：本書的本書的 HTML 代碼中，使用黑體的內(nèi)容是需代碼中，使用黑體的內(nèi)容是需要引起讀者注意的部分。實(shí)際上，要引起讀者注意的部分。實(shí)際上，HTML 文件相當(dāng)文件相當(dāng)于文本文件，不包含任何字符格式設(shè)置。于文本文件，不包含任何字符格式設(shè)置。2META 標(biāo)記符標(biāo)記符 在首部標(biāo)記符中另外一個(gè)比較常用的標(biāo)記符在首部標(biāo)記符中另外一個(gè)比較常用的標(biāo)記符是是 META，它，它用于說明與用于說明與 Web 頁有關(guān)的信息。頁有關(guān)的信息。例如，可以說明文件創(chuàng)作工具、文件作者等信息。例如，可以說明文件創(chuàng)作工具、文件作者等信息。 META 標(biāo)記符的常用屬性包括：標(biāo)記符

13、的常用屬性包括：name、http-equiv 以及以及 content。其中，。其中，name 屬性給出屬性給出特性名，而特性名，而 content 屬性給出特性值，屬性給出特性值，http-equiv 屬性指定屬性指定 HTTP 響應(yīng)名稱，通常用于替換響應(yīng)名稱，通常用于替換 name 屬性，屬性，HTTP 服務(wù)器使用該屬性值為服務(wù)器使用該屬性值為 HTTP 響應(yīng)響應(yīng)消息頭收集信息。消息頭收集信息。 說明：說明：HTTP 是是 HyperText Transfer Protocol（超文本傳輸協(xié)議）的縮寫，它是超文本傳輸協(xié)議）的縮寫，它是 Internet 上最常用上最常用的協(xié)議之一。的協(xié)議

14、之一。 例如：例如： 設(shè)置客戶端行內(nèi)程設(shè)置客戶端行內(nèi)程序的語言是序的語言是 JavaScript； 設(shè)設(shè)置行內(nèi)樣式的樣式語言為置行內(nèi)樣式的樣式語言為 CSS。 META 標(biāo)記符的一個(gè)常用功能是設(shè)置自動(dòng)轉(zhuǎn)址標(biāo)記符的一個(gè)常用功能是設(shè)置自動(dòng)轉(zhuǎn)址功能，即使瀏覽器自動(dòng)從一個(gè)地址跳轉(zhuǎn)到另一個(gè)地功能，即使瀏覽器自動(dòng)從一個(gè)地址跳轉(zhuǎn)到另一個(gè)地址，如下所示。址，如下所示。 META示例示例 META示例示例 在此實(shí)例中，完成當(dāng)前文檔加載在此實(shí)例中，完成當(dāng)前文檔加載 30 秒后將自秒后將自動(dòng)加載另一個(gè)文檔（即動(dòng)加載另一個(gè)文檔（即“URL =”后指定的后指定的 HTML 文檔），如圖文檔），如圖 1-7 所示。所示。

15、30秒后自動(dòng)跳轉(zhuǎn)圖 1-7 利用 META 實(shí)現(xiàn)自動(dòng)轉(zhuǎn)址功能 說明：說明：要實(shí)現(xiàn)以上效果，必須使要實(shí)現(xiàn)以上效果，必須使“URL =”后指后指定的定的 HTML 文檔存在。在該例子中，我們指定跳轉(zhuǎn)文檔存在。在該例子中，我們指定跳轉(zhuǎn)的目標(biāo)為當(dāng)前目錄的某個(gè)文件。在實(shí)際使用此功能的目標(biāo)為當(dāng)前目錄的某個(gè)文件。在實(shí)際使用此功能時(shí)，也可以直接指定一個(gè)完整的時(shí)，也可以直接指定一個(gè)完整的 URL 地址（例如地址（例如 http:/）。有關(guān)文件路徑及）。有關(guān)文件路徑及 URL 地址指定的詳細(xì)信息，請(qǐng)參見本書第地址指定的詳細(xì)信息，請(qǐng)參見本書第 3 章。章。3BGSOUND 標(biāo)記符標(biāo)記符 用于指定網(wǎng)頁的背景音樂，只有

16、開始標(biāo)記符，用于指定網(wǎng)頁的背景音樂，只有開始標(biāo)記符，沒有結(jié)束標(biāo)記符。屬性沒有結(jié)束標(biāo)記符。屬性src用于指定背景音樂的源文用于指定背景音樂的源文件，屬性件，屬性loop用于指定背景音樂重復(fù)的次數(shù)。用于指定背景音樂重復(fù)的次數(shù)。 BGSOUND標(biāo)記符必須位于標(biāo)記符必須位于HEAD標(biāo)記符內(nèi)。標(biāo)記符內(nèi)。 正文標(biāo)記符正文標(biāo)記符 正文標(biāo)記符正文標(biāo)記符 和和 包含包含 Web 頁頁的具體內(nèi)容，包括文字、圖形、超鏈接以及其他各的具體內(nèi)容，包括文字、圖形、超鏈接以及其他各種種 HTML 對(duì)象。對(duì)象。 如果沒有其他標(biāo)記符修飾，正文標(biāo)記符中的文如果沒有其他標(biāo)記符修飾，正文標(biāo)記符中的文字將以無格式的形式顯

17、示（如果瀏覽器窗口顯示不字將以無格式的形式顯示（如果瀏覽器窗口顯示不下，則自動(dòng)換行）。下，則自動(dòng)換行）。 例如，以下例如，以下 HTML 代碼在瀏覽器中的顯示如圖代碼在瀏覽器中的顯示如圖 1-8 所示。所示。 網(wǎng) 頁 標(biāo) 題網(wǎng) 頁 標(biāo) 題 正文，正文，正文，正正文，正文，正文，正文，文， 正文，正文，正文，正文，正文，正文， 正文，正文正文，正文 圖 1-8 BODY 標(biāo)記符中的正文 注意：注意：空格、回車這些格式控制在顯示時(shí)都不空格、回車這些格式控制在顯示時(shí)都不起作用，如要使它們起作用，應(yīng)使用預(yù)格式化標(biāo)記起作用，如要使它們起作用，應(yīng)使用預(yù)格式化標(biāo)記符符 和和 將需要采用原始格式的內(nèi)容將需要采

18、用原始格式的內(nèi)容包含起來。包含起來。1.2.3 設(shè)置頁面屬性設(shè)置頁面屬性 設(shè)置頁面背景顏色設(shè)置頁面背景顏色 在在 標(biāo)記符中使用標(biāo)記符中使用 bgcolor bgcolor 屬屬性可以為網(wǎng)頁設(shè)置背景顏色。例如，如果想性可以為網(wǎng)頁設(shè)置背景顏色。例如，如果想為網(wǎng)頁設(shè)置黑色背景，應(yīng)使用以下為網(wǎng)頁設(shè)置黑色背景，應(yīng)使用以下HTMLHTML語句：語句： 在指定背景顏色時(shí)，有在指定背景顏色時(shí)，有 16 16 種標(biāo)準(zhǔn)顏色種標(biāo)準(zhǔn)顏色可供選擇，如表可供選擇，如表 1-1 1-1 所示。所示。 表 1-1 16 種標(biāo)準(zhǔn)顏色色彩名色彩名十六進(jìn)制值十六進(jìn)制值色彩名色彩名十六進(jìn)制值十六進(jìn)制值A(chǔ)qua（水藍(lán)色）

19、#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（藍(lán)色）#0000FFPurple（紫色）#800080Fuchsia（櫻桃色）#FF00FFRed（紅色）#FF0000Gray（灰色）#808080Silver（銀色）#C0C0C0Green（綠色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐紅色）#800000Yellow（黃色）#FFFF00注：注：Aqua Aqua 也稱也稱 CyanCyan；Fuchsia Fuchsia 也稱也稱

20、MagentaMagenta。 設(shè)置頁面背景圖像設(shè)置頁面背景圖像 單純使用一種顏色作為背景顯然有些單調(diào)，單純使用一種顏色作為背景顯然有些單調(diào)，網(wǎng)頁設(shè)計(jì)者也可選擇特定圖案作為頁面的背景網(wǎng)頁設(shè)計(jì)者也可選擇特定圖案作為頁面的背景使用使用 BODY 標(biāo)記符的標(biāo)記符的 background 屬性即可。屬性即可。HTML語句為：語句為： 使用背景圖案時(shí)，如果圖案小于瀏覽器窗口的使用背景圖案時(shí)，如果圖案小于瀏覽器窗口的大小，則瀏覽器會(huì)自動(dòng)象鋪地板磚一樣平鋪背景圖大小，則瀏覽器會(huì)自動(dòng)象鋪地板磚一樣平鋪背景圖案。例如，以下代碼顯示了設(shè)置背景圖案的效果，案。例如，以下代碼顯示了設(shè)置背景圖案的效果，

21、如圖如圖 1-9 所示。所示。 背景圖案示例背景圖案示例 背景圖案示例背景圖案示例 背景圖片 設(shè)置為背景時(shí)的效果圖 1-9 背景圖案示例 注意：注意：如果要使以上代碼正確工作，必須在如果要使以上代碼正確工作，必須在網(wǎng)頁所在目錄包含網(wǎng)頁所在目錄包含 background.jpg 文件。文件。 用戶也可以同時(shí)設(shè)置網(wǎng)頁的背景圖案和背景用戶也可以同時(shí)設(shè)置網(wǎng)頁的背景圖案和背景色，在這種情況下，只有在瀏覽器不能顯示圖像色，在這種情況下，只有在瀏覽器不能顯示圖像時(shí)才顯示背景色。例如，如果用戶將瀏覽器設(shè)置時(shí)才顯示背景色。例如，如果用戶將瀏覽器設(shè)置為不顯示圖像（選擇為不顯示圖像（選擇“工具工具”菜單中的菜單中的

22、“Internet 選項(xiàng)選項(xiàng)”命令，然后選擇命令，然后選擇“高級(jí)高級(jí)”選項(xiàng)卡，在選項(xiàng)卡，在“多多媒體媒體”下設(shè)置），那么給網(wǎng)頁設(shè)置的背景圖案將下設(shè)置），那么給網(wǎng)頁設(shè)置的背景圖案將不顯示，而是顯示背景顏色。不顯示，而是顯示背景顏色。 設(shè)置背景圖像水印效果設(shè)置背景圖像水印效果 設(shè)置文字和超鏈接的顏色設(shè)置文字和超鏈接的顏色1.2.4添加注釋添加注釋 不論是編寫程序還是制作網(wǎng)頁，為所做的工作不論是編寫程序還是制作網(wǎng)頁，為所做的工作添加注釋都是一種良好的工作習(xí)慣。實(shí)際上，添加添加注釋都是一種良好的工作習(xí)慣。實(shí)際上，添加注釋是任何程序開發(fā)工作必須遵循的規(guī)范之一。注釋是任何程序開

23、發(fā)工作必須遵循的規(guī)范之一。 由于由于 Web 站點(diǎn)經(jīng)常需要更新，因此創(chuàng)建的站點(diǎn)經(jīng)常需要更新，因此創(chuàng)建的 Web 頁必須易于維護(hù)，而添加注釋是增強(qiáng)文檔可頁必須易于維護(hù)，而添加注釋是增強(qiáng)文檔可讀性的重要手段。讀性的重要手段。 HTML 的注釋由開始標(biāo)記符的注釋由開始標(biāo)記符 構(gòu)成。這兩個(gè)標(biāo)記符之間的任何內(nèi)容都將被構(gòu)成。這兩個(gè)標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。瀏覽器解釋為注釋，而不在瀏覽器中顯示。 例如，以下例如，以下HTML代碼在瀏覽器中的顯示如代碼在瀏覽器中的顯示如圖圖 1-10 所示。所示。 網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題 正文，正文，正文正文，正文，正文 圖 1-10 注釋不在

24、網(wǎng)頁中顯示注意：注意：注釋可插入在注釋可插入在 Web 頁的任何位置。頁的任何位置。1.2.5 顯示特殊字符顯示特殊字符 如果用戶需要在網(wǎng)頁中顯示某些特殊字符，如果用戶需要在網(wǎng)頁中顯示某些特殊字符，例如：例如： 等與等與 HTML 語法沖突的符號(hào)（瀏覽器語法沖突的符號(hào)（瀏覽器會(huì)自動(dòng)將會(huì)自動(dòng)將 號(hào)后的內(nèi)容解釋為號(hào)后的內(nèi)容解釋為 HTML 標(biāo)記符），標(biāo)記符），或者或者 、 等無法直接用鍵盤輸入的符號(hào)，等無法直接用鍵盤輸入的符號(hào)，則需使用參考字符來表示，而不能直接輸入。則需使用參考字符來表示，而不能直接輸入。 參考字符以參考字符以“&”號(hào)開始，以號(hào)開始，以“；”結(jié)束，既可結(jié)束，既可以使用數(shù)字

25、代碼，也可以使用代碼名稱。最常見的以使用數(shù)字代碼，也可以使用代碼名稱。最常見的參考字符為：參考字符為： 表示為表示為 >，& 表表示為示為 &，空格表示為，空格表示為  ，有關(guān)參考字符，有關(guān)參考字符完整的編碼請(qǐng)參見附錄完整的編碼請(qǐng)參見附錄 2。 注意：注意：與與HTML標(biāo)記符不同，字符代碼名稱區(qū)標(biāo)記符不同，字符代碼名稱區(qū)分大小寫。分大小寫。 例如，要在例如，要在 Web 頁中顯示內(nèi)容頁中顯示內(nèi)容“ is a popular VCD program.”，則需使用參考，則需使用參考字符。字符。 HTML 代碼如下，在瀏覽器中的顯示如圖代碼如下

26、，在瀏覽器中的顯示如圖 1-11 所示。所示。 參考字符示例參考字符示例 <Tom & Jerry> is a popular VCD program. 圖 1-11 參考字符示例說明：說明：對(duì)于對(duì)于 & 這樣可以直接用鍵盤輸入的這樣可以直接用鍵盤輸入的特殊字符，如果不用參考字符，瀏覽器通常特殊字符，如果不用參考字符，瀏覽器通常也能夠正確顯示。例如，剛才的示例中，也能夠正確顯示。例如，剛才的示例中，BODY 部分的代碼也可以寫為：部分的代碼也可以寫為： <Tom & Jerry > is a popular

27、 VCD program. 不過，如果要顯示不過，如果要顯示 ，則一定要使，則一定要使用參考字符，否則會(huì)出現(xiàn)顯示錯(cuò)誤。用參考字符，否則會(huì)出現(xiàn)顯示錯(cuò)誤。1.2.6 1.2.6 創(chuàng)建和測(cè)試創(chuàng)建和測(cè)試 Web 頁頁 創(chuàng)建創(chuàng)建 Web 頁頁使用使用“記事本記事本”創(chuàng)建創(chuàng)建 Web 頁的步驟如下：頁的步驟如下： （1）單擊）單擊“開始開始”按鈕，選擇按鈕，選擇“程序程序/附附件件/記事本記事本”。 （2）在）在“記事本記事本”的窗口中輸入的窗口中輸入 HTML 代碼。代碼。 （3）輸入代碼結(jié)束后，選擇）輸入代碼結(jié)束后，選擇“文件文件”菜菜單中的單中的“保存保存”或或“另存為另存為”命令，

28、則彈出命令，則彈出如圖如圖 1-12 所示的所示的“另存為另存為”對(duì)話框。對(duì)話框。圖 1-12 “另存為”對(duì)話框 （4）在）在“文件名文件名”框中鍵入框中鍵入 Web 頁的名稱，注意頁的名稱，注意文件名必須以文件名必須以 .htm 或或 .html 為擴(kuò)展名。如果需要，應(yīng)為擴(kuò)展名。如果需要，應(yīng)在在“保存在保存在”列表框中定位到特定的目錄。列表框中定位到特定的目錄。 （5）單擊）單擊“保存保存”按鈕，即創(chuàng)建出了一個(gè)按鈕，即創(chuàng)建出了一個(gè) Web 頁頁。 測(cè)試測(cè)試Web頁頁 1.3 發(fā)布發(fā)布 Web 頁頁1.3.1 創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn) 1.3.2申請(qǐng)網(wǎng)頁空間申請(qǐng)網(wǎng)頁空間 1.3

29、.3用用 FTP 上傳網(wǎng)頁上傳網(wǎng)頁 申請(qǐng)了免費(fèi)網(wǎng)頁空間之后，需要用申請(qǐng)了免費(fèi)網(wǎng)頁空間之后，需要用 FTP 的的方式將網(wǎng)頁上傳到服務(wù)器上，才能讓別人通過方式將網(wǎng)頁上傳到服務(wù)器上，才能讓別人通過 Internet 瀏覽自己的網(wǎng)站。上傳時(shí)通常可以使瀏覽自己的網(wǎng)站。上傳時(shí)通常可以使用 一 些用 一 些 F T P 軟 件 ， 下 面 以 最 常 用 的軟 件 ， 下 面 以 最 常 用 的 CuteFTP4.0 為例簡(jiǎn)要說明上傳網(wǎng)頁的過程。為例簡(jiǎn)要說明上傳網(wǎng)頁的過程。 注意：注意：對(duì)于不同版本的對(duì)于不同版本的 CuteFTP，操作過，操作過程略有不同，但基本選項(xiàng)是相同的。程略有不同，但基本選項(xiàng)是相同的

30、。 首先應(yīng)在計(jì)算機(jī)上安裝首先應(yīng)在計(jì)算機(jī)上安裝 CuteFTP（如果沒（如果沒有該軟件，可以去一些下載軟件的站點(diǎn)進(jìn)行下載，有該軟件，可以去一些下載軟件的站點(diǎn)進(jìn)行下載，或者直接到或者直接到 去下載），然后通去下載），然后通過以下步驟上傳網(wǎng)頁：過以下步驟上傳網(wǎng)頁： （1）啟動(dòng)）啟動(dòng) CuteFTP，此時(shí)系統(tǒng)自動(dòng)打開，此時(shí)系統(tǒng)自動(dòng)打開“FTP Site Manager”（FTP 站點(diǎn)管理器）對(duì)話站點(diǎn)管理器）對(duì)話框?？?。 （2）在該對(duì)話框中，單擊）在該對(duì)話框中，單擊“New”按鈕，如按鈕，如圖圖 1-13 所示。所示。站點(diǎn)標(biāo)簽站點(diǎn)地址用戶名口令新建站點(diǎn)連接站點(diǎn)圖 1-13 新建 FTP 站點(diǎn) （3）在）

31、在“Site Settings for New Site”（站點(diǎn)設(shè)置）（站點(diǎn)設(shè)置）對(duì)話框中填寫以下信息：對(duì)話框中填寫以下信息：l l Label for site 此選項(xiàng)用于標(biāo)識(shí)所建立的此選項(xiàng)用于標(biāo)識(shí)所建立的 FTP 站點(diǎn)，可以用任何自己想要的名稱，例如站點(diǎn)，可以用任何自己想要的名稱，例如 MyHomesite。l l FTP Host Address 此選項(xiàng)為此選項(xiàng)為 Web 服務(wù)器的服務(wù)器的 FTP 地址，通常在申請(qǐng)網(wǎng)頁空間時(shí)可以獲得。例地址，通常在申請(qǐng)網(wǎng)頁空間時(shí)可以獲得。例如 ， 網(wǎng) 易 免 費(fèi) 個(gè) 人 主 頁 的如 ， 網(wǎng) 易 免 費(fèi) 個(gè) 人 主 頁 的 F T P 地 址 是地 址

32、是 。l l FTP site User Name 此選項(xiàng)為此選項(xiàng)為 Web 服務(wù)器分配給用戶的用戶名稱，也是在申請(qǐng)服務(wù)器分配給用戶的用戶名稱，也是在申請(qǐng)網(wǎng)頁空間時(shí)獲得的。網(wǎng)頁空間時(shí)獲得的。l l FTP site Password 此選項(xiàng)為對(duì)應(yīng)于此選項(xiàng)為對(duì)應(yīng)于用戶名的用戶口令（密碼），也是在申請(qǐng)網(wǎng)用戶名的用戶口令（密碼），也是在申請(qǐng)網(wǎng)頁空間時(shí)獲得的。頁空間時(shí)獲得的。（4）正確地填寫了這些選項(xiàng)后，單擊）正確地填寫了這些選項(xiàng)后，單擊“Connect”按鈕連接站點(diǎn)（當(dāng)然事先必須已按鈕連接站點(diǎn)（當(dāng)然事先必須已經(jīng)連接到經(jīng)連接到 Internet 上），如果連接正常，那上），如果連接正常，那么將出現(xiàn)如圖么將出現(xiàn)如圖 1-14 所示對(duì)話框。所示對(duì)話框。圖 1-14 連接 FTP 站點(diǎn)成功時(shí)的提示對(duì)話框（5）單擊）單擊“OK”按鈕，則按鈕，則 CuteFTP 的主窗口中顯的主窗口中顯示出兩欄，左邊一欄是本機(jī)中的文件列表，右邊一示出