HTML入門教程

1、HTML入門教程第1課：開始學(xué)習(xí)在這第一課中，我們簡(jiǎn)要介紹制作網(wǎng)站所需的工具。需要哪些工具？十之八九，你已經(jīng)擁有所需的全部工具了?！盀g覽器（browser）”你有了，它是用于瀏覽網(wǎng)站的程序。你現(xiàn)在就是通過瀏覽器在觀看本頁(yè)面的。游覽器有很多可供選擇，最普及的瀏覽器當(dāng)屬微軟（Microsoft）公司的Internet Explorer（俗稱“IE”），其他的一些瀏覽器包括Opera、Mozilla Firefox（俗稱“火狐貍”或“火狐”）等。這些瀏覽器的基本功能都是瀏覽網(wǎng)頁(yè)，因此具體使用哪個(gè)瀏覽器是無所謂的。也許你聽說過、甚至用過一些網(wǎng)頁(yè)制作工具，比如Microsoft FrontPage、Ma

2、cromedia Dreamweaver、Microsoft Word等?，F(xiàn)在可以忘掉這些程序了！它們對(duì)你學(xué)習(xí)網(wǎng)頁(yè)制作沒有什么幫助。相反，你需要的是一個(gè)簡(jiǎn)易的文本編輯器。如果你正在使用Windows（微軟視窗）操作系統(tǒng)的話，你可以使用它自帶的記事本（Notepad）程序。你可以依次點(diǎn)擊“開始菜單程序附件”找到該程序。如果你用的是其他操作系統(tǒng)，那么也有類似的簡(jiǎn)易文本編輯器可以使用，比如Linux上的Pico或Mac（蘋果機(jī)）上的Simple Text。記事本是一個(gè)非常簡(jiǎn)單的文本編輯程序，用它編寫程序非常好，因?yàn)樗粫?huì)干涉你所輸入的任何內(nèi)容，給予你完全的控制權(quán)。而許多網(wǎng)頁(yè)制作工具的問題在于，它們提

3、供了許多標(biāo)準(zhǔn)功能供你選擇。這樣的缺點(diǎn)是，你只能按照這些標(biāo)準(zhǔn)功能來制作網(wǎng)頁(yè)。所以，這類工具常常不能創(chuàng)建正合你意的網(wǎng)頁(yè)?；蛘?，更令人討厭的是，它們會(huì)修改你手工編寫的代碼。而使用記事本（Notepad）或其他簡(jiǎn)易文本編輯器的話，全部代碼均由你自己編寫。瀏覽器和記事本程序（或類似的簡(jiǎn)易文本編輯器）便是你所需的全部工具，有了它們，你就可以完成本教程，并制作自己的網(wǎng)站了。 我需要連上因特網(wǎng)么？你無需連上因特網(wǎng)（Internet），瀏覽本教程和制作網(wǎng)站都可以離線完成。如果你想要離線閱讀本教程，你可以將它打印出來，或者在閱讀教程期間斷開與因特網(wǎng)的連接。你可以先在自己的計(jì)算機(jī)上制作網(wǎng)站，待網(wǎng)站制作完畢再上傳到因

4、特網(wǎng)上。接下來學(xué)習(xí)什么？下一課將介紹HTML是什么，然后從第三課開始學(xué)習(xí)有趣的HTML。第2課：HTML是什么？這一課將為你簡(jiǎn)要介紹你的新朋友HTML。HTML是什么？HTML是瀏覽器的“母語(yǔ)”。長(zhǎng)話短說，HTML是由一名叫Tim Berners-Lee的科學(xué)家發(fā)明的。他發(fā)明HTML的目的，是為了方便不同大學(xué)的科學(xué)家們可以更容易地獲取彼此的研究文檔。HTML取得了的巨大成功，大大超出了Tim Berners-Lee的原本預(yù)計(jì)。通過發(fā)明HTML，他為我們今天所認(rèn)識(shí)的萬(wàn)維網(wǎng)奠定了基礎(chǔ)。HTML是一門語(yǔ)言，它令我們可以在因特網(wǎng)上展示信息（例如科學(xué)研究信息）。你所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)HTML進(jìn)行解釋

5、的結(jié)果。要查看一個(gè)網(wǎng)頁(yè)的HTML代碼，只需在瀏覽器菜單欄上點(diǎn)擊“查看”，然后選擇“源文件”即可。對(duì)于生手來說，HTML代碼看似很復(fù)雜，不過本教程將幫助你弄清楚它們的含義。HTML能用來做什么？如果你要制作網(wǎng)站的話，學(xué)習(xí)HTML是不可避免的。即使你用Dreamweaver等工具來制作網(wǎng)站，了解基本的HTML知識(shí)也會(huì)令你在網(wǎng)站制作過程中倍感輕松，并有利于制作出更好的網(wǎng)站。好在HTML容易被學(xué)會(huì)和使用。通過下面兩課的學(xué)習(xí)，你將學(xué)會(huì)如何制作自己的第一個(gè)網(wǎng)站。HTML是用來制作網(wǎng)站的。就這么簡(jiǎn)單！好，明白了，那HTML這四個(gè)字母代表什么呢？HTML是“HyperText Mark-up Language

