參考講稿html基礎(chǔ)

1、第章HTML 基礎(chǔ)HTML 語言概述HTMLHTML 格式HTML 文本HTML 超HTML 圖像HTML 表格HTML 框架HTML 表單要使設(shè)計者在網(wǎng)絡(luò)上發(fā)布的網(wǎng)頁能夠被世界各地的瀏覽者所閱讀，就需要一種規(guī)范化的發(fā)布語言。在網(wǎng)（WWW）上，文檔的發(fā)布語言是 HTML。HTML 語言是英文 HyperText Markup Language 的縮寫，中文名為超文本標(biāo)記語言。所謂超文本標(biāo)記語言，就是該文檔有別于純文本的單個文件的瀏覽形式。超文本文檔中提供的超能夠讓瀏覽者在不同的頁面之間跳轉(zhuǎn)。標(biāo)記語言是一種基于源代碼解釋的方式，它的源文件由一個純文本文件組成，代碼由許多元素組成，而前臺瀏覽器通過

2、解釋這些元素來顯示出各種樣式的文檔。換句話說，瀏覽器就是把純文本的源文件以賦有樣式定義的超文本文件方式顯示出來。182.1HTML 語言概述HTML 和網(wǎng)絡(luò)是緊密連接的，它應(yīng)網(wǎng)絡(luò)傳輸?shù)男枨蠖_發(fā)，配合文檔顯示而發(fā)展。HTML 是 1989年由 Timonthy Berners-Lee 所制定出來的，隨后，由 NCSA 推出的 Mosaic 瀏覽器將 HTML 語言推廣并得到越來越多用戶的歡迎。但是由于多種瀏覽器同時流行于世界各地，它們支持 HTML 語言的標(biāo)準(zhǔn)也不相同，這樣限制了 HTML 標(biāo)記語言本身的發(fā)展。逐漸，W3C（World Wide Web Consortium）網(wǎng)絡(luò)標(biāo)準(zhǔn)化組織聯(lián)手

3、一些較為流行的瀏覽器開發(fā)商一同定義了 HTML 標(biāo)準(zhǔn)，并且力推瀏覽器解釋語言和顯示方法的，這也在另一方面為 HTML 標(biāo)準(zhǔn)的起到了推動作用。2.1.1HTML 概述HTML 語言是一種標(biāo)記語言，它不需要編譯，可以直接由瀏覽器執(zhí)行。在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計中 HTML負(fù)責(zé)填充網(wǎng)頁的內(nèi)容，HTML 編寫的超文本文檔（文件）稱為 HTML 文檔（網(wǎng)頁），它包含了一些HTML 元素，使用.html 或.htm 為文件名后綴，能獨立于系統(tǒng)，如 UNIX、Windows 等。HTML 文檔是普通的文本文檔（ASCII），任何文字編輯器都可以編輯，只要能將文件另存成 ASCII純文字格式即可?？梢允褂闷胀ǖ奈谋揪庉嬈?/p>

4、，如 Windows 中的記事本、寫字板，也可以采用的HTML 編輯工具，如 Eclipse、Dreamweaver、Homesite 等。的 HTML 編輯工具在編寫過程中能夠和屬性，并能夠自動檢查 HTML 文檔中的語法錯誤并協(xié)助改正。提示HTML 文本包含頁面本身的文本和表示頁面元素、結(jié)構(gòu)、格式及其他超文本的 HTML兩種信息。HTML規(guī)定了 HTML 文本的邏輯結(jié)構(gòu)，并且控制其顯示格式，也就是說，設(shè)計者可以用定義 HTML 文本的邏輯結(jié)構(gòu)，但是文本的實際顯示內(nèi)容則由瀏覽器來負(fù)責(zé)解釋。可以使用HTML來設(shè)置、標(biāo)題、段落、列表和字符等區(qū)域。大部分的 HTML是以“相應(yīng)內(nèi)容”形式出現(xiàn)的，的名

5、字用尖括號括起來。HTML一般有起始和結(jié)束兩種，分別放在它起作用的文本兩邊。起始與結(jié)束很相似，只是結(jié)束在“”處結(jié)束。屬性的作用是向客戶端提供關(guān)于頁面元素內(nèi)容以及如何處理的附加信息，用戶可以在這個區(qū)域?qū)ξ谋局械囊恍┚唧w屬性，如大小、顏色、字體等信息進(jìn)行設(shè)置。2.1.2HTML 文檔結(jié)構(gòu)標(biāo)準(zhǔn)的 HTML 文檔由和要顯示在網(wǎng)頁上的內(nèi)容組成。HTML 用于描述功能的符號稱為“”，如、等。HTML規(guī)定了 HTML 文檔的邏輯結(jié)構(gòu)，并且控制文檔的顯示格式，然后由瀏覽器來負(fù)責(zé)解釋并顯示頁面。通過使用可以區(qū)分文本文件的各個組成部分，還可以對網(wǎng)頁上的文字、表格、等多數(shù)據(jù)所出現(xiàn)的位置、形式、順序及網(wǎng)頁間的超級關(guān)系

6、進(jìn)行設(shè)定。19下面先以例子來了解 HTML 語言的基本結(jié)構(gòu)，具體代碼如下：/HTML 文檔開始/HTML 文檔的頭部分/文檔標(biāo)題/HTML 文檔的主體：生日：1978 年 10 月 4 日電子郵箱：/HTML 文檔結(jié)束該 HTML 文件經(jīng)過瀏覽器解釋后，顯示的網(wǎng)頁內(nèi)容如圖 2-1 所示。從上面的例子可以看出，HTML 文檔由許多成對出現(xiàn)的控制標(biāo)記組成，也可以稱為標(biāo)簽，如與、與等。在后面的章節(jié)中將介紹在 HTML 文檔中組成圖 2-1 運行結(jié)果圖文檔架構(gòu)的幾個主要的 HTML。2.2HTML都封裝在一對尖括號“”之中。只改變網(wǎng)頁的顯示方式，本身不會顯示在窗口中。HTML 文檔中最先出現(xiàn)的是。是文

