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