6、（超文本標(biāo)記語(yǔ)言）”的縮寫其實(shí)目前你不必了解這些，不過，為了遷就學(xué)習(xí)次序，我們就詳細(xì)解釋一下吧。 超（Hyper）是相對(duì)于線性（linear）來說的。在很久以前，那時(shí)計(jì)算機(jī)程序還是線形運(yùn)行的：當(dāng)計(jì)算機(jī)程序執(zhí)行完一個(gè)動(dòng)作以后，轉(zhuǎn)向下一行，這行結(jié)束后，繼續(xù)下移，依次類推。但HTML則不同，你可以在任何時(shí)候跳轉(zhuǎn)到任何地方。比方說，你在瀏覽之前，不必先去瀏覽MSN.com。 文本（Text）意味著它是自解釋的（self-explanatory）。 標(biāo)記（Markup）指的是你怎么處理文本。對(duì)文本作標(biāo)記的方式，跟你在文本編輯程序里將文本加粗、或者將一行話設(shè)為標(biāo)題或列表項(xiàng)目類似。

7、 語(yǔ)言（Language）。HTML就是一種語(yǔ)言，它使用了許多英文單詞。在本教程中，你將會(huì)學(xué)習(xí)到XHTML（可擴(kuò)展超文本標(biāo)記語(yǔ)言）。簡(jiǎn)單地說，它是一種新的、更加結(jié)構(gòu)良好的HTML?，F(xiàn)在，你知道了HTML（和XHTML）代表什么意思，下面我們將開始有關(guān)網(wǎng)站制作的學(xué)習(xí)。第3課：元素與標(biāo)簽現(xiàn)在你要學(xué)習(xí)的是HTML的重要成分元素（element）。元素用于結(jié)構(gòu)化HTML文檔，并告知瀏覽器如何呈現(xiàn)網(wǎng)頁(yè)。一般來說，元素由首標(biāo)簽（start tag）、內(nèi)容（content）和尾標(biāo)簽（end tag）構(gòu)成?！皹?biāo)簽”是什么？標(biāo)簽（tag）指示元素的起始與結(jié)束。所有標(biāo)簽都具有相同的格式：以小于號(hào)“”結(jié)尾。 一般說

8、來，有兩種標(biāo)簽首標(biāo)簽（start tag）（如）和尾標(biāo)簽（end tag）（如）。它們唯一的區(qū)別在于，尾標(biāo)簽多一條斜杠“/。你通過把內(nèi)容放在首標(biāo)簽和尾標(biāo)簽之間來對(duì)內(nèi)容進(jìn)行標(biāo)記。HTML主要就是各種各樣的元素，所以，學(xué)習(xí)HTML，就是學(xué)習(xí)使用各種元素?？梢耘e些例子么？沒問題。比如，b元素的作用是，告訴瀏覽器介于標(biāo)簽和之間的文本應(yīng)以粗體顯示。（這里的“b”是“粗體（bold）”的意思。）例1：這句話應(yīng)顯示為粗體。該例在瀏覽器中將顯示如下：這句話應(yīng)顯示為粗體。 h1、h2、h3、h4、h5及h6元素的作用是顯示標(biāo)題（這里的h是“標(biāo)題（heading）”的意思）。其中h1是一級(jí)標(biāo)題，字體最大；h2是二

9、級(jí)標(biāo)題，字體比一級(jí)標(biāo)題略?。欢鴋6是六級(jí)標(biāo)題，它是最后一級(jí)標(biāo)題，字體也最小。例2：這是標(biāo)題這是子標(biāo)題該例在瀏覽器中將顯示如下：這是標(biāo)題這是子標(biāo)題首標(biāo)簽和尾標(biāo)簽總是必須的嗎？常言道，凡事均有例外。在HTML中，也有例外的情況，即有些元素沒有尾標(biāo)簽。這些沒有尾標(biāo)簽的元素被稱作空元素（empty element），它們與具體文本內(nèi)容無關(guān)，比如像下面這個(gè)換行標(biāo)簽：。標(biāo)簽中的字母應(yīng)該大寫還是小寫？大多數(shù)瀏覽器不介意標(biāo)簽是大寫還是小寫，或者混合大小寫。所以、或在瀏覽器上的顯示效果都一樣。但是，正確的寫法是采用小寫字母來書寫標(biāo)簽。所以，要養(yǎng)成用小寫字母書寫標(biāo)簽的習(xí)慣。把標(biāo)簽放在哪里？你應(yīng)該在HTML文檔里書