7、檔標(biāo)識符，它是成對出現(xiàn)的，首和尾分別位于文檔的最前面和最后面，明確地表示文檔是由超文本標(biāo)記語言（HTML）編寫的。該不帶任何屬性。事實上，現(xiàn)在常用的 Web 瀏覽器（Netsc和 IE）都可以自動識別 HTML 文檔，并不要求有，也不對該做任何操作。但是，為了提高文檔的適用性，使編寫的 HTML 文檔都能適應(yīng)日新月異的 Web 瀏覽器的變化，還是應(yīng)該養(yǎng)成使用這個在.之間主要包括以下幾個部分。的。2.2.1頭部Head 是英文“頭”的意思。上用戶把 HTML 文檔分為文檔頭和文檔主體兩部分。文檔主體部分就是在 Web 瀏器窗口的用戶區(qū)內(nèi)看到的內(nèi)容，而文檔頭部分用來規(guī)定該文檔的標(biāo)題（出現(xiàn)在 Web

8、瀏覽器窗口的標(biāo)題欄中）和文檔的一些屬性。中間可以使用、JavaScript 代碼。對的作用就是控制文檔的頭部信息。此對，在此對中間可以放置用戶編寫的HTML 文檔的是可以嵌套的，即在一對中可以嵌入另一對子，用來規(guī)定母所含20范圍的屬性或其中某一部分的內(nèi)容，嵌套在對中使用的主要有和。2.2.2標(biāo)題是成對出現(xiàn)的，用以規(guī)定 HTML 文檔的標(biāo)題。在和之間的內(nèi)容將顯示在Web 瀏覽器窗口的標(biāo)題欄中。另外，對只能放在對之間，而且其不能包含其他。從圖 2-1 中可以看到，代碼段“個字出現(xiàn)在 IE 瀏覽器的左上方。”控制顯示了網(wǎng)頁的標(biāo)題，“”42.2.3索引是一個單獨，不需要成對出現(xiàn)，它用來規(guī)定文檔的屬性，

9、說明該文檔是可以按關(guān)鍵字索引的。下面通過一個簡單的例子來說明該的作用，具體代碼如下：這是一個“ISINDEX”的范例程序。HTML 和網(wǎng)絡(luò)是緊密連接的，它應(yīng)網(wǎng)絡(luò)傳輸?shù)男枨蠖_發(fā)，配合文檔顯示而發(fā)展。HTML 是在由Timonthy Berners-Lee 所制定出來的，隨后，由 NCSA 推出 Mosaic 瀏覽器，將 HTML 語言推廣并得到越來越多用戶的歡迎。但是由于多種瀏覽器同時流行于世界各地，它們支持 HTML 語言的標(biāo)準(zhǔn)也不相同，這樣限制了 HTML標(biāo)記語言本身的發(fā)展。逐漸，W3C（World Wide Web Consortium）網(wǎng)絡(luò)標(biāo)準(zhǔn)化組織聯(lián)手一些較為流行的瀏覽器開發(fā)商一同定

10、義 HTML 標(biāo)準(zhǔn)，并且力推瀏覽器解釋語言和顯示方法的起到了關(guān)鍵作用。，這也在另一方面為HTML 標(biāo)準(zhǔn)的運行該代碼，在 IE 6.0 中顯示結(jié)果如圖 2-2 所示。圖 2-2 使用的運行結(jié)果212.2.4主體是成對出現(xiàn)的。在對之間的內(nèi)容，將顯示在 Web 瀏覽器窗口的用戶區(qū)內(nèi)，它是 HTML 文檔的主體部分?？梢园?HTML 文檔的主體區(qū)域簡單地理解成標(biāo)題以外的所有部分，該部分可以包含、等。結(jié)束用來指明主體區(qū)域的結(jié)尾。在中可以規(guī)定整個文檔的一些基本屬性。bgcolor：指定 HTML 文檔的背景色。 text：指定 HTML 文檔中文字的顏色。 link：指定 HTML 文檔中待連接超 ali

11、nk：指定 HTML 文檔中連接中超vlink：指定 HTML 文檔中已連接超對象的顏色。對象的顏色。對象的顏色。background：指定 HTML 文檔的背景文件。在指定對象的顏色時，可以使用該顏色的代碼，或直接使用該顏色對應(yīng)的英文單詞，例如，指定HTML 文檔的背景色為綠色，可以表示為“ ”， 也可以表示為“ ”。為了便于，建議讀者直接用相應(yīng)的英文單詞指定顏色?？梢酝ㄟ^下面的實例來看對中各種屬性的使用情況。為網(wǎng)頁設(shè)計一個背景顏色，并且在網(wǎng)頁上輸入一段文字，具體代碼如下：HTML 基本源文件HTML 文檔中 BODY的使用BODY之間顯示的即為瀏覽器上看到的內(nèi)容，頁面上顯示的任何東西都包含

12、在這兩個之中。可以把 HTML 文檔的主體區(qū)域簡單地理解成標(biāo)題以外的所有部分運行該段代碼的結(jié)果如圖 2-3 所示。圖 2-3 使用的運行結(jié)果222.2.5特殊字符在 HTML 中有很多特殊的符號是需要特別處理的，例如，“”這兩個符號是用來表示標(biāo)簽的開始和結(jié)束的，沒有辦法通過直接按鍵來輸入，必須用輸入編碼表示法來輸入。通常情況下，HTML 會自動截去多余的空格。不管加多少空格，都被看作一個空格。如果要顯示空格中的多個空格，可以使用“&;”表示空格。常用的特殊字符及顯示結(jié)果如表 2-1 所示。表 2-1 常用的特殊字符及顯示結(jié)果2.3HTML 格式HTML 格式的主要作用是在瀏覽器中控制文本對象的

13、顯示，包括段落、換行、水平線等，所有的格式全部都是嵌套在對之間的。下面介紹幾個常用的 HTML 格式。2.3.1段落段落的英文全稱是 Paragraph，幾乎所有的 HTML 文檔都離不開這個，而且這個在使用時必須成對出現(xiàn)。對用于創(chuàng)建一個段落，在此中的文本以段落的方式顯示在瀏覽器上。段落對支持 align 屬性來設(shè)置對齊方式，語法如下：段落內(nèi)容屬性 align 的功能是專門設(shè)定水平對齊，其常見的設(shè)定值有 3 個，也就是置左（align=left）、置中（align=center）、置右（align=right）。用屬性 align 設(shè)置對齊方式在很多落的代碼如下：上都存在。使用段分段左對齊段落

