電子發(fā)燒友App
網(wǎng)頁(yè)的工作原理
引言
您曾經(jīng)對(duì)網(wǎng)頁(yè)的原理感到好奇嗎？您曾經(jīng)想過(guò)要?jiǎng)?chuàng)建自己的有標(biāo)題、文本和圖形圖標(biāo)的完整網(wǎng)頁(yè)嗎？您曾經(jīng)聽(tīng)說(shuō)過(guò)“HTML”這個(gè)詞并想知道是什么意思嗎？如果是這樣，請(qǐng)往下閱讀……
在本文中，我們將探討網(wǎng)頁(yè)的科學(xué)和藝術(shù)，并用一些技巧來(lái)實(shí)驗(yàn)一番，今天在您自己的計(jì)算機(jī)上就可以試用這些技巧。我們已經(jīng)創(chuàng)建一個(gè)工具，可讓您試用HTML并立即查看其效果。原來(lái)，創(chuàng)建網(wǎng)頁(yè)是件很容易的事情，同時(shí)又非常有趣，根本不是高不可攀。到您讀完這篇文章時(shí)，您就能胸有成竹地開(kāi)始構(gòu)建您自己的頁(yè)面了！
基礎(chǔ)準(zhǔn)備知識(shí)
此時(shí)，以下幾點(diǎn)您已經(jīng)做好了準(zhǔn)備：
- 您正坐在計(jì)算機(jī)前。
- 您正在使用網(wǎng)絡(luò)瀏覽器閱讀本頁(yè)，瀏覽器可能是Microsoft Internet Explorer、Firefox或Netscape。
- 您希望學(xué)習(xí)網(wǎng)頁(yè)的工作原理，也許您希望學(xué)習(xí)創(chuàng)建自己頁(yè)面的藝術(shù)。
因?yàn)槟谟?jì)算機(jī)前，您有網(wǎng)絡(luò)瀏覽器，有學(xué)習(xí)的渴望，所以您已經(jīng)具備開(kāi)始創(chuàng)建頁(yè)面所需要的一切。您可以學(xué)習(xí)HTML并用您的網(wǎng)絡(luò)瀏覽器來(lái)實(shí)驗(yàn)，從而學(xué)會(huì)如何創(chuàng)建您能想象得出的任何種類(lèi)的網(wǎng)頁(yè)。
為了能討論網(wǎng)頁(yè)和研究網(wǎng)頁(yè)的工作原理，您可能希望了解4個(gè)簡(jiǎn)單的術(shù)語(yǔ)（如果您在第一次讀到這些術(shù)語(yǔ)時(shí)覺(jué)得晦澀難懂，不要擔(dān)心）：
- 網(wǎng)頁(yè)——網(wǎng)頁(yè)是一個(gè)簡(jiǎn)單的文本文件，它不僅包含文本，而且包含一套HTML標(biāo)記，這些標(biāo)記說(shuō)明了當(dāng)瀏覽器在屏幕上顯示頁(yè)面時(shí)，該文本應(yīng)該有什么樣的格式。標(biāo)記是一些簡(jiǎn)單的指令，能告訴網(wǎng)絡(luò)瀏覽器在顯示頁(yè)面時(shí)該頁(yè)面看起來(lái)應(yīng)該是什么樣的。標(biāo)記能告訴瀏覽器做一些事，諸如改變字體大小或顏色，或在欄目中安排內(nèi)容。網(wǎng)絡(luò)瀏覽器能解釋這些標(biāo)記，從而判斷如何格式化文本并在屏幕上顯示。
- HTML——HTML代表“超文本標(biāo)記語(yǔ)言”?！皹?biāo)記語(yǔ)言”是一種計(jì)算機(jī)語(yǔ)言，它說(shuō)明如何格式化頁(yè)面。如果您想做的一切僅僅是顯示一長(zhǎng)串黑白文本，沒(méi)有任何格式，那就不需要HTML。但是如果您想改變字體、添加顏色、創(chuàng)建標(biāo)題和在頁(yè)面中鑲嵌圖形，那么HTML就是用來(lái)實(shí)現(xiàn)這一切的語(yǔ)言。
- 網(wǎng)絡(luò)瀏覽器——網(wǎng)絡(luò)瀏覽器，例如Netscape Navigator或Microsoft Internet Explorer，是一個(gè)計(jì)算機(jī)程序（也稱(chēng)為軟件應(yīng)用程序，或簡(jiǎn)稱(chēng)應(yīng)用程序），它能做兩件事：
- 網(wǎng)絡(luò)瀏覽器知道如何訪(fǎng)問(wèn)互聯(lián)網(wǎng)上的網(wǎng)絡(luò)服務(wù)器并請(qǐng)求一個(gè)頁(yè)面，它能夠通過(guò)網(wǎng)絡(luò)將該頁(yè)面拉到您的計(jì)算機(jī)上。
- 網(wǎng)絡(luò)瀏覽器知道如何解釋頁(yè)面內(nèi)的一整套HTML標(biāo)記，以便按照頁(yè)面創(chuàng)建者的意圖把該頁(yè)面顯示在您的屏幕上。
- 網(wǎng)絡(luò)服務(wù)器——網(wǎng)絡(luò)服務(wù)器是一個(gè)計(jì)算機(jī)軟件，它能對(duì)瀏覽器索要頁(yè)面的請(qǐng)求做出回應(yīng)，并通過(guò)互聯(lián)網(wǎng)向網(wǎng)絡(luò)瀏覽器提供該頁(yè)面。您可以把網(wǎng)絡(luò)服務(wù)器想象成一座公寓大樓，在每個(gè)公寓房間里存放著某人的網(wǎng)頁(yè)。為了在公寓大樓里存儲(chǔ)您的頁(yè)面，您需要支付房租。存放在公寓大樓里的頁(yè)面可以向全世界的任何人展示，供他們查閱。您的房東稱(chēng)為主機(jī)，而您的房租通常稱(chēng)為托管費(fèi)。每天都有成百上千萬(wàn)臺(tái)網(wǎng)絡(luò)服務(wù)器通過(guò)我們稱(chēng)為互聯(lián)網(wǎng)的網(wǎng)絡(luò)向千千萬(wàn)萬(wàn)的人的瀏覽器提供頁(yè)面。有關(guān)這個(gè)過(guò)程的詳細(xì)信息，請(qǐng)參閱Web 服務(wù)器工作原理一文。
進(jìn)行網(wǎng)頁(yè)效果實(shí)驗(yàn)是一件非常容易的事情，不需要使用服務(wù)器。瀏覽器能在您的個(gè)人計(jì)算機(jī)上顯示您創(chuàng)建的網(wǎng)頁(yè)。一旦您了解了如何創(chuàng)建自己的頁(yè)面，很可能您希望把頁(yè)面“放到服務(wù)器上”，以便全世界的人都能下載和閱讀您的頁(yè)面。我們將在本文最后討論如何做到這一點(diǎn)。
查看源代碼
讓我們觀察一番網(wǎng)頁(yè)的“內(nèi)臟”。這是頁(yè)面作者鍵入的原始文本和HTML標(biāo)記，瀏覽器能解釋這些標(biāo)記并生成您在互聯(lián)網(wǎng)上實(shí)際看到的網(wǎng)頁(yè)?，F(xiàn)在用您的鼠標(biāo)右擊此頁(yè)面的任何空白部分并選擇“查看”。這時(shí)會(huì)出現(xiàn)一個(gè)新的窗口，顯示一些單詞和字符，有些可能看起來(lái)很專(zhuān)業(yè)和奇怪。這些單詞和字符統(tǒng)稱(chēng)HTML編程代碼，就是您將要學(xué)的東西。代碼中的每個(gè)元素稱(chēng)為HTML標(biāo)記。無(wú)論這些代碼看起來(lái)有多復(fù)雜，都不要害怕，您將驚訝地發(fā)現(xiàn)實(shí)際上它們是多么簡(jiǎn)單。如果您看著頁(yè)面的源代碼覺(jué)得一頭霧水，那就干脆關(guān)閉源代碼頁(yè)，返回本文好了。
用這種方式，您可以在互聯(lián)網(wǎng)上看到幾乎任何頁(yè)面“幕后”的東西。隨著對(duì)頁(yè)面設(shè)計(jì)的研究逐步深入，您可能發(fā)現(xiàn)您愿意查看復(fù)雜網(wǎng)頁(yè)的源代碼，以便弄清作者或頁(yè)面設(shè)計(jì)者究竟使用了什么代碼創(chuàng)建出如此巧妙的構(gòu)思。
現(xiàn)在讓我們學(xué)習(xí)許多標(biāo)記的含義并開(kāi)始創(chuàng)建簡(jiǎn)單的頁(yè)面。
HTML標(biāo)記
HTML標(biāo)記是一個(gè)代碼元素，它告訴頁(yè)面瀏覽器如何處理您的文本。每個(gè)標(biāo)記看上去就是放在<（小于號(hào)）和>（大于號(hào)）之間的字母或單詞。
示例：,
為了告訴網(wǎng)絡(luò)瀏覽器“結(jié)束”您要它做的事，要在結(jié)束標(biāo)記中使用斜杠：
示例：,
大多數(shù)標(biāo)記都由成對(duì)的“開(kāi)始”碼和“結(jié)束”碼組成，但不是絕對(duì)的。
您創(chuàng)建的任何網(wǎng)頁(yè)在開(kāi)始的地方都有以下標(biāo)記：
- ：告訴瀏覽器這是一個(gè)HTML文檔的開(kāi)始
- ：告訴瀏覽器這是頁(yè)面的頁(yè)眉（以后您將學(xué)到兩個(gè)“HEAD”標(biāo)記之間是什么內(nèi)容）
：告訴網(wǎng)絡(luò)瀏覽器這是頁(yè)面的標(biāo)題 <LI><BODY>：告訴網(wǎng)絡(luò)瀏覽器這是網(wǎng)頁(yè)內(nèi)容的起點(diǎn)，您想在頁(yè)面上說(shuō)和看的內(nèi)容都跟在這個(gè)標(biāo)記之后。 </LI></UL> <P>結(jié)束網(wǎng)頁(yè)所需要的標(biāo)記是： </P> <P> <UL> <LI></BODY> <LI></HTML> </LI></UL> <P><B>建立簡(jiǎn)單的頁(yè)面</B></P> <P>創(chuàng)建網(wǎng)頁(yè)的方法有很多種。成百上千的<a href="https://www.hqchip.com/gongsi.html" target="_blank"><u>公司</u></a>創(chuàng)建了各種工具，以各種方式來(lái)幫助完成這個(gè)過(guò)程。然而，我們?cè)谶@里的目標(biāo)是理解網(wǎng)頁(yè)的真正原理，而不是讓某個(gè)工具把頁(yè)面的創(chuàng)建過(guò)程掩蓋起來(lái)，不讓我們看到。因此，我們將使用盡可能簡(jiǎn)單的工具，這些工具在您的計(jì)算機(jī)上已經(jīng)存在。 </P> <P>在您的計(jì)算機(jī)上有一個(gè)程序，可以創(chuàng)建簡(jiǎn)單的文本文件。在Windows計(jì)算機(jī)上，該應(yīng)用程序叫做記事本。在Macintosh計(jì)算機(jī)上，該程序叫做<a href="https://m.hqchip.com/app/1522" target="_blank"><u>Sim</u></a>pleText。如果您找不到這些程序，也可以使用基本的文字處理程序，例如WordPe<a href="http://wenjunhu.com/tongxin/rf/" target="_blank"><u>rf</u></a>ect和Microsoft Word。 </P> <UL>注意： <LI>在Windows 95/98環(huán)境中，依次單擊“開(kāi)始”按鈕、“程序”、“附件”和“記事本”。 <LI>在Windows 3.1環(huán)境中，單擊“附件”（在“程序管理器”中），再單擊“記事本”。 <LI>在Macintosh環(huán)境中，依次單擊“Macintosh HD”、“應(yīng)用程序”和“SimpleText”。 </LI></UL> <P>一旦您在屏幕上打開(kāi)了適當(dāng)?shù)某绦颍?qǐng)?jiān)诖翱谥墟I入（或剪切并粘貼）以下HTML文本：<br></P><PRE><html> <br> <head> <br> <title>My Fi<a href="http://wenjunhu.com/tags/rs/" target="_blank"><u>rs</u></a>t Page
大家好。這是我的第一個(gè)頁(yè)面！
無(wú)論您把這些標(biāo)記和文本逐個(gè)排列、逐行排列還是縮進(jìn)排列，都不影響文本在瀏覽器窗口的顯示方式。在您的標(biāo)記中，無(wú)論使用大寫(xiě)字母還是小寫(xiě)字母，都不會(huì)造成什么差別。
現(xiàn)在您需要把這個(gè)文件保存在某個(gè)地方，以便能很快找到它。把它保存到桌面上，如果能保存到您專(zhuān)門(mén)為存放即將創(chuàng)建的頁(yè)面而創(chuàng)建的那個(gè)目錄中，則更好。用first.html文件名來(lái)保存。
下一步，在您的網(wǎng)絡(luò)瀏覽器中（即Microsoft Internet Explorer或Netscape Navigator）打開(kāi)此頁(yè)面。所有的網(wǎng)絡(luò)瀏覽器都有打開(kāi)存儲(chǔ)在本地計(jì)算機(jī)中的文件的方法。在Internet Explorer和Netscape中，從窗口頂部的“文件”菜單中選擇“打開(kāi)文件”。打開(kāi)first.html文件。當(dāng)您在瀏覽器中打開(kāi)該文件時(shí)，它看起來(lái)像這樣：
在這幅圖中可以發(fā)現(xiàn)三個(gè)特征：
- 您可以看到該頁(yè)面有標(biāo)題“我的第一個(gè)頁(yè)面”。
- 您可以看到該頁(yè)面的正文包含文字“大家好。這是我的第一個(gè)頁(yè)面！”
- 您可以看到在地址窗口中顯示的URL是來(lái)自本地硬盤(pán)的C:WINDOWSDESKTOPfirst.html，而不是通常從互聯(lián)網(wǎng)上的服務(wù)器收到頁(yè)面時(shí)所顯示的http://...。
通過(guò)觀察組成您的頁(yè)面的HTML文本，您可以確切地了解頁(yè)面是如何獲得標(biāo)題和正文的。
現(xiàn)在您已經(jīng)創(chuàng)建和查看了您的第一個(gè)網(wǎng)頁(yè)，并走上了成為頁(yè)面高手的成功之路。學(xué)會(huì)有關(guān)網(wǎng)頁(yè)制作的全部知識(shí)的關(guān)鍵是掌握越來(lái)越多的HTML標(biāo)記，這些標(biāo)記能讓您自定義您的頁(yè)面。您可能還想學(xué)習(xí)幫助您為頁(yè)面創(chuàng)建表格、框架和圖形的工具。本網(wǎng)頁(yè)知識(shí)系列講座將引導(dǎo)您學(xué)習(xí)所有您需要的信息。
基本HTML格式標(biāo)記
您將經(jīng)常使用本頁(yè)上的基本HTML標(biāo)記，它們能完成您在大多數(shù)網(wǎng)頁(yè)上看到的格式設(shè)置任務(wù)的90%。一旦您學(xué)會(huì)這些標(biāo)記，您就走上了成為HTML高手的成功之路！
在學(xué)習(xí)過(guò)程中，您用如下方法檢驗(yàn)?zāi)褂玫腍TML標(biāo)記：
- 如果您喜歡我們?cè)谏弦豁?yè)中討論過(guò)的“first.htm”文件，您可以把HTML鍵入其中并創(chuàng)建完整的網(wǎng)頁(yè)。請(qǐng)記住，要把您希望在網(wǎng)頁(yè)上顯示的所有信息放在和標(biāo)記之間。請(qǐng)通過(guò)添加新的標(biāo)記并查看其結(jié)果來(lái)實(shí)驗(yàn)?zāi)捻?yè)面。
讓我們開(kāi)始吧！
粗體、斜體和下劃線(xiàn)
- 通過(guò)添加以下標(biāo)記把任何一段文本變成粗體：
該標(biāo)記要放在文本的開(kāi)始，并在文本結(jié)尾添加以下標(biāo)記：
粗體屬性就到此結(jié)束。
這是粗體。 這是粗體。
- 若要設(shè)置斜體，則以同樣方式使用這對(duì)標(biāo)記：
.....
這是斜體。 這是斜體。
- 若要設(shè)置下劃線(xiàn)，則使用這對(duì)標(biāo)記：
.....
這是下劃線(xiàn)。 這是下劃線(xiàn)。
換行和段落
雖然您鍵入的文本可能包含回車(chē)、制表符和額外的空格，但是瀏覽器看不見(jiàn)它們。您必須使用標(biāo)記才能在HTML文檔中創(chuàng)建空白空間。
標(biāo)記在行與行之間起換行的作用。您可以使用多個(gè)這樣的標(biāo)記來(lái)創(chuàng)建空白空間。這一行
被斷開(kāi)。這一行
被斷開(kāi)。標(biāo)記能在文本的兩行之間創(chuàng)建額外的空間。如果把
標(biāo)記放在一行文本中，只能斷開(kāi)該行；如果使用標(biāo)記，則不僅斷開(kāi)該行，而且創(chuàng)建額外的空間。
這一行 被空白隔開(kāi)。
這一行 被空白隔開(kāi)。
標(biāo)記能創(chuàng)建水平標(biāo)尺或水平線(xiàn)。這是一條水平標(biāo)尺：
這是一條水平標(biāo)尺：
- 制表符
沒(méi)有可以在文檔內(nèi)創(chuàng)建一個(gè)“制表符”的正式的HTML標(biāo)記。許多站點(diǎn)設(shè)計(jì)人員創(chuàng)建表格或使用空白圖像來(lái)創(chuàng)建空間（表格和圖像將在本文后面加以說(shuō)明）。使文本縮進(jìn)的一種方法是使用- 標(biāo)記，以便讓瀏覽器認(rèn)為您要?jiǎng)?chuàng)建一個(gè)“列表”列表能自動(dòng)縮進(jìn)文本。結(jié)束時(shí)請(qǐng)使用
……
也能把文本縮進(jìn)。
另一個(gè)替代方法是標(biāo)記。這個(gè)標(biāo)記用來(lái)顯示預(yù)格式化文本，即“按原樣”顯示的文本。任何在
和
標(biāo)記內(nèi)創(chuàng)建的空白在瀏覽器中的顯示效果將與在源代碼中顯示的一樣。
- 改變字體顏色、類(lèi)型和大小
- 通過(guò)使用以下標(biāo)記來(lái)改變?nèi)魏挝谋镜念伾?
- 通過(guò)使用以下標(biāo)記來(lái)改變字體類(lèi)型：
...
This is arial. 這是Arial字體。 這是 geneva 字體。 這是Geneva字體。 （注意：如果您規(guī)定的字體在用戶(hù)的計(jì)算機(jī)中不能用，字體類(lèi)型會(huì)自動(dòng)改為瀏覽器的默認(rèn)字體，通常是Courier或Times New Roman字體，所以如果您希望控制在用戶(hù)瀏覽器中顯示的內(nèi)容，最好堅(jiān)持使用標(biāo)準(zhǔn)字體。）
- 通過(guò)使用以下標(biāo)記來(lái)改變?nèi)魏挝谋镜拇笮。?
...
示例：
在大多數(shù)瀏覽器上默認(rèn)的字體大小是“3”，所以任何比3大的值將使文本變大，而任何比3小的值將使文本變小。
您還可以通過(guò)增大或減小默認(rèn)字體的大小來(lái)改變字體大小。
示例：，或
此字體大小增加 2。 此字體大小增加 2。 此字體大小增加 1。 此字體大小增加 1。 此字體大小減少 2。 此字體大小減少 2。 此字體大小減少 1。 此字體大小減少 1。 您還可以通過(guò)使用標(biāo)記 和 來(lái)改變字體大小：
這是小文本。 這是小文本。 這是大 文本。 這是大文本。 標(biāo)題標(biāo)記也會(huì)改變字體大小，為段落或文章創(chuàng)建粗體“標(biāo)題”：
這是一個(gè)H1標(biāo)題。
這是一個(gè)H1標(biāo)題。 這是一個(gè)H2標(biāo)題。
這是一個(gè)H2標(biāo)題。 這是一個(gè)H3標(biāo)題。
這是一個(gè)H3標(biāo)題。 使用以下標(biāo)記可結(jié)束任何字體元素更改：
- 示例：，,
...
| 這是紅色。 | 這是紅色。 |
| 這是綠色。 | 這是綠色。 |
大多數(shù)標(biāo)準(zhǔn)顏色都能使用。請(qǐng)嘗試“淺色”和“深色”，如“淺藍(lán)”或“深綠”。您還可以指定一個(gè)特定的十六進(jìn)制顏色號(hào)碼，例如：.要獲得十六進(jìn)制顏色代碼的列表，請(qǐng)?jiān)L問(wèn)December.com:HTML。
如果您想為頁(yè)面的整個(gè)文本分配一種特定顏色，則把text="color" 標(biāo)記添加到
標(biāo)記之內(nèi)。示例：
即使您為整個(gè)文本分配了顏色，您仍可以通過(guò)使用在上面學(xué)過(guò)的標(biāo)記來(lái)改變文本中任何部分的顏色。
- 創(chuàng)建背景顏色
- 加利福尼亞
- 俄勒岡
- 北卡羅萊納
- （是List Item的縮寫(xiě)）用于列表中每個(gè)項(xiàng)目之前。結(jié)束標(biāo)記
- 加利福尼亞
- 俄勒岡
- 北卡羅萊納
- 加利福尼亞
- 俄勒岡
- 北卡羅來(lái)納
- 加利福尼亞
- 俄勒岡
- 北卡羅萊納
- 柑桔
- 葡萄
- 櫻桃
- 用于每一個(gè)項(xiàng)目之前。
示例：
- 柑桔
- 葡萄
- 櫻桃
您可以改變組織的類(lèi)型，方法是在
- 標(biāo)記之內(nèi)添加一個(gè)“類(lèi)型”名稱(chēng)。
-
說(shuō)明性列表創(chuàng)建文本項(xiàng)目的列表，第二行縮進(jìn)：
- Marshall Brain
- HowStuffWorks公司的創(chuàng)始人
請(qǐng)以這種方式使用以下標(biāo)記：
- Marshall Brain
- HowStuffWorks公司的創(chuàng)始人
- 標(biāo)記應(yīng)該與您希望在頁(yè)邊排列的文本對(duì)應(yīng)；而
- 標(biāo)記則與您希望縮進(jìn)的行對(duì)應(yīng)。
與其他站點(diǎn)鏈接
網(wǎng)頁(yè)的最重要的優(yōu)點(diǎn)之一是它能夠創(chuàng)建與網(wǎng)上的其他頁(yè)面的鏈接。如果使用以下的錨定標(biāo)記，您可以引用其他人的作品、指向您喜歡的其他頁(yè)面，等等：
在錨定標(biāo)記后鍵入該頁(yè)面的名稱(chēng)，然后用以下標(biāo)記結(jié)束錨定：
示例：
這是在您的頁(yè)面上看到的效果：
博聞網(wǎng)
您還可以很容易地把帶項(xiàng)目符號(hào)的列表與鏈接結(jié)合起來(lái)，創(chuàng)建一個(gè)鏈接列表。
新窗口
如果您不希望您的訪(fǎng)客單擊了轉(zhuǎn)向另一個(gè)站點(diǎn)的鏈接后離開(kāi)您的頁(yè)面，可在您的錨定標(biāo)記上添加以下標(biāo)記。這樣當(dāng)單擊該鏈接時(shí)就不會(huì)讓訪(fǎng)客離開(kāi)您的站點(diǎn)而轉(zhuǎn)向別人的站點(diǎn)，而是僅僅打開(kāi)一個(gè)新的空白窗口顯示該鏈接的目的地：target="_blank"
鏈接的顏色
標(biāo)記之內(nèi)：
藍(lán)色是鏈接用的標(biāo)準(zhǔn)默認(rèn)顏色。但是您可以改變頁(yè)面上所鏈接信息的顏色，方法是把以下標(biāo)記插入到您的- link="color"
- vlink="color"
Vlink代表“受訪(fǎng)鏈接”。當(dāng)有人訪(fǎng)問(wèn)這些鏈接時(shí)，鏈接會(huì)改變顏色。如果您不希望受訪(fǎng)鏈接改變顏色，只需給鏈接和受訪(fǎng)鏈接賦予相同的顏色屬性。
示例：
創(chuàng)建接收電子郵件的鏈接
如果您希望收到閱讀您的頁(yè)面的人發(fā)來(lái)的電子郵件，可使用以下錨定標(biāo)記：然后在該標(biāo)記后再次鍵入您的郵件地址（或您希望在頁(yè)面上顯示的任何鏈接文本）。用以下標(biāo)記結(jié)束該字符串：
示例：
這是在您的頁(yè)面上看到的效果：
請(qǐng)給我發(fā)郵件
創(chuàng)建與您自己的頁(yè)面的鏈接
錨定標(biāo)記不僅用于與互聯(lián)網(wǎng)上的頁(yè)面鏈接。您還可以用錨定標(biāo)記與您自己頁(yè)面上的信息建立鏈接。在以下示例中，您可以省略前綴“http://www”，而只包括html文檔的文件名：示例：公司信息
若要鏈接到您的頁(yè)面的特定部分，則需要為您所指的那個(gè)部分命名，并把該名稱(chēng)包括在鏈接的錨定標(biāo)記之內(nèi)。具體的實(shí)現(xiàn)方法如下：
為您的頁(yè)面的某個(gè)部分命名，方法是把以下標(biāo)記插入到您希望鏈接指向的部分之前。您可以選擇任何單詞、字母或字符作為該部分的名稱(chēng)：
在錨定標(biāo)記中，可通過(guò)在名稱(chēng)前加一個(gè)“#”來(lái)指向您的頁(yè)面的這一部分。如果已命名的鏈接指向頁(yè)面中包含此鏈接的位置，與該已命名部分鏈接的錨定標(biāo)記看起來(lái)將是這樣：
如果已命名的鏈接指向一個(gè)html文檔，且該文檔獨(dú)立于鏈接所在的頁(yè)面，則也應(yīng)包括該html文檔的文件名。
示例：公司信息
添加圖像和圖形
可使用以下標(biāo)記把任何數(shù)字圖像放到您的頁(yè)面上：
網(wǎng)頁(yè)上的圖像或者是GIF文件（英文發(fā)音是“jiff”）或者是JPG文件（英文發(fā)音是“jay-peg”）。任何圖像都會(huì)包含這兩種擴(kuò)展名中的一個(gè)，所以如果您有一個(gè)圖像名叫“l(fā)ogo”，它的文件名將是“l(fā)ogo.gif”或“l(fā)ogo.jpg”。
一定要把您打算在網(wǎng)頁(yè)上顯示的圖像和圖形存儲(chǔ)在您存儲(chǔ)“html”文件的同一個(gè)文件夾或目錄中。否則您的計(jì)算機(jī)在尋找您希望顯示的圖片時(shí)會(huì)遇到麻煩。還有，在鍵入圖片名稱(chēng)時(shí)要確保嚴(yán)格遵守它在文件夾中保存時(shí)用的文件名，因?yàn)槲募麑?duì)大小寫(xiě)很敏感。
對(duì)齊
在默認(rèn)情況下，文本和圖像在瀏覽器中顯示時(shí)使用左對(duì)齊，即文本和圖形自動(dòng)靠左側(cè)頁(yè)邊上對(duì)齊。如果您希望把頁(yè)面的任何部分“居中”，可使用以下標(biāo)記：若要結(jié)束居中，可以使用相應(yīng)的結(jié)束標(biāo)記：
您還可以為各種“片段”（即從一個(gè)詞、一行文本到整個(gè)頁(yè)面的任何內(nèi)容）進(jìn)行編碼，讓這些片段按一定的方式對(duì)齊。
在片段的開(kāi)始處放片段對(duì)齊標(biāo)記，包括您希望的或圖像要采取的對(duì)齊方式（即右對(duì)齊、左對(duì)齊、居中）：
示例：
用以下標(biāo)記結(jié)束片段對(duì)齊：
使用您在本文中剛學(xué)到的信息，您可以開(kāi)始創(chuàng)建很有趣、很吸引人的網(wǎng)頁(yè)了。嘗試一下，用我們剛討論過(guò)的工具和標(biāo)記來(lái)創(chuàng)建一兩個(gè)網(wǎng)頁(yè)。如果您急于讓全世界的人欣賞您的杰作，可以跳到“把您的頁(yè)面放到網(wǎng)上”一文來(lái)學(xué)習(xí)如何發(fā)布您的新網(wǎng)頁(yè)。
創(chuàng)建表格
目前，為了創(chuàng)建編排得富有藝術(shù)性的網(wǎng)頁(yè)，有一個(gè)廣泛使用的HTML工具，那就是表格。如果掌握了表格，您就不再是“創(chuàng)建”頁(yè)面，您是在“設(shè)計(jì)”頁(yè)面。
表格的種類(lèi)繁多，從簡(jiǎn)單的方框到很復(fù)雜的設(shè)計(jì)布局，任您挑選。在本文中，我們將討論表格的基礎(chǔ)知識(shí)，并在您探索如何設(shè)計(jì)出人們喜愛(ài)訪(fǎng)問(wèn)的漂亮頁(yè)面的過(guò)程中，為您提供幾個(gè)竅門(mén)供您實(shí)驗(yàn)。
與您希望在瀏覽器窗口顯示的所有信息一樣，要確保在HTML文檔中把表格放在
和這對(duì)標(biāo)記之間。表格應(yīng)從以下標(biāo)記開(kāi)始：表格中的每個(gè)水平行應(yīng)從以下標(biāo)記開(kāi)始：
而行內(nèi)的每條數(shù)據(jù)應(yīng)從以下標(biāo)記開(kāi)始：
請(qǐng)研究以下圖表：
A1 A2 B1 B2 C1 C2 這里我們有3行和2列。
為了給此圖表的基本結(jié)構(gòu)編碼，應(yīng)按以下順序使用以下標(biāo)記：
開(kāi)始畫(huà)表格 開(kāi)始畫(huà)第一行 開(kāi)始畫(huà)數(shù)據(jù)的第一個(gè)“單元格”（A1） 結(jié)束A1單元格 開(kāi)始畫(huà)第二個(gè)單元格（A2） 結(jié)束A2單元格 結(jié)束第一行 開(kāi)始畫(huà)第二行 開(kāi)始畫(huà)第二行的第一個(gè)數(shù)據(jù)單元格（B1） 結(jié)束B(niǎo)1單元格 開(kāi)始畫(huà)B2單元格 結(jié)束B(niǎo)2單元格 結(jié)束第二行 開(kāi)始畫(huà)第三行 開(kāi)始畫(huà)第三行的第一個(gè)數(shù)據(jù)單元格（C1） 結(jié)束C1單元格 開(kāi)始畫(huà)C2單元格 結(jié)束C2單元格 結(jié)束第三行 結(jié)束表格 許多設(shè)計(jì)人員喜歡把表格的各部分縮進(jìn)一些，以便使編碼更易于閱讀。下面顯示的是這方面的一個(gè)示例。
現(xiàn)在我們來(lái)為表格的基本結(jié)構(gòu)添加邊框。邊框是表格的輪廓。邊框標(biāo)記 （border="value"）放在初始表格標(biāo)記內(nèi)。您可以通過(guò)分配一個(gè)特定值（我們將分配“1”）來(lái)規(guī)定輪廓線(xiàn)的粗細(xì)。一個(gè)很好的做法是用不同的值來(lái)實(shí)驗(yàn)，以便弄清在瀏覽器中的實(shí)際顯示效果。如果您不希望顯示邊框，則把輪廓線(xiàn)值分配為“0”。
（注意：即使您不打算在表格周?chē)霈F(xiàn)邊框，開(kāi)始的時(shí)候也最好有可見(jiàn)的邊框，并將其至少保持到您將所有可能影響表格顯示效果的“錯(cuò)誤”排除掉為止。）
把以下代碼和數(shù)據(jù)鍵入（或剪切并粘貼）到您的HTML文檔中：
A1
A2
B1
B2
C1
C2
在瀏覽器中顯示的表格應(yīng)該看起來(lái)很像早些時(shí)候顯示的圖表。
您可以為表格分配很多屬性。下面要討論的一些標(biāo)記可以讓您用很多創(chuàng)造性的方式來(lái)設(shè)置表格的格式。
改變表格的背景顏色
通過(guò)在初始的“table”標(biāo)記內(nèi)使用“bgcolor”標(biāo)記來(lái)改變整個(gè)表格背景的顏色：
示例：
也可以為表格內(nèi)的行或單元格分配彩色背景。只要把bgcolor="color" 添加到
或 標(biāo)記中即可為表格的特定部分著色。 示例：
表格大小
表格中的行和列的寬度和高度會(huì)自動(dòng)擴(kuò)大，以便與數(shù)據(jù)的長(zhǎng)度或?yàn)g覽器窗口的空間大小相匹配。若要規(guī)定表格的寬度和高度，把像素或百分比值包括在開(kāi)始的“table”標(biāo)記中即可：示例：
與規(guī)定整個(gè)表格相同，還可以為個(gè)別的數(shù)據(jù)單元格規(guī)定寬度和高度。要做到這一點(diǎn)，把width="value" 標(biāo)記添加到所需單元格的
或 標(biāo)記中即可。 一個(gè)很好的做法是用不同的像素和百分比值來(lái)實(shí)驗(yàn)，以便弄清在瀏覽器中的實(shí)際顯示效果。
單元格邊距
“cellpadding”標(biāo)記規(guī)定了每個(gè)單元格的邊線(xiàn)與單元格內(nèi)的數(shù)據(jù)之間空白的大?。ㄒ韵袼貫閱挝唬?。在開(kāi)始的“table”標(biāo)記內(nèi)使用該標(biāo)記：示例1：
此表格的單元格邊距為 “5”個(gè)像素 示例2：
此表格的單元格邊距為 “15”個(gè)像素 單元格間距
“cellspacing”標(biāo)記規(guī)定各個(gè)單元格之間的空間大?。ㄒ韵袼貫閱挝唬?。在“table”標(biāo)記內(nèi)使用該標(biāo)記：示例1：
此表格的單元格邊距為 “5”個(gè)像素。 示例2：
此表格的單元格邊距為 “15”個(gè)像素。 表格標(biāo)題
若要為表格內(nèi)的列或行創(chuàng)建一個(gè)粗體和居中的“標(biāo)題”，可使用標(biāo)記來(lái)代替為第一行編碼的 標(biāo)記。 示例：
列1
列2
A
B
C
D
效果是這樣的：
列1 列2 A B C D 對(duì)齊和單元格跨度
在默認(rèn)狀態(tài)下，表格內(nèi)所有單元格的內(nèi)容（表格標(biāo)題除外）均是垂直居中、左對(duì)齊。若要使單元格的內(nèi)容以不同方式對(duì)齊，應(yīng)把以下標(biāo)記應(yīng)用到
、 或 標(biāo)記之內(nèi)： 對(duì)于水平對(duì)齊，不同的值可以實(shí)現(xiàn)左對(duì)齊、右對(duì)齊或居中：
- 示例：
對(duì)于垂直對(duì)齊，不同的值可以實(shí)現(xiàn)頂部對(duì)齊、底部對(duì)齊或中間對(duì)齊：
- 示例：
您還可以安排整個(gè)表格的對(duì)齊方式來(lái)決定其在頁(yè)面上出現(xiàn)的位置。通過(guò)把標(biāo)記
單元格跨度
當(dāng)表格中一個(gè)單元格跨越兩個(gè)或更多的其他單元格時(shí)，就發(fā)生“單元格跨度”。列跨度的一個(gè)示例：此單元格跨越兩列 此單元格跨越一列 A B C 在應(yīng)用
標(biāo)記之內(nèi)。以下是為上面示例所寫(xiě)的代碼：
此單元格跨越兩列
此單元格跨越一列
A
B
C
行跨度的示例：
此單元格跨越兩行 A B C D 在應(yīng)用
標(biāo)記之內(nèi)。以下是為上面示例所寫(xiě)的代碼：
此單元格跨越兩行
A
B
C
D
您在表格中還可以應(yīng)用我們?cè)谏弦徽吕飳W(xué)過(guò)的許多屬性，例如字體的大小、類(lèi)型和顏色，插入圖像，制作列表和添加鏈接。只要在您想設(shè)定格式的那個(gè)特定單元格的
標(biāo)記后添加適當(dāng)?shù)臉?biāo)記即可。 請(qǐng)使用您在本文中學(xué)過(guò)的各種工具和標(biāo)記來(lái)做實(shí)驗(yàn)和練習(xí)。人們?cè)诰W(wǎng)頁(yè)上使用表格時(shí)，創(chuàng)新的可能性是無(wú)窮盡的。您可以疊加圖像和無(wú)邊框的彩色方框來(lái)創(chuàng)建天衣無(wú)縫的設(shè)計(jì)，或者在無(wú)邊框的表格中嵌套無(wú)邊框的表格，有些有顏色，有些沒(méi)有顏色，以便創(chuàng)建引人注目的布局。只要發(fā)揮一點(diǎn)想象力、創(chuàng)造性并使用表格，網(wǎng)頁(yè)設(shè)計(jì)就會(huì)開(kāi)拓一片新天地。
創(chuàng)建框架一些頁(yè)面設(shè)計(jì)人員出于設(shè)計(jì)需要和為使站點(diǎn)顯得對(duì)用戶(hù)更加友好，在頁(yè)面上使用了框架?？梢哉f(shuō)，框架使瀏覽站點(diǎn)更方便，并且不會(huì)丟失您原先所在的位置。當(dāng)單擊一個(gè)鏈接時(shí)，如果網(wǎng)頁(yè)的一部分保持靜態(tài)而同一頁(yè)面的另一部分卻改變了，就可以確定網(wǎng)頁(yè)中使用了框架。若要查閱帶框架的網(wǎng)頁(yè)的功能，請(qǐng)?jiān)L問(wèn)The Birch Aquarium頁(yè)面。
在The Birch Aquarium頁(yè)面上，頂部和最底部保持不變，而中部可根據(jù)所選擇的鏈接而變化。該頁(yè)面分成3個(gè)框架，也就是說(shuō)，3個(gè)不同的HTML文檔在同一時(shí)間顯示。您可以按照您的愿望來(lái)選擇把頁(yè)面分成幾部分，以什么方式來(lái)劃分，以及在每個(gè)框架中包括什么樣的HTML文檔。
首先要很好地規(guī)劃您的頁(yè)面，這一點(diǎn)很重要。應(yīng)根據(jù)行和列來(lái)考慮布局。您希望顯示幾個(gè)水平部分（行）？幾個(gè)垂直部分（列）？您估計(jì)每個(gè)部分需要多少空間（像素或百分比）？
框架集文檔
框架集文檔是一個(gè)HTML文檔，它指示瀏覽器按特定的方式安排網(wǎng)頁(yè)的內(nèi)容。在框架集文檔中，“frameset”標(biāo)記取代了“body”標(biāo)記。您可以用通常的HTML格式開(kāi)始編寫(xiě)框架集文檔：
標(biāo)題 下一步，插入“frameset”標(biāo)記：
示例：
- 讓列表按大寫(xiě)字母排序：(A, B, C...)
- 讓列表按小寫(xiě)字母排序：(a, b, c...)
- 讓列表按羅馬數(shù)字排序：(I, II, III...)
- 讓列表按小羅馬數(shù)字排序：(i, ii, iii...)
如果您希望用一個(gè)指定值（例如“6”）來(lái)開(kāi)始您的有序列表，可使用以下“開(kāi)始”和“值”標(biāo)記：
- 柑桔
通過(guò)把bgcolor="color" 標(biāo)記添加到
標(biāo)記之內(nèi)來(lái)改變您的頁(yè)面背景顏色。示例：
與本節(jié)中說(shuō)明的改變字體顏色一樣，您可以使用大多數(shù)標(biāo)準(zhǔn)顏色，或使用十六進(jìn)制顏色代碼。
創(chuàng)建列表
您可以創(chuàng)建3種類(lèi)型的列表：無(wú)序列表、有序列表和說(shuō)明性列表
無(wú)序列表看起來(lái)像這樣：
- 開(kāi)始。標(biāo)記
示例：
項(xiàng)目符號(hào)的類(lèi)型可以改成“圓圈”、“方塊”或“圓盤(pán)”，方法是在
- 標(biāo)記之內(nèi)添加具體說(shuō)明：
|
|
有序列表看起來(lái)像這樣：
- 和