10、寫標(biāo)簽。一個(gè)網(wǎng)站可能包含多個(gè)HTML文檔。上網(wǎng)的過程，其實(shí)就是打開不同HTML文檔的過程。這一課就到這里。如果花10分鐘時(shí)間繼續(xù)學(xué)習(xí)下一課的話，你將能夠制作自己的第一個(gè)網(wǎng)站。第4課：制作自己的第一個(gè)網(wǎng)站有了從前面幾課的基礎(chǔ)，現(xiàn)在只需再花幾分鐘時(shí)間，你就能學(xué)會(huì)如何制作自己的第一個(gè)網(wǎng)站了。如何做呢？通過第一課，我們知道制作一個(gè)網(wǎng)頁(yè)需要有瀏覽器和記事本程序（或者類似的文本編輯器）。既然你現(xiàn)在已經(jīng)在用瀏覽器閱讀本教程了，那么請(qǐng)?jiān)俅蜷_一個(gè)窗口這樣你就可以一邊閱讀本教程，一邊欣賞你的新網(wǎng)頁(yè)了。另外，請(qǐng)打開記事本程序（Notepad）：依次選擇“開始菜單程序附件記事本”即可?，F(xiàn)在一切就緒了！然后呢？我們先從

11、簡(jiǎn)單的做起吧。先試著做一個(gè)顯示如下內(nèi)容的網(wǎng)頁(yè)：“哇！這是我的第一個(gè)網(wǎng)站?！崩^續(xù)學(xué)習(xí)，就你就知道這是多么容易了。HTML簡(jiǎn)單易學(xué)。瀏覽器讀HTML就跟你讀書一樣，也是從上往下，從左到右進(jìn)行的。所以，HTML文檔的開始和結(jié)束便對(duì)應(yīng)于網(wǎng)頁(yè)的頭和尾。你首先要做的是告訴瀏覽器，你們將采用HTML語(yǔ)言來“對(duì)話”。這是通過標(biāo)簽來實(shí)現(xiàn)的（這是容易理解的）。所以，在做所有其他事之前，先在記事本的第一行敲入“”。也許你記得前面課程中我們說過，這里的是首標(biāo)簽，在HTML文檔結(jié)尾處必須有相應(yīng)的尾標(biāo)簽與之對(duì)應(yīng)。好的，為了防止最后忘記寫這個(gè)尾標(biāo)簽，我們現(xiàn)在就輸入“”，然后在和之間留些空行，用于書寫其余代碼。下面，我們需要

12、為HTML文檔寫一個(gè)“頭部（head）”，它提供關(guān)于當(dāng)前文檔的信息；然后寫一個(gè)“主體（body）”，它提供文檔的內(nèi)容。HTML最重要的就是簡(jiǎn)單在這里，我們只需把頭部（和）放到主體(和）的前面就行了。如下所示： 注意我們是如何用換行（用Enter鍵）與縮進(jìn)（用Tab鍵）令代碼具有層次感的。理論上，你如何書寫HTML文檔，這無關(guān)緊要。但為了便于閱讀代碼，和保持良好的概貌，我們強(qiáng)烈建議你采用換行與縮進(jìn)來層次化HTML代碼，就像上面的例子一樣。上面這個(gè)文檔便構(gòu)成了你的第一個(gè)網(wǎng)站它只包含一個(gè)網(wǎng)頁(yè)，而且內(nèi)容很單調(diào)，可能與你的想象相去甚遠(yuǎn)，但在一定程度上它仍是一個(gè)網(wǎng)站。你可以將它用作其他HTML文檔的基本模

13、版。不錯(cuò)不錯(cuò)，但我如何添加更多內(nèi)容？前面我們學(xué)到過，HTML文檔有兩個(gè)部分：頭部（head）和主體（body）。你在頭部（head）提供關(guān)于網(wǎng)頁(yè)的信息，你在主體（body）部分提供網(wǎng)頁(yè)的具體內(nèi)容。比如，如果你要指定HTML文檔的網(wǎng)頁(yè)標(biāo)題（title）（它將顯示在瀏覽器窗口頂部），你就要在頭部（head）提供有關(guān)信息。用title元素來指定網(wǎng)頁(yè)標(biāo)題：即在首標(biāo)簽與尾標(biāo)簽之間寫上網(wǎng)頁(yè)標(biāo)題：我的第一個(gè)網(wǎng)站注意，網(wǎng)頁(yè)標(biāo)題（title）不是顯示在網(wǎng)頁(yè)里，而是顯示在瀏覽器窗口的標(biāo)題欄上的。網(wǎng)頁(yè)里顯示的所有內(nèi)容都必須放在body元素里。比如，我們要在網(wǎng)頁(yè)里顯示“哇！這是我的第一個(gè)網(wǎng)站?！边@行文字，它屬于主體（

14、body）部分，所以我們?cè)赽ody元素里輸入：哇！這是我的第一個(gè)網(wǎng)站。標(biāo)簽里的p是“段落（paragraph）”的意思，也就是一個(gè)文本段落?，F(xiàn)在，你的HTML文檔應(yīng)該是這樣：我的第一個(gè)網(wǎng)站z哇！這是我的第一個(gè)網(wǎng)站。搞定！ 你已經(jīng)完成了自己第一個(gè)真正的網(wǎng)站（盡管它只包含一個(gè)網(wǎng)頁(yè)）！接著，你需要將它保存到你的硬盤上，然后在瀏覽器中打開它： 在記事本的“文件”菜單下選擇“另存為.”。 這時(shí)會(huì)彈出一個(gè)對(duì)話框，在“保存類型”右邊的下拉菜單里選擇“所有文件”。這一點(diǎn)很重要否則，它將被保存為文本文檔，而不是HTML文檔。 現(xiàn)在將這個(gè)文檔保存為“page1.htm”（后綴名“htm”表明它是一個(gè)HTML文檔。