14、段落居中右對齊段落源 代 碼顯 示 結(jié) 果&;代表一個不斷行空白&;&23運行該段代碼的結(jié)果如圖 2-4 所示。圖 2-4 使用分段的運行結(jié)果2.3.2換行換行的作用是在不另起一段的情況下將當(dāng)前文本強(qiáng)制換行。它的起始必須有，而結(jié)束是出現(xiàn)的，也就是說屬于單獨出現(xiàn)的。使用換行的代碼如下：換行這段文字一共包含了兩個強(qiáng)制換行標(biāo)記代碼運行結(jié)果如圖 2-5 所示。圖 2-5 使用換行的運行結(jié)果2.3.3縮進(jìn)對為縮進(jìn)，在瀏覽器中顯示向右縮進(jìn)的文字。在對之間加入的文本在瀏覽器中顯示的效果與在普通的文本中使用 Tab 鍵進(jìn)行縮進(jìn)的效果一樣。代碼如下：沒有使用縮進(jìn)的文本。24使用縮進(jìn)縮排 1使用縮進(jìn)縮排 2代碼運

15、行結(jié)果如圖 2-6 所示。圖 2-6 使用縮進(jìn)的運行結(jié)果如圖 2-6 所示，利用對可以將其包起來的文字全部往右縮進(jìn)，而，依此類推。且加一組卷標(biāo)往右縮排一，加兩組卷標(biāo)往右縮排兩2.3.4預(yù)格式化在 HTML 文檔中，有時設(shè)計者需要按照自己的格式編寫源文件，并且希望在瀏覽器中顯示的格式和編輯時的格式相同。對就可以完整保留設(shè)計者在源文件中所定義的格式，包括各種空格、縮進(jìn)以及其他特殊格式，全都原封不動地反映在瀏覽器頁面上。使用的代碼如下：進(jìn)行預(yù)格式化鋤禾日當(dāng)午，汗 滴 禾 下 土。誰知盤中餐，粒 粒 皆 辛 苦。代碼運行結(jié)果如圖 2-7 所示。圖 2-7 使用預(yù)格式化的運行結(jié)果252.3.5列表HTM

16、L 文檔中使用的列表主要有無序列表、排序列表、目錄列表、菜單列表、描述性列表 5 種類型。下面分別進(jìn)行介紹。1無序列表在 HTML 文檔中無序列表是通過和來實現(xiàn)的。ul 即 Unordered List，是無序列表。是成對，首和尾之間的內(nèi)容就是無序列表的內(nèi)容。無序列表中的每一個列表項開頭必須用進(jìn)行標(biāo)識。li 是項目，是單獨出現(xiàn)的，或列表的尾。Web 瀏覽器在顯示無序列表時，后的文字為列表項的內(nèi)容，直至碰到下一個項目會在每一個列表項的開頭加上無序列表的標(biāo)記符號。如下面的代碼：無序列表范例程序以下是某商店的進(jìn)貨目錄：女裝、男裝、童裝等服裝類用品休閑鞋、運動鞋、皮鞋等鞋類用品鍋、碗、針、線等日用品床

17、單、被罩等用品代碼運行結(jié)果如圖 2-8 所示。圖 2-8 使用無序列表的運行結(jié)果從圖 2-8 可以看出，2排序列表隱含有的作用，Web 瀏覽器在顯示列表項時會自動換行。在 HTML 文檔中排序列表是通過和來實現(xiàn)的。ol 即 Ordered List，是排序列表標(biāo)26簽。是成對出現(xiàn)的，首和尾之間的內(nèi)容就是排序列表的內(nèi)容。排序列表中的每一個列表項也必須用并在每一個列表項開頭加上以進(jìn)行標(biāo)識。Web 瀏覽器在顯示排序列表時，會自動對列表進(jìn)行排序，數(shù)字形式表示的序號。可以通過在中添加 start 屬性的方法來指定序列的起始號。在默認(rèn)情況下，序列的起始號為 1。例如下面的代碼：排序列表范例程序這是列表的第

18、 1 項。這是列表的第 2 項。這是列表的第 3 項。這是列表的第 9 項。這是列表的第 10 項。代碼運行結(jié)果如圖 2-9 所示。3目錄列表HTML 使用和來定義目錄列表。dir 即 Directory，是目錄列表。是成對出現(xiàn)的，首和尾之間的內(nèi)容就是目錄列表的內(nèi)容。目錄列表的列表項開頭也必須用項目標(biāo)識。一般來說，目錄列表項長度較短，典型的目錄列表每項長度不超過 20 個字符。目錄列表的顯示效果和無序列表相同，參見圖 2-8。4菜單列表HTML 使用和來定義菜單列表。菜單列表是成對，首和尾之間的內(nèi)容就是菜單列表的內(nèi)容。菜單列表每一個列表項開頭也必須用項目進(jìn)行標(biāo)識。一般來說，菜單列表每項的長度不

19、超過一行。菜單列表的顯示效果與無序列表基本相同，只不過在排列上更為緊湊，參見圖 2-9。5描述性列表HTML 使用、和來定義描述性列表。dl 即 Definition List，是描述性列表。是成對，首和尾之間的內(nèi)容就是描述性列表的內(nèi)容，由一系列用描述項或解釋項標(biāo)識的列表項組成。和都是單獨，位于列表項的開頭，分別表示該項是描述項和解釋項。和瀏覽器在顯示時會自動換行。一樣，和也隱含有的作用，Web和通常是成對出現(xiàn)的，即一個描述項對應(yīng)于一個解釋項。一個描述項也可以對應(yīng)于幾個解釋項，但最好不要出現(xiàn)幾個描述項對應(yīng)同一個解釋項的情況。27在顯示時，解釋項的內(nèi)容會自動縮進(jìn)一定的距離，使列表的結(jié)構(gòu)更加清晰。

20、例如下面的代碼：描述性列表范例程序這是一個描述性列表：師范學(xué)院包括數(shù)學(xué)專業(yè)、物理專業(yè)、外語專業(yè)、心理教育專業(yè)等計算機(jī)科學(xué)與技術(shù)學(xué)院計算機(jī)與理論專業(yè)計算機(jī)應(yīng)用專業(yè)計算機(jī)硬件專業(yè)代碼運行結(jié)果如圖 2-10 所示。圖 2-9 使用排序列表的運行結(jié)果圖 2-10使用描述性列表的運行結(jié)果2.4HTML 文本HTML 文本用于設(shè)置文本的樣式及顯示屬性，可以讓瀏覽器按照某種格式來顯示文本。下面主要介紹以下幾種常用的文本。2.4.1標(biāo)題HTML 提供了將文本設(shè)置為標(biāo)題顯示的對，夾在對之間的文字是 HTML 文檔的標(biāo)題?？梢栽O(shè)定標(biāo)題字體大小，標(biāo)題的大小一共有 6 種，n=1（大）6（小），也就是從到，其中所括起

21、的文字是第一級標(biāo)題，最大最粗，所括起的文字是最28后一級標(biāo)題，最小最細(xì)。例如下面的代碼：Hi測試文檔。這是第一級標(biāo)題。這是第二級標(biāo)題。這是第三級標(biāo)題。這是第四級標(biāo)題。這是第五級標(biāo)題。這是第六級標(biāo)題。代碼運行結(jié)果如圖 2-11 所示。圖 2-11使用標(biāo)題的運行結(jié)果從圖 2-11 中可以看出，隱含有換行的作用，文本從下一行開始。的屬性有的屬性一color 和 align，分別用來標(biāo)識標(biāo)題的顏色和位置。color 屬性的參數(shù)值取值范圍和樣，可以是 16 種顏色中的任意一種；align 屬性的參數(shù)值為 left、center 或 right，分別表示標(biāo)題位于瀏覽器窗口的左側(cè)、中間和右側(cè)。2.4.2字體

22、修飾字體修飾可對文字的格式做相應(yīng)的變化，如粗體、斜體、上標(biāo)、下標(biāo)等。字體修飾標(biāo)簽常用的有以下幾種。 對：指定文字為粗體字。對：指定文字為斜體字。對：指定文字為帶有下劃線。對：指定文字為效果。 對：指定文字為上標(biāo)。29 對：指定文字為下標(biāo)。對：指定對某段文字進(jìn)行強(qiáng)調(diào)，通常用斜體字顯示出來。 對：對文本進(jìn)行強(qiáng)調(diào)，通常用粗體字顯示出來。使用字體修飾的代碼如下： 字體修飾范例演示 指定文字為粗體字 指定文字為斜體字 指定文字為帶有下劃線指定文字為效果 指定文字為上標(biāo)指定文字為下標(biāo)指定對某段文字進(jìn)行強(qiáng)調(diào)，通常斜體字顯示出來 對文本進(jìn)行強(qiáng)調(diào)，通常用粗體字顯示出來代碼運行結(jié)果如圖 2-12 所示。圖 2-1

23、2 使用字體修飾的運行結(jié)果2.4.3字體Font可以設(shè)置文檔的字體，通過改變其屬性，對文本進(jìn)行不同的設(shè)置，可以對文本的字體、大小、顏色等進(jìn)行改變。1屬性 size用 size 屬性可以設(shè)定字體的大小。例如：文字內(nèi)容標(biāo)題的大小一共有 7 種，也就是（最小）到（最大），另外，還有一種寫法“文字內(nèi)容”，意思就是，比預(yù)設(shè)字大一級，或是“font size=-2”（比預(yù)設(shè)字小二級），一般預(yù)設(shè)字體應(yīng)為 3。302屬性 faceface 屬性可以設(shè)定字體風(fēng)格。在客戶端如果沒有相應(yīng)字體，瀏覽器默認(rèn)以宋體字型顯示。示例代碼如下：這一段的字體風(fēng)格是 arial。3屬性 color使用 color 屬性可以設(shè)置字體

24、的顏色，顏色的取值可以為顏色名或者顏色的十六進(jìn)制表示值。示例代碼如下：這一段的字體顏色是紅色這一段的字體顏色是紅色字體顏色代碼如表 2-2 所示。表 2-2 常用顏色值設(shè)置文本字體的大小、樣式及顏色的代碼如下：Font實例 size=1 的文字 size=2 的文字 size=3 的文字 size=4 的文字 size=5 的文字 size=6 的文字 size=7 的文字代碼運行結(jié)果如圖 2-13 所示。目前不建議使用 font 及其屬性來設(shè)定字體，建議用 CSS 來設(shè)定字體的大小、顏色、字體風(fēng)格等。有關(guān) CSS 的相關(guān)知識將在后面的章節(jié)介紹。顏 色 名RGB 值說明顏 色 名RGB 值說明

25、Black#000000黑rown#a5a2a2a棕色Write#白色Skyblue#87ceeb天藍(lán)色Red#ff0000紅色Line#00ff00草綠色Green#008000綠色Teal#008080墨綠色Blue#0000ff藍(lán)色Sliver#c0c0c0銀色Yellow# f00黃色Plurple#800080紫色Gray#808080灰色Gold#ffd700金色31圖 2-13 使用 Font的運行結(jié)果2.5HTML 超HTML 最顯著的優(yōu)點就在于它支持文檔的超，用戶可以很方便地在不同文檔以及同一文檔的各段落之間跳轉(zhuǎn)。HTML 中的包括錨標(biāo)和目標(biāo)點兩部分。錨標(biāo)就是的源點，當(dāng)鼠標(biāo)被

26、移到錨標(biāo)處時會變成小手狀，此時，用戶通過單擊鼠標(biāo)即可到達(dá)的目標(biāo)點。目標(biāo)點可以是一張、一個網(wǎng)絡(luò)文檔、一個多HTML 是通過超文件等。來實現(xiàn)超是成對，首和尾的。超之間的內(nèi)容就是錨標(biāo)，使用方法如下：文字的基本屬性及其說明如表 2-3 所示。表 2-3 基本屬性及詳細(xì)說明2.5.1屬性 hrefhref 是 hypertext reference 的縮略詞，用于設(shè)定出具體的路徑。其中 URL 地址可以為下面內(nèi)容。地址，地址必須是 URL 地址，還必須給（1） 下形式：a href=htt（2）網(wǎng)頁：到本機(jī)的網(wǎng)頁，可以直接指定網(wǎng)頁所在的路徑。例如下面代碼：屬性詳 細(xì) 說 明href設(shè)置文件的路徑采用幀窗