15、后綴名用“html”也可以，但我比較習(xí)慣使用“htm”，你可以根據(jù)自己的喜好選用二者中的任一個(gè)）。將HTML文檔保存在硬盤上的哪個(gè)文件夾無關(guān)緊要只要你記得保存位置，并能再次找到它就行?，F(xiàn)在打開瀏覽器： 在“文件”菜單下選擇“打開”。 在彈出的對(duì)話框中點(diǎn)擊“瀏覽”按鈕。 現(xiàn)在，請(qǐng)找到你的HTML文檔，然后點(diǎn)擊“打開”。這時(shí)，瀏覽器中應(yīng)顯示“哇！這是我的第一個(gè)網(wǎng)站?！?。恭喜！如果你迫切希望自己的杰作能被全世界看到，你可以先去第14課學(xué)習(xí)一下如何把自己的網(wǎng)頁(yè)上傳到因特網(wǎng)（Internet）上。如果你不著急的話，那么請(qǐng)繼續(xù)往下學(xué)習(xí)。樂趣才剛剛開始。始終以上一課中的基本模版為起點(diǎn)制作新網(wǎng)頁(yè)：。 網(wǎng)頁(yè)標(biāo)題

16、（title）寫在head（頭部）里：網(wǎng)頁(yè)標(biāo)題寫在這里。注意，網(wǎng)頁(yè)標(biāo)題將顯示在瀏覽器窗口的標(biāo)題欄上：網(wǎng)頁(yè)標(biāo)題（title）尤其重要，因?yàn)樗阉饕妫ū热鏕oogle）要用它來索引網(wǎng)頁(yè)，并顯示在搜索結(jié)果里。網(wǎng)頁(yè)的實(shí)際內(nèi)容寫在body（主體部分）里。你已經(jīng)掌握一些最重要的元素了：用于段落顯示粗體文本標(biāo)題子標(biāo)題子子標(biāo)題 記住，學(xué)習(xí)HTML要反復(fù)嘗試才行。別擔(dān)心，即時(shí)出錯(cuò)也不會(huì)損壞你的計(jì)算機(jī)或因特網(wǎng)。所以，可以放心繼續(xù)操練這是獲取經(jīng)驗(yàn)的最好辦法。學(xué)會(huì)這些就可以成為高手了嗎？要成為一名網(wǎng)頁(yè)制作高手，僅學(xué)習(xí)本教程是不夠的。因?yàn)楸窘坛讨簧婕癏TML成分的基本用法要成為高手，你必須靈活運(yùn)用這些成分才行。那么，要

17、獨(dú)自面對(duì)困難，并學(xué)會(huì)自立了?；蛟S如此，不過也未必。試試看，把已經(jīng)學(xué)過的內(nèi)容操練一下吧。下面做什么？自己嘗試創(chuàng)建一些網(wǎng)頁(yè)。比如：做一個(gè)網(wǎng)頁(yè)，為它設(shè)置網(wǎng)頁(yè)標(biāo)題（title），并寫一些標(biāo)題（heading）、文本、子標(biāo)題等。剛開始，你可以通過查閱本教程來幫助你制作網(wǎng)頁(yè)。但是后面，你要試著離開本教程自己獨(dú)立完成。第6課：學(xué)習(xí)更多元素你有沒有獨(dú)立完成過一些網(wǎng)頁(yè)？如果還沒有，請(qǐng)看下面的例子：。 我的網(wǎng)站 標(biāo)題一些文字。子標(biāo)題一些文字。 看完了，然后呢？現(xiàn)在要學(xué)習(xí)七個(gè)新元素。前面學(xué)過，你可以通過用和把文本括起來，把文本設(shè)為粗體；類似地，你可以通過用和把文本括起來，把文本設(shè)為斜體。沒錯(cuò)，這里的“i”是“斜體（

18、italic）”的意思。例1：這句話應(yīng)顯示為斜體該例在瀏覽器中將顯示如下：這句話應(yīng)顯示為斜體 同樣，你可以用small標(biāo)簽把文本設(shè)為小字體：例2：這句話應(yīng)顯示為小字體該例在瀏覽器中將顯示如下：這句話應(yīng)顯示為小字體 我可以同時(shí)應(yīng)用多個(gè)標(biāo)簽嗎？你可以同時(shí)應(yīng)用多個(gè)標(biāo)簽，只要你能避免標(biāo)簽交錯(cuò)起來。最好通過一個(gè)例子來說明：例3：如果你希望一段文本即是粗體又是斜體，你可以這樣做：既是粗體又是斜體注意不能這樣：既是粗體又是斜體二者區(qū)別在于：在前一個(gè)例子中，首先打開的標(biāo)簽最后關(guān)閉。這樣可以避免混淆。學(xué)習(xí)更多元素！正如第3課中提到的，有些元素是沒有尾標(biāo)簽（end tag）的。這種元素被稱作空元素（empty e

19、lement），它們不與特定文本段落相關(guān)。一個(gè)例子是，它的作用是插入一個(gè)換行符。例4：寫一些文字重起一行再寫一些文字該例在瀏覽器中將顯示如下：寫一些文字重起一行再寫一些文字 注意上面的空元素：它沒有尾標(biāo)簽，并且在首標(biāo)簽名稱的后面加了空格和斜杠。 另一個(gè)空元素是，它的作用是畫一條水平線。這里的“hr”是“水平線（horizontal rule）”的意思。例5：該例在瀏覽器中將顯示如下：HTML中的空元素還包括ul、ol和li，這三個(gè)元素用于制作列表。ul代表“無序列表（unordered list）”，它的作用是為每個(gè)列表項(xiàng)顯示一個(gè)粗點(diǎn)。ol代表“有序列表（ordered list）”，它的作用

20、是顯示每個(gè)列表項(xiàng)的序號(hào)。用元素把多個(gè)列表項(xiàng)組織為一個(gè)列表，其中的li代表“列表項(xiàng)（list item）。感覺有些迷糊？那么，請(qǐng)看下面的例子：例7：一個(gè)列表項(xiàng)另一個(gè)列表項(xiàng)該例在瀏覽器中將顯示如下： 一個(gè)列表項(xiàng) 另一個(gè)列表項(xiàng)例8：第一個(gè)列表項(xiàng)第二個(gè)列表項(xiàng)該例在瀏覽器中將顯示如下：1. 第一個(gè)列表項(xiàng) 2. 第二個(gè)列表項(xiàng)喲！就這些??？嗯，這一課就學(xué)這么多。再次重申，請(qǐng)反復(fù)實(shí)驗(yàn)本課所學(xué)的元素，并在制作自己的網(wǎng)頁(yè)時(shí)使用它們。斜體小字體 換行 水平線無序列表有序列表列表項(xiàng)第7課：屬性許多元素都可以設(shè)置屬性。屬性是什么？也許你還記得，HTML通過標(biāo)簽告訴瀏覽器如何展示網(wǎng)頁(yè)（比如告訴瀏覽器顯示一個(gè)換行）。你可以

21、為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）。例1：我跟HTML的友誼屬性應(yīng)寫在元素的首標(biāo)簽上。具體寫法是：屬性名稱（attribute name）后緊跟一個(gè)等號(hào)（“=”），后面寫上用雙引號(hào)括起來的屬性值（attribute value）。對(duì)于style屬性的值，可以用分號(hào)（“;”）來分隔多個(gè)樣式指令。這個(gè)后面會(huì)介紹。這里涉及什么知識(shí)點(diǎn)？屬性有許多，我們首先學(xué)習(xí)的是style屬性，它用于為網(wǎng)頁(yè)設(shè)定樣式，比如設(shè)置背景顏色等。例2： 該例將在瀏覽器中顯示一個(gè)全是紅色的頁(yè)面自己動(dòng)手試試看。稍后我們會(huì)詳細(xì)講解顏色設(shè)置的原理。注意，一些元素和屬性的名稱采用的是美式拼寫，比如col

22、or（而不是colour）。請(qǐng)留意本教程中元素與屬性名稱的拼寫，千萬(wàn)不要寫錯(cuò)否則瀏覽器將無法理解你的代碼。而且，別忘了用雙引號(hào)把屬性值（attribute value）括起來。為什么上面那個(gè)頁(yè)面全是紅的？在上例中，我們將網(wǎng)頁(yè)的背景顏色設(shè)置為“#ff0000”，這個(gè)十六進(jìn)制代碼（HEX）代表紅色。每個(gè)顏色都有其對(duì)應(yīng)的十六進(jìn)制代碼。下面是一些例子：白色： #ffffff黑色： #000000紅色： #ff0000蘭色： #0000ff綠色： #00ff00黃色： #ffff00十六進(jìn)制代碼由“#”打頭，后面跟六位數(shù)字或字母。由于這樣的十六進(jìn)制代碼太多，不便記住哪個(gè)代碼對(duì)應(yīng)哪個(gè)特定顏色。為此，我們?yōu)?/p>

23、最常用的216個(gè)顏色制作了一張表，供大家參閱：216個(gè)網(wǎng)頁(yè)安全顏色表。216 Web Safe Colour ChartFFFFFFFFCCFFFF99FFFF66FFFF33FFFF00FFFFFFCCFFCCCCFF99CCFF66CCFF33CCFF00CCFFFF99FFCC99FF9999FF6699FF3399FF0099FFFF66FFCC66FF9966FF6666FF3366FF0066FFFF33FFCC33FF9933FF6633FF3333FF0033FFFF00FFCC00FF9900FF6600FF3300FF0000CCFFFFCCCCFFCC99FFCC66FF