27、口的情況下設(shè)定到哪一個窗口打開，分為_bl、_self、_parent、_top 4種title讓鼠標(biāo)懸停在超上時，顯示該超的文字注釋name可以跳轉(zhuǎn)到一個文件的指定部位32搜狐首頁回到主頁面（3）可執(zhí)行文件：當(dāng)?shù)降奈募臄U(kuò)展名不是.htm（.html）或者.asp（.jsp/.），而是其他可執(zhí)行的文件時，會將到的文件到本地計算機(jī)上或者直接執(zhí)行。如果是文本文件（如 Word 格式），則在瀏覽器中打開文件并進(jìn)行編輯。word 文檔，打開文檔進(jìn)行編輯聲音文件執(zhí)行對應(yīng)的應(yīng)用程序（4）網(wǎng)頁上的書簽：在網(wǎng)頁的長度超過屏幕時，可以使容，節(jié)省移動滾動條的時間。簽直接跳轉(zhuǎn)到該書簽指向的具體內(nèi)2.5.2屬性打開

28、的位置由屬性進(jìn)行控制，屬性值分為_bl、_self、_parent、_top 4 種。“taget=_bl將 “”表示在新的瀏覽器窗口中打開的文檔，同時保持當(dāng)前窗口不變；“=_self”表示的文檔載入所在的同一框架或窗口，此目標(biāo)是默認(rèn)的，所以通常不需要指定它； =_parent”表示將的文檔載入該所在框架的父框架或父窗口，如果包含的框架不的文檔載入整個瀏覽器窗口；“=_top”表示將是嵌套框架，則所的文檔載入整個瀏覽器窗口，從而刪除所有框架。搜狐首頁上述代碼表示，在新的窗口中打開搜狐首頁。2.5.3屬性titletitle 屬性是一個很實用的屬性，可以用來為添加附加的解釋信息，當(dāng)鼠標(biāo)懸停在有超

29、的文字或者等對象上時，顯示該超的解釋信息。以下代碼在顯示時，當(dāng)把鼠標(biāo)放在超文字“青島大學(xué)青島大學(xué)2.5.4屬性name同樣可以用來進(jìn)行文檔超定位，設(shè)計者需要做的就是首先在文檔內(nèi)設(shè)定一個標(biāo)簽，稱為“錨定位”，這樣做相當(dāng)于在文檔中的某一個位置放置一個，通過超的 href屬性，可以跳轉(zhuǎn)到已經(jīng)設(shè)置好的“錨定位”部的定位。代碼的說明如下：的位置。利用的 name 屬性也可以實現(xiàn)文檔內(nèi)需要設(shè)置定位的文本此時在該文檔的其他任何部位，只要用超對它進(jìn)行定位，即可達(dá)到文檔定位的效果。查33看“錨定位”的超代碼如下：查看已經(jīng)定位的文本由此可見，“#”是文檔定位的關(guān)鍵，瀏覽器遇到“#”則會識別為定位，進(jìn)而在文檔內(nèi)尋找

30、設(shè)計者放置的“錨定位”。如果沒有“#”，瀏覽器就會認(rèn)為它指向的是一個文件名。有了文檔定位，設(shè)計者就可以輕易地進(jìn)行目錄管理了。如果事先在文件的每一個標(biāo)題上加上“錨定位”，然后在目錄上對它們進(jìn)行超name 屬性 參見第一部分&，目錄效果就產(chǎn)生了。如下面的代碼：;&; 參見第二部分&;&; &;&;參見第三部分 參見第四部分&;&;參見第五部分&;&; 參見第六部分 &;第 1 部分第 2 部分第 3 部分第 4 部分第 5 部分第 6 部分代碼運行結(jié)果如圖 2-14 所示。圖 2-14超的 name 屬性這樣一來，瀏覽者只要單擊頁面頂端目錄部分的任何一個條目都會跳轉(zhuǎn)到相應(yīng)的正文位置。2.5.5到地

31、址可以使用電子郵箱作為超Express，然后顯示一個新建的目標(biāo)，單擊這個電子郵箱，就會觸發(fā)郵件客戶端，如 Outlook的窗口。用可以實現(xiàn)這樣的功能，使用格式如下所示：郵件34以下代碼用來添加一個電子郵箱地址：個人郵箱地址2.6HTML 圖像圖像可以使 Web 頁面更加生動美觀、富有生機(jī)。Web 瀏覽器可以顯示 JPEG 和 GIF 圖像。其中GIF 圖像最多只能使用 256 種顏色（即只能保存為 8 位顏色），而 JPEG 格式可保存為 24 位，對具有連續(xù)色調(diào)的圖像有最佳效果。不過，GIF 圖像雖然在圖像質(zhì)量上不及 JPEG 圖像，但占用空間小，速度快。因此，應(yīng)視不同情況而決定使用哪種格式

32、的圖像。對于徽標(biāo)、公司廠標(biāo)等在每一主頁中顯示的，要求能快速并能在低配置的系統(tǒng)中查詢的圖像，應(yīng)采用 GIF 格式，而對于掃描、藝術(shù)作品這種對顯示質(zhì)量要求很高的圖像則應(yīng)采用 JPEG 格式。在 HTML 文檔中圖像是通過來實現(xiàn)的，它只有起始標(biāo)志沒有結(jié)尾標(biāo)志，所有圖像樣式都由的屬性決定，用法如下：2.6.1屬性srcsrc 屬性用來定義的 URL（資源定位符）地址，是必不可少的屬性。如果URL 地址指定錯誤，在瀏覽器頁面中的位置將會出現(xiàn)一個紅色“”號。src 屬性的使用方法如下：URL 表示的路徑和文件名。例如，URL 可以是絕對路徑“htt/images/1.gif”，也可以是相對路徑“./ima