24、CC33FFCC00FFCCFFCCCCCCCCCC99CCCC66CCCC33CCCC00CCCCFF99CCCC99CC9999CC6699CC3399CC0099CCFF66CCCC66CC9966CC6666CC3366CC0066CCFF33CCCC33CC9933CC6633CC3333CC0033CCFF00CCCC00CC9900CC6600CC3300CC000099FFFF99CCFF9999FF9966FF9933FF9900FF99FFCC99CCCC9999CC9966CC9933CC9900CC99FF9999CC9999999999669999339999FF66

25、99CC6699996699666699FF3399CC3399993399FF0099CC0099990066FFFF66CCFF6699FF6666FF6633FF6600FF66FFCC66CCCC6699CC6666CC6633CC6600CC66FF9966CC9966999966669966339966009966FF6666CC6666996666666666FF3366CC3366993366FF0066CC0066990033FFFF33CCFF3399FF3366FF3333FF3300FF33FFCC33CCCC3399CC3366CC3333CC3300CC33FF99

26、33CC9933999933669933FF6633CC6633996633FF3333CC3333993333FF0033CC0033990000FFFF00CCFF0099FF0066FF0033FF0000FF00FFCC00CCCC0099CC0066CC0033CC0000CC00FF9900CC99900339900ff6600cc66600FF3300CC33300FF0000CC00009900除此以外，對(duì)于一些最常用的顏色（比如白色、黑色、紅色、蘭色、綠色及黃色等），你還可以使用它們的英語(yǔ)名稱。例3：關(guān)于顏色就講這么多了。讓我們繼續(xù)學(xué)習(xí)屬性。哪些元素可以使用屬性？不同元素使用

27、不同的屬性。有些元素（比如body等）被添加屬性的機(jī)會(huì)比較大，而有些元素（比如br等）則較小、甚至不會(huì)被添加屬性。HTML里有很多元素，同樣也有很多屬性。有些屬性僅用于個(gè)別元素，有些屬性可用于很多元素。反之亦然：有些元素只能使用個(gè)別屬性，有些元素可以使用較多的屬性。聽起來這也許很令人困惑，不過一旦你熟悉了各個(gè)屬性，就會(huì)感到很簡(jiǎn)單，并覺得它們很有用處。本教程將介紹大多數(shù)重要屬性。一個(gè)元素包括哪些部分？一般來說，一個(gè)元素包括一個(gè)首標(biāo)簽（start tag）、零或多個(gè)屬性（attribute）、一些內(nèi)容和一個(gè)尾標(biāo)簽（end tag）。就這么簡(jiǎn)單， 參見下圖。第8課：鏈接在這一課，你將學(xué)習(xí)如何在網(wǎng)頁(yè)之

28、間做鏈接。如何做鏈接？做鏈接也是通過元素（element）實(shí)現(xiàn)的。做鏈接只需一個(gè)元素和一個(gè)屬性就行了。下面是一個(gè)例子，它是一個(gè)指向的鏈接：例1：這是一個(gè)指向的鏈接該例在瀏覽器中將顯示如下：這是一個(gè)指向的鏈接 元素a代表“鏈接（anchor）”；屬性href代表“超文本引用（hypertext reference）”，它用于指定鏈接指向何處通常是一個(gè)因特網(wǎng)地址或者一個(gè)文件名。在上例中，屬性href的值為“”，這是網(wǎng)站的完整地址，也被稱作URL（統(tǒng)一資源定位符）。注意，在URL里必須包含“htt

29、p:/”。“這是一個(gè)指向的鏈接”是這個(gè)鏈接在瀏覽器中顯示出來的文本。記得在元素結(jié)尾處寫上。如何在同一網(wǎng)站的網(wǎng)頁(yè)之間添加相互鏈接？如果你要在同一網(wǎng)站的不同網(wǎng)頁(yè)間做鏈接，那就不必拼寫出網(wǎng)頁(yè)的完整URL。舉個(gè)例子，假如你有兩個(gè)網(wǎng)頁(yè)（比如說page1.htm和 page2.htm），而且它們被存放在同一個(gè)文件夾中，那么你在做鏈接的時(shí)候，只要寫出文件名就行了。這樣，page1.htm到page2.htm的鏈接將如下所示：例2：點(diǎn)擊這里轉(zhuǎn)到第2頁(yè)如果page2.htm被放在下一級(jí)文件夾中（比如“subfolder”），那么鏈接將是這樣：例3：點(diǎn)擊這里轉(zhuǎn)到第2頁(yè)反過來，從page2

30、.htm（在下級(jí)文件夾中）到page1.htm的鏈接將是這樣：例4：轉(zhuǎn)到第1頁(yè)“./”代表當(dāng)前位置（即該鏈接所在文件所處的文件夾）的上一級(jí)文件夾。同理，當(dāng)前位置的上上級(jí)文件夾可用“././”表示。明白其中的規(guī)則了嗎？當(dāng)然，如果給出完整URL也行。如果要在一個(gè)網(wǎng)頁(yè)內(nèi)做鏈接怎么辦呢？你也可以在一個(gè)網(wǎng)頁(yè)的內(nèi)部做鏈接比如在網(wǎng)頁(yè)開始處提供一個(gè)目錄，在其中列出指向下面各章的鏈接。這可以通過使用id屬性和“#”符號(hào)來實(shí)現(xiàn)。用id屬性標(biāo)出要被指向的元素。例如：標(biāo)題1然后通過在鏈接中利用“#”來指向那個(gè)元素。 “#”后面必須緊跟著一個(gè)id屬性的值，表明鏈接指向該id屬性被定義的地方。例如：轉(zhuǎn)到標(biāo)題1來看一個(gè)例子