33、ges/1.gif”。2.6.2屬性 altalt 屬性用來顯示的替換文本。當(dāng)打開網(wǎng)頁的過程中，遇到網(wǎng)絡(luò)傳輸錯誤或者設(shè)計者設(shè)定文件路徑錯誤，無法正常顯示時，替換文本可以暫時代替的功能，起到一定的說明作用。正常情況下，當(dāng)鼠標(biāo)指到圖上時，說明文字就會自動出現(xiàn)。例如下面的代碼：現(xiàn)在大多數(shù)瀏覽器都支持載入，但是目前搜索引擎抓取工具仍無法識別圖像中所含的文字，而 alt 屬性的一個重要功能就是寫上的說明，便于搜索引擎抓取網(wǎng)頁的內(nèi)容。2.6.3屬性height 和width用 width 和 height 兩個屬性來規(guī)定圖像的大小。其中 width 屬性用于確定圖像的寬度，height 屬性用于確定圖像的

34、高度。這兩個屬性的參數(shù)值都是數(shù)字，表示圖像寬度（高度）所占的像素點35數(shù)。默認(rèn)時，瀏覽器窗口將自動調(diào)整圖像的顯示尺寸。具體實例應(yīng)用的代碼如下：改變的大小使用 Height 和Width 屬性來改變的大小代碼運行結(jié)果如圖 2-15 所示。圖 2-15 height 和width 屬性2.6.4屬性alignalign 屬性的作用是對齊，可以改變的垂直（居上、居中、居下）對齊方式和水平對齊方式（居左、居中、居右）。下面的代碼用來演示 align 屬性的用法，代碼如下：的上下對齊方式：對齊方式:top對齊方式:middle對齊方式:bottom的左右對齊方式：對齊方式:left對齊方式:center

35、對齊方式:right代碼運行結(jié)果如圖 2-16 所示。36圖 2-16 align 屬性2.6.5屬性border默認(rèn)情況下，瀏覽器顯示是沒有邊框的，即邊框?qū)挾葹?0。如果設(shè)計者想要人為地加上邊框，可以利用 border 屬性。border 屬性的參數(shù)值也是數(shù)字，表示邊框?qū)挾人嫉南袼攸c數(shù)，用法同 height和 width 屬性，這里不再贅述。2.7HTML 表格表格對于網(wǎng)頁制作是很重要的，使用表格最明顯的好處就是以行列對齊的形式來顯示文本和數(shù)字信息，表格還可固定文本或圖像的顯示位置。在創(chuàng)建結(jié)構(gòu)化的 Web 頁面時，通常利用表格將整個頁面劃分成若干區(qū)域，然后再在各個區(qū)域中填充具體的頁面內(nèi)容。

36、因此，使用表格對頁面進(jìn)行布局的做法非常流行。在 HTML 文檔中，整個表格被包括在和對之間，在這之中又有多個來實現(xiàn)表格的相應(yīng)部分，各個的關(guān)系大致如下：要輸出的文本只能放在此處要輸出的文本只能放在此處要輸出的文本只能放在此處/最外層，創(chuàng)建一個表格/創(chuàng)建一行/創(chuàng)建一個單元格子（此行共有 3 個單元格）/最外層由上面的代碼可以看出，表格中不可缺少的主要有、，下面對37表格中常用的作詳細(xì)介紹，并對它們的屬性進(jìn)行說明。2.7.1表格和來使用。用來創(chuàng)建一個表格，它具有以下屬性，如表 2-4 所示。這些屬性可以結(jié)合起表 2-4 的屬性表格中各種屬性的應(yīng)用如下面代碼：表格各種屬性的應(yīng)用表格寬 400 像素，高

37、 100 像素，表格邊框 3 像素。單元格之間空間為 10 像素，單元格邊框與像素。內(nèi)容之間 10第一個單元格第二個單元格第三個單元格在上述代碼中，通過 width 和 height 屬性設(shè)置表格的寬度和高度；通過 border 屬性和 bordercolor屬性設(shè)置表格邊框的像素值和顏色值；通過 cellspacing 屬性和 cellpadding 屬性設(shè)置單元格之間的空間大小以及單元格的邊框與其的文字之間的空間大小。具體運行結(jié)果如圖 2-17 所示。屬性用途設(shè)置表格的背景色設(shè)置邊框?qū)挾?，默認(rèn)值為0設(shè)置邊框顏色設(shè)置邊框明亮部分的顏色（當(dāng)border值大于等于1時有用）設(shè)置邊框昏暗部分的顏色

38、（當(dāng)border值大于等于1時有用）設(shè)置表格單元格之間空間的大小設(shè)置表格單元格邊框與其內(nèi)容之間空間的大小設(shè)置表格的寬度，為像素或者百分比38圖 2-17 表格屬性的應(yīng)用2.7.2行和只能放在和用來創(chuàng)建表格中的每一行。此對之間使用，而對之間加入文本是無效的。具有以下一些屬性。且在此屬性 align如果一個單元格比其中嵌入的內(nèi)容寬，在默認(rèn)情況下，瀏覽器將把單元格的內(nèi)容與其左側(cè)對齊。為了改變某一行中的所有單元格內(nèi)容的水平對齊方向，可以在 中添加 align 屬性，align 屬性有 3 種設(shè)置值，即 left（左對齊）、center（居中）、right（右對齊）。屬性 valignvalign 屬性

39、與 align 屬性的作用相似，區(qū)別在于它是用來設(shè)置單元格內(nèi)容的垂直對齊方式的，valign的取值可以為 top（靠頂端對齊）、middle（居中間對齊）、bottom（靠底端對齊）。屬性 bgcolor還有一些屬性與的某些屬性同名，這些屬性用在上，就會對整個表起作用，而用在上就只對某一行起作用。就某一行而言，相同屬性在中的設(shè)置值會覆蓋在中的設(shè)置值上，bgcolor 屬性就屬于這種情況。的屬性可以用以下一段代碼來演示：單元格屬性設(shè)置水平方tab齊order width=160leftcenterrightABC39垂直方齊taborder height=80topmiddlebottombas

40、elineAtd valign=middCD代碼運行結(jié)果如圖 2-18 所示。圖 2-18 單元格屬性設(shè)置2.7.3單元格和用來創(chuàng)建表格中每一行中的每一個單元格，此對只能放在和對之間使用才是有效的。想要輸入的文本只能放在和1屬性 width 和 height對之間。具有以下一些屬性。width 屬性可以指定單元格的寬度，用絕對像素值或者總寬度的百分比來表示；height 屬性可以設(shè)置單元格的高度，用法與 width 類似。屬性 align 和 valignalign 屬性用來設(shè)置單元格內(nèi)容在單元格空間中的水平對齊方式，與中的 align 屬性相比，中的 align 屬性只對一個單元格起作用，而