31、就明白了：例5： 轉(zhuǎn)到標(biāo)題1轉(zhuǎn)到標(biāo)題2標(biāo)題1一些文字。標(biāo)題2一些文字。 該例在瀏覽器中將顯示如下（你可以試試看點(diǎn)擊這兩個(gè)鏈接）：轉(zhuǎn)到標(biāo)題1轉(zhuǎn)到標(biāo)題2標(biāo)題1一些文字。標(biāo)題2一些文字。（注：id屬性必須以字母開頭）除了網(wǎng)頁(yè)，鏈接還能指向什么？你還可以為e-mail地址做鏈接，方法跟為網(wǎng)頁(yè)做鏈接差不多：例6：該例在瀏覽器中將顯示如下：與指向網(wǎng)頁(yè)的鏈接的唯一區(qū)別在于：指向e-mail地址的鏈接必須以mailto:開頭，然后緊接著寫e-mail地址。當(dāng)點(diǎn)擊這個(gè)鏈接的時(shí)候，缺省的e-mail程序?qū)⑿陆ㄒ环忄]件，其中的收件人地址為鏈接中指定的e-mail地址。注意：這一功能僅當(dāng)你的計(jì)算機(jī)安裝了e-mail程

32、序后才起作用。試試看吧！有其他我需要知道的屬性嗎？創(chuàng)建鏈接總要用到href屬性。另外，你也可以在鏈接上使用title屬性：例7：該例在瀏覽器中將顯示如下：title屬性用于為該鏈接輸入一個(gè)簡(jiǎn)短描述。當(dāng)你把鼠標(biāo)光標(biāo)停留在該鏈接上（別點(diǎn)擊它）時(shí)，提示文字“上網(wǎng)站學(xué)習(xí)HTML”便會(huì)出現(xiàn)。第9課：圖像假如能把影歌兩棲傳奇人物David Hasselhoff的圖像放到自己的網(wǎng)頁(yè)上，那就太好了。這貌似有點(diǎn)難度。也許是有點(diǎn)難度，但其實(shí)也不難，一個(gè)元素就可以搞定：例1：該例在瀏覽器中將顯示如下：你要做的只是：首先告訴瀏覽器你要插入一

33、張圖片（img），接著給出這張圖片的存放位置（src，代表“來源（source）”）就行了。準(zhǔn)備好圖片了嗎？注意：img元素沒有尾標(biāo)簽，它與一樣，不與特定的文本相關(guān)?！癲avid.jpg”是要插入的圖片的文件名，其中的“jpg”表明圖片類型。就像后綴名“htm”代表文件是HTML文檔一樣，后綴名“jpg”表明文件是一個(gè)圖片文件。有三種類型的圖片文件可被插入網(wǎng)頁(yè)中： GIF（Graphics Interchange Format，圖形交換格式） JPG或JPEG（Joint Photographic Experts Group，聯(lián)合圖像專家組） PNG（Portable Network Grap

34、hics，可移植網(wǎng)絡(luò)圖像）一般來說，GIP是圖形和圖畫的最佳格式，而JPEG格式則更適合存放照片。原因有二：第一，GIF格式只支持256色，而JPEG格式支持?jǐn)?shù)百萬(wàn)色；第二，GIF格式擅長(zhǎng)于壓縮簡(jiǎn)單圖像，而JPEG則更適于壓縮復(fù)雜圖像。壓縮率越高，圖像文件就越小，頁(yè)面加載速度就越快。也許你也有同感，包含太多無用內(nèi)容的網(wǎng)頁(yè)是很不受歡迎的。過去，GIF和JPEG是兩大主要的圖像格式，但是最近PNG格式也開始流行起來（主要是在取代GIF格式）。PNG格式擁有許多JPEG與GIF的共同優(yōu)點(diǎn)：支持?jǐn)?shù)百萬(wàn)色，且壓縮效果好。圖片從何處獲得？要制作自己的圖像，需要有一個(gè)圖像編輯程序。圖像編輯程序是從事美觀的網(wǎng)

35、頁(yè)制作所需的重要工具之一。不幸的是Windows或其他操作系統(tǒng)都沒有自帶比較好的圖片編輯程序。所以，也許你得買一個(gè)Paint Shop Pro、PhotoShop或者M(jìn)acromedia Fireworks，這三個(gè)是目前市場(chǎng)上最好的圖像編輯軟件。不過還是那句話，完成本教程的學(xué)習(xí)不需要購(gòu)買任何昂貴的軟件。你可以先下載一個(gè)Irfan View用，這是一個(gè)很不錯(cuò)的圖像編輯軟件。因?yàn)槭亲杂绍浖?，所以你可以免費(fèi)使用它?；蛘?，你也可以從我們網(wǎng)站下載一些圖片來用，但請(qǐng)注意不要違反有關(guān)版權(quán)規(guī)定。具體下載方法如下：1. 右擊網(wǎng)頁(yè)中的圖像。 2. 在菜單中選擇“圖片另存為.”。 3. 選