41、中的 align 屬性對一行中的所有單元格起作用。同樣地， valign 屬性用來設(shè)置單元格內(nèi)容的垂直對齊方式，也只對一個單元格起作用。屬性 colspan 和 rowspan表格可以是不規(guī)則的表格，即表格中的某個單元格可以跨多行或者多列。colspan 屬性用來設(shè)置一個單元格跨占的列數(shù)（默認(rèn)值為 1），rowspan 屬性用來設(shè)置一個單元格跨占的行數(shù)（默認(rèn)值為 1），40用法如下。跨多列表項，使用格式如下：表項 | 表項跨多行表項，使用格式如下：表項 | 表項設(shè)置跨多行或多列表格的源代碼如下：跨多行、多列的表橫向合并單元格 1 456縱向合并單元格 1 2 3 5 6 同時合并多行多列 1

42、2356 4 代碼運行結(jié)果如圖 2-19 所示。圖 2-19 跨多行、多列的表格412.7.4表頭和用來設(shè)置表格頭的格式，通常為黑體字居中，與和沒有太大區(qū)別。大多數(shù)表格式的數(shù)據(jù)只包含一行和一列表頭，用來說明某一行或某一列數(shù)據(jù)的屬性類別，這種情況就可以利用和的特點來設(shè)置表頭，用來告訴瀏覽器將一個單元格的內(nèi)容格式化為表頭。2.7.5說明和是表格的說明性文字，通常出現(xiàn)在表格的上方，主要用來總結(jié)表格的內(nèi)容和提供表格內(nèi)容的簡明信息。新的 HTML 規(guī)范（從 HTML 4.0 標(biāo)準(zhǔn)開始）規(guī)定，如果有標(biāo)題元素，必須跟在表格的起始之后。說明下面是使用了和省份和城市表的實例代碼：thththtdtdtdtdtd

43、tdwidth=33% width=33% width=33%colspan=2 colspan=2 colspan=2valign=bottom下列兩個城市屬于山東省 valign=bottom下列兩個城市屬于江蘇省valign=bottom下列兩個城市屬于省align=center濟(jì)南 align=center青島align=centeralign=center杭州 align=center廣州align=center這段 HTML 代碼在瀏覽器中的運行結(jié)果如圖 2-20 所示。圖 2-20 和運行結(jié)果422.8HTML 框架一個瀏覽器文檔窗口中一般只能顯示一個網(wǎng)頁文件，但是，使用框架就可

44、以將一個瀏覽器文檔窗口分割成多個子窗口，每個子窗口中都可以顯示一個獨立的網(wǎng)頁文件。典型的框架式網(wǎng)頁頁面包含 3 個框架，如圖 2-21 所示。圖 2-21 包含框架的網(wǎng)頁框架是由英文 Frame 翻譯過來的，它代表瀏覽器文檔窗口中的一個子窗口。每個框架都可以顯示一個 HTML 文件，多個框架組成了一個框架集（Frameset）?？蚣芗ǔ５氖褂梅椒椋涸谝粋€框架中放置一個網(wǎng)頁，此網(wǎng)頁含有可以到其他多個網(wǎng)頁的超條目，者單擊這些超條目后，可以將超指向的網(wǎng)頁文件顯示在另外一個指定的框架中。如果要求在單個應(yīng)用窗口中顯示一個以上的網(wǎng)頁，就可以使用框架。由于瀏覽器為每個框架保留一個單獨的 URL，因此，瀏

45、覽器可以向任何一個框架中加載一個新的 Web 頁面而不改變其他幀中的顯示內(nèi)容。圖 2-21 中，瀏覽器一共要裝載 4 個網(wǎng)頁文件，3 個框架中各裝載一個網(wǎng)頁文件，而生成這 3 個框架的 HTML 代碼也要在一個網(wǎng)頁文件中，這個網(wǎng)頁文件稱為主文檔 index.html。在瀏覽器中輸入的地址必須是主文檔的 URL，即 index.html。瀏覽器顯示主文檔時，再根據(jù)主文檔中的 HTML 代碼，將窗口分為 3 個框架窗口，并在 3 個框架窗口中裝載各自的網(wǎng)頁文件。例如，在圖 2-21 中，top.html 是顯示在頂部框架的文件，left.html 是顯示在左邊框架的文件，右邊框架初始顯示的是 ma

46、in.html，通過單擊左框架窗口中的超文本，可以在右框架中切換顯示 1.html、2.html、3.html、4.html 4 不同的頁面，而左邊框架窗口和頂部框架窗口保持不變。下面介紹框架中用到的主要。2.8.1框架集一個被劃分成若干框架的窗口區(qū)域被稱為框架集，框架窗口必須定義在框架集中，和用來定義框架集中有幾個框架以及各個框架是如何排列的。43和嵌套在和對中，也可以嵌套使用，但是必須放在和之外，因為，和示其他的網(wǎng)頁元素。只是用來劃分框架窗口的，而不能顯具有 rows 和 cols 兩個比較重要的屬性，使用此時，至少應(yīng)選擇這兩個屬性中的一個，否則瀏覽器將只顯示第一個定義的框架，剩下的一概不

47、管，和也就沒有起到任何作用了。rows 屬性用來規(guī)定主文檔中有幾行框架窗口及各個框架窗口的大小，而 cols 屬性用來規(guī)定主文檔中有幾列窗口及各個框架窗口的大小。這兩個屬性的取值可以是多個百分?jǐn)?shù)、絕對像素值或者星號（*）的組合，取值的個數(shù)說明了行或列的個數(shù)，其中星號（*）代表那些未被說明的空間，如果同一個屬性中出現(xiàn)多個星號（*），則將剩下的未被說明的空間平均分配，每個值之間用逗號隔開，所有的框架按照 rows 和 cols 的值從左到右，然后從上到下的順序排列。示例代碼如下：上面代碼表示，總共有 3 個按行排列的框架，每個框架占整個瀏覽器窗口的 1/3 的空間大小。上面代碼表示，總共有 3 個

48、按列排列的框架，第一個框架占整個瀏覽器窗口的 40%，剩下的空間平均分配給另外兩個框架窗口。上面代碼表示，總共有 6 個框架，先是在第一行中從左到右排列 3 個框架，然后在第二行中從左到右再排列 3 個框架，即兩行三列，所占空間依據(jù) rows 和 cols 屬性的值，其中數(shù)字 200 的是像素。除了有 rows 和 cols 兩個屬性之外，還有其他一些常見屬性，如表 2-5 所示。表 2-5 的常用屬性用來定義一個框架組，其基本語法格式如下：2.8.2框架放在和之間，用來定義某一個具體的框架窗口。標(biāo)簽具有 src 和 name 兩個比較重要的屬性，這兩個屬性都是必須賦值的。src 指定整個框架

49、窗口中初始裝載的網(wǎng)頁文件的 URL 地址，瀏覽器將會在此框架中顯示 src 指定的 HTML 文件；name 指定框架窗口的名字，這個名字是用來供超文本“”中的屬性指定的 HTML屬性描述Border設(shè)置邊框粗細(xì)，默認(rèn)是5個像素Bordercolor設(shè)置邊框顏色Frameborder指定是否顯示邊框：0代表不顯示邊框，1代表顯示邊框Framespacing表示框架與框架之間保留空白的距離Noresize設(shè)定框架不能夠調(diào)節(jié)，只要設(shè)定了前面的，后面的將繼承44文件將顯示在哪一個框架中。例如，定義了一個框架名字為 main，其他某個框架窗口中的超的屬性值等于這個框架窗口的名字 main，當(dāng)那個超被單

50、擊后，它指向的HTML 文件將顯示在 main 框架中。此外，還有 scrolling 和 noresize 屬性，scrolling 用來指定是否在框架窗口邊框上顯示滾動條，取值可以是 yes（顯示）、no（不顯示）、auto（網(wǎng)頁內(nèi)容的空間比框架窗口大時顯示，否則不顯示）。noresize 屬性直接加入的分割線而調(diào)整框架的大小。中即可使用，不需要賦值，它用來用戶使用鼠標(biāo)拖動框架間2.8.3和這對的作用是當(dāng)瀏覽者使用的瀏覽器太舊而不支持框架這個功能時，看到的將會是一片空白。為了避免這種情況的發(fā)生，可使用這個，當(dāng)使用的瀏覽器看不到框架時，就會看到之間的內(nèi)容，而不是一片空白。這些內(nèi)容可以是提醒瀏

51、覽轉(zhuǎn)用新的瀏覽器的字句，也可以是一個沒有框架的網(wǎng)頁，或能自動切換至有框架的版本。在此對應(yīng)該緊跟著和。2.8.4浮動窗口稱為浮動窗口。和不需要放在和標(biāo)簽之間，它的作用是在一個網(wǎng)頁中間一個簡單的框架窗口，在這個框架窗口中可以顯示另外一個文件，這樣就能夠?qū)崿F(xiàn)一種“畫中畫”的效果。在和對中放入的文本只有在瀏覽器不支持時才會顯示，用來給用戶一個提示信息。屬性的用法與標(biāo)簽類似，這里不再贅述。圖 2-22 為添加了浮動窗口的顯示頁面。圖 2-22 增加了浮動窗口的頁面在其中的 HTML 源代碼文檔中，增加浮動窗口的相應(yīng)代碼如下：這是浮動窗口的內(nèi)容452.8.5框架的高級設(shè)置在設(shè)計應(yīng)用中，還會使用框架的一些高

52、級設(shè)置，如框架的嵌套和框架之間的1框架的嵌套。在應(yīng)用框架對頁面進(jìn)行布局時，要設(shè)計出既有上下分布又有左右分布的框架結(jié)構(gòu)時，就需要用到框架的嵌套定義。以圖 2-21 為例，主頁 index.html 的源代碼如下：無標(biāo)題文檔從上述代碼可以看出，在框架設(shè)置中，應(yīng)用“rows=60,*”屬性設(shè)置可以將頁面分為上下兩部分，上部分為，用來裝載 top.html 頁面；下部分應(yīng)用“”語句將下面的頁面框架分為左右兩個部分，分別為“”和“”，用來裝載 left.html 頁面和 main.html 頁面。2框架間的如果要在框架窗口中做，就必須對每一個框架子窗口命名，以便被用于窗口間的。在超中還要設(shè)置屬性 tar

53、ge，用 targe 屬性可以將被的內(nèi)容放置到想要放置的窗口內(nèi)。仍然以圖 2-21 為例介紹框架之間的。在主頁 index.html 源代碼中通過“ ”將左下方框架命名為 leftFrame ，通過“ ”將右下方框架命名為 zhu。其中，left.html 頁面為左下方框架中顯示的目錄頁面，包含超 ，頁面 left.html 的源代碼如下： 無標(biāo)題文檔 a href=1.html=zhuHTML 入門 46a href=2.html=zhu class=style1頁面布局與文字設(shè)計a href=3.html=zhu class=style1TABLE 表格a href=4.html=zhu

54、class=style1文件之間的從上述代碼可以看出，在超中通過“HTML 入門”設(shè)置了“=zhu”的屬性，將頁面顯示的目的地設(shè)置為 zhu 的框架。當(dāng)單擊超的文字“HTML入門”時，命名為 zhu 框架中的內(nèi)容會發(fā)生相應(yīng)變化。2.9HTML 表單表單（Form）是 HTML 的一個重要部分，主要用于和提交用戶輸入的信息，使網(wǎng)頁具有交互的功能。一般情況下，會將表單設(shè)計在一個 HTML 文檔中，當(dāng)用戶填寫完信息進(jìn)行提交（submit）操作時，表單的內(nèi)容就被傳送到服務(wù)器上，等處理完畢后，再將結(jié)果信息返回到客戶端。2.9.1表單和 3 個比較常用的屬性。1屬性 action用來創(chuàng)建一個表單，在對之間的都屬于表單的內(nèi)容。有以下action 屬性的值是處理程序的程序名。用戶填入表單的信息總是需要程序來進(jìn)行處理的，表單中的action 指明了處理表單信息的文件名（包括網(wǎng)絡(luò)路徑、或相對路徑），例如，“ ”語句表示當(dāng)用戶提交表單時，服務(wù)器將執(zhí)行/cgi-bin/上的名為 search.cgi