36、擇圖片的存放位置，然后點(diǎn)擊“保存”。按此方法將下面的圖片保存到你的HTML文檔所在目錄。（注意：將它保存為PNG文件，文件名為logo.png）：現(xiàn)在你可以把這個(gè)圖片插入到自己的網(wǎng)頁(yè)里。自己試試看。關(guān)于圖像就這么多嗎？關(guān)于圖像，還有一些是需要介紹的。首先，你可以輕易地把存放在其他文件夾、甚至其他網(wǎng)站的的圖片插入到自己的網(wǎng)頁(yè)中。例2：例3：其次，圖片也可以作為鏈接：例4：該例在瀏覽器中將顯示如下（你可以試試看點(diǎn)擊這個(gè)圖像）：有什么屬性需要了解的嗎？你總要用src屬性來告訴瀏覽器圖片的存放位置。除此以外，還有一些有用的屬性。alt屬性用于給出圖像的替用描述，假如由于某些原因該圖像未能顯示出來，瀏覽

37、器就通過顯示這個(gè)描述來替代圖像。對(duì)于有視力障礙的人士來說，或者當(dāng)網(wǎng)頁(yè)打開很慢的時(shí)候，這一特性顯得尤為重要。所以說，始終記得寫alt屬性：例5：有些瀏覽器會(huì)在鼠標(biāo)光標(biāo)移到圖像上時(shí)顯示出alt屬性的文本。但是，在使用alt屬性時(shí)請(qǐng)注意，該屬性的目的是為圖片提供一個(gè)替用描述，有視力障礙的人士會(huì)利用alt屬性來聽取有關(guān)圖片的描述，所以不要將該屬性用于顯示文本提示那是title屬性的功能。例6：該例在瀏覽器中將顯示如下：如果你把鼠標(biāo)光標(biāo)停留在該圖片上（別點(diǎn)擊它），提示文字“上網(wǎng)站學(xué)習(xí)HTML”便會(huì)出現(xiàn)。另外兩個(gè)重要的屬性是width和height：例7：該例在瀏覽器中將顯示如下

38、：width和height屬性分別用于設(shè)置圖像的寬度和高度，以像素為單位。像素（pixel）是用于測(cè)量屏幕分辨率的計(jì)量單位。（目前大多數(shù)屏幕分辨率是1024768或更高）。像素跟公分不同，像素是一種相對(duì)計(jì)量單位，一個(gè)像素的實(shí)際大小跟屏幕分辨率有關(guān)。在高分辨率顯示模式下，差不多25個(gè)像素等于1公分；而在低分辨率顯示模式下，同樣的25個(gè)像素大約等于1.5公分。如果你沒有為圖像設(shè)置寬度和高度，它將按原始尺寸顯示。但是如果設(shè)置了的話，你就可以控制它的顯示尺寸：例8：該例在瀏覽器中將顯示如下：但是值得注意的是，雖然可以通過設(shè)置高度和寬度來控制圖片的顯示尺寸，但圖片文件的實(shí)際大小不會(huì)因此而發(fā)生變化。所以，

39、不要指望通過設(shè)置圖片的寬度和高度來減小圖片文件的大小。相反，你應(yīng)該在圖像編輯程序中來調(diào)整圖片文件的大小，以加快頁(yè)面加載速度。不過width和height屬性還是有用的，它們可以在圖片被完全下載之前令瀏覽器知道該用多大的空間來顯示圖片。這令瀏覽器可以更快顯示出美觀的頁(yè)面。 關(guān)于圖像就說這么多了。第10課：表格表格用來顯示“表列數(shù)據(jù)(tabular data)”，也就是那些邏輯上以行和列顯示的信息。表格難學(xué)嗎？對(duì)于初學(xué)者來說，在HTML中創(chuàng)建表格似乎比較復(fù)雜，不過只要耐心細(xì)致地觀察，你就會(huì)發(fā)現(xiàn)表格實(shí)際上與其它HTML元素相似，也具有嚴(yán)格的邏輯結(jié)構(gòu)。例1：?jiǎn)卧?單元格2單元格3單元格4該例在瀏覽器中將顯示如下：?jiǎn)卧?單元格2和有什么區(qū)別？上例可能是到目前為止你見過的最復(fù)雜的HTML例子，現(xiàn)在讓我們來逐一解釋其中的各個(gè)標(biāo)簽的含義：用于創(chuàng)建表格的3個(gè)基本元素是： 首標(biāo)簽和尾標(biāo)簽分別表示一個(gè)表格的開始與結(jié)束。這是不難理解的。 tr是“table row（表格行）”的縮寫，用于表示一行的開始和結(jié)束