HTML語言是網頁的源代碼程序語言，我們平時看到的花花綠綠形形色色的網頁，它并不是想象中的電影海報那樣，將文字和圖片簡單拼接，像貼畫一樣就可以貼成的，而是通過HTML源程序來具體規定網頁的排版方式、網頁顯示的內容。
HTML的全名是HyperText?Markup?Language，直譯就是超文本標記語言。從這個名字上來講，一、它是文本，它在網上就是以文本的方式傳輸的；二、它是一種標記性質的語言。這個深入之后就可以體會到所謂“標記”的真正含義。
在這里我只介紹基礎的簡單的HTML語言不詳細展開，可以參考詳細的書籍資料。
HTML編輯的方法很簡單，正因為是文本，你可以用任何文本編輯工具來編寫HTML源代碼，比如最常用的就是WINDOWS的“記事本”。當然，在你保存的時候不能保存為單純的文本文件，而要選擇保存為“網頁”，在“記事本”中你可以這樣保存，選擇“另存為”，保存類型為“任何文件”，文件名加上“.html”或者“.htm”的擴展名就行了，這兩個擴展名表示文件類型為網頁文件。
HTML是一種文本語言，所以，你所輸入的文本信息，是會直接顯示給大家看到的，而標記的部分，只是作為限定文本顯示的方式而已，我們舉個例子：
首先我們希望在網頁上顯示“歡迎”這兩個字，那要怎么它才會顯示呢？很簡單，你直接在網頁文件中寫入“歡迎”，這兩個字就會顯示出來了，但是我們并不滿足，我們希望這兩個字能夠顯示的顯眼一點，所以可以用一個加粗的標記：<b>歡迎</b>，再打開網頁的時候我們發現歡迎已經顯示為加粗了。我們用了一對<b>...</b>標簽來限定了“歡迎”這兩個字的顯示方式——加粗，幾乎所有的HTML標記都是這個樣子，不同的標簽其實就是對文本不同方式的限定而已，所以，到這里我想你能明白為什么把它叫做“標記語言”的原因了吧?。
加粗標簽<b>...</b>只是我們最常用的也是最簡單的一個標簽而已，不同功能的標簽，我們根據功能來分類：頂級標簽、文本標簽、圖片媒體標簽、表格排版標簽、框架標簽還有表單標簽，不明白不要緊，我會一一介紹給大家的。
今天我們就來談談這頂級標簽
頂級標簽是用來說明文檔的基本信息用的，主要包括這幾個：<html>...</html>、<head>...</head>、<body>...</body>
1.<html>...</html>標簽
作用：說明該文檔是一個HTML網頁文檔
這個是最主要的標簽，它表示其中的內容是HTML源代碼，所以，其他的源代碼、標簽都位于這個標簽以內。
2.<head>...</head>
作用：頭部標簽，這個標簽用來存放文檔的基本信息，僅僅作為說明用的，所以在網頁中一般都不顯示
3.<body>...</body>
作用：這個才是主題部分，是網頁內容顯示，所有網頁中的主體內容均包含在這個標簽以內。
仍然用我們剛才的那個例子，一個顯示加粗的歡迎字樣的網頁，可以這樣來編寫：
程序代碼：?[?復制代碼?]?[?運行代碼?] ?
<html>
<head>
</head>
<body>
<b>歡迎</b>
</body>
</html>
將它保存為“.htm”擴展名的文件，雙擊運行看看，效果就有了哦！其實網頁就是這樣的標簽堆成的：）
可能大家注意到<head></head>這個頭部標簽沒有包含任何內容，我們剛才說過這個是用來存放說明網頁基本信息用的，如何存放呢，這個標簽還有這么幾個子標簽可以使用，分別說明文檔的信息：
1.<title>...</title>
網頁的標題，它會顯示在瀏覽器的標題欄上面，例如我們可以這樣寫：
<title>歡迎頁面</title>
這幾個字就會在標題欄上面顯示出來了。
2.<link>
這個標簽是沒有結束標記的（</link>），這是怎么回事呢？因為這個標簽只是引進外部的文件，它并不包含任何文本內容，我們來看一個例子：
程序代碼：?[?復制代碼?]?[?運行代碼?] ?
<link?rel=stylesheet?href="style.css"?type="text/css">
這個大概有點復雜了，我解釋一下：標簽中的內容叫做標簽的屬性，它是具體來說明標簽包含的內容的，其中的內容不在網頁上面顯示，上面這一句的意思是從外部導入一個叫做style.css的文件（href表示的內容），它的文件類型是stylesheet（樣式表，以后會知道的，rel表示的內容），類型為?CSS樣式表（type表示的內容）。這里我們從外部導入了一個文件，并且可以在網頁中使用這個導入的文件（這是后話了），導入過程中我們沒有需要網頁顯示出任何文本的信息，所以自然就不用結束標簽了，以后有幾個標簽也是沒有結束標簽的，比如換行標記“<br>”
3.<meta>
作用：原數據
這個標簽用來說明文本的一些基本的數據資料，也是不在網頁中顯示出來的，所以，也沒有結束標記。
舉個例子：
程序代碼：?[?復制代碼?]?[?運行代碼?] ?
<meta?name="keywords"?lang="en"?content="web,page">
這里就說明了一個網頁關鍵字，name表示這個標簽的內容（可以任意設置只要自己看得懂表示什么意義就行了），lang表示語言（en是英語的意思），?content則是關鍵字的內容，有什么作用呢？這個是提供給搜索引擎查找數據用的，搜索引擎查找關鍵字的時候，首先就是掃描這個標簽內容，所以，要是為了讓搜索引擎更快的搜索到你的網頁，這個設置就很重要拉～這只是一個應用而已，meta標簽非常有用，以后具體遇到運用的地方再詳細展開咯！
頭部標記主要的子標簽就這3個，注意運用的話將會啟到很好的作用。
除了子標簽以外，頭部標簽中還經常包括一些功能性的程序模塊，比如JAVA?SCRIPT代碼段等等，這些運用都是十分常用的，以后會詳細說明。
我們把今天所學的內容匯總起來編寫成一個網頁：
程序代碼：?[?復制代碼?]?[?運行代碼?] ?
<html>
<head>
<link?rel=stylesheet?href="style.css"?type="text/css">
<meta?name="keywords"?lang="en"?content="web,page">
</head>
<body>
<b>歡迎</b>
</body>
</html>
在上一講中，我們提到的是HTML文檔的主標簽也叫頂級標簽，以及頭部標簽<head>...</head>子標簽的運用，這些部分一般都不在網頁中顯示出來，它的作用，主要是為了說明文檔的一些概要性質的資料，一方面，可以給搜索引擎之類的查詢系統能更快得搜集資料，另外一方面，也是告訴了瀏覽器一些初始的操作：比如<link>標簽的外部導入文件功能。
我們正在要顯示在網頁中的內容，全部包含在<body>...</body>標簽（網頁主體標簽）中，這個我們上一次其實也已經提到了，以后我們所要說到的那些標簽，基本上都是用在主體之中也就是<body>標簽里面。這些標簽有許多，我們按照功能來對其進行分類，上一講中已經提到，我們先來學習一下文本標簽。
文本標簽，顧名思義就是用來修飾文本用的，比如，文字的大小、顏色、樣式、字體等等等等。
1.<p>...</p>?????段落標簽
可用屬性：align
段落標簽表示位于其中的文本，為一個段落，在顯示的時候，會自動首行縮進字符，而且會與前一段和后一段文字空出一行來，以體現這段文字為一個獨立的段落。
加入屬性align，它的取值可以是：left、center、right，這個是對齊屬性，可以讓這段文字在網頁中分別：左對齊、居中、右對齊，舉個例子
程序代碼：????[?復制代碼到剪貼板?]
<p?align=center>這里是段落</p>
功能就是把“這里是段落”這幾個文字歸為一個段落，與前文和后文都空一行，而且，文字居中對齊。
注意：在這里你可以省略結束標簽</p>，這是什么道理呢？因為后面又會有新的段落，當遇到新的段落或者其他文本的時候，系統也就自然會知道上一段落到這里也就結束了，所以自動會把上一個段落結束掉，但是，我們不鼓勵這里的缺省標簽！在國際網頁規范中，是不允許有未封閉的標簽的，因為這會給統計系統、其他文本識別系統帶來處理的麻煩，作為一個網頁設計師，嚴謹的工作態度也是十分必要的。
2.<pre>...</pre>預定義標簽
屬性：width
所謂預定義標簽，就是讓其中的文字能夠按照你輸入的方式顯示出來。這句話可能你有點犯迷糊了，難道網頁中的文本不是我怎么寫就是怎么顯示的嗎？事實確實是這樣，HTML網頁文檔在顯示的時候，它只承認你輸入的第一個空格符號，而其他的符號均會忽略，例如兩個文字之間你一共打了5個空格符號，顯示出來的時候卻會發現只空了一格而已，而且，換行符（TAB鍵），回車符號等等一切超過一個空格長度的間隔符號都會被忽略為一個空格。這其中的道理其實也是有利有弊，空格符的忽略，可以給文本的后臺程序處理帶來方便，同時也會在制作的時候帶來麻煩，但既然它這樣規定我們也是沒有辦法改變的。如果你要想保持你輸入的那些空格、換行之類的符號，那就用這個預定義標簽把你想保留間隔符的文本給限定起來，它將不會忽略你所輸入的空格和換行。
屬性width是規定文本的最大寬度，如果不限定的話，網頁顯示時是不會自動換行而一直顯示下去，除非遇到換行標簽。
3.<q>...</q>引用標簽
經常在論壇灌水的朋友我想對引用這個功能一定不會陌生，引用別人說的話和文字，引用的內容會被一個特殊的方框框起來并且提示引用，這里的引用標簽就是這個作用，引用部分的文本會像<p>標簽那樣與前后的文字空行分隔，而且會在前面留白，以區別其他文字。
4.<hr>?水平線
很簡單，加這個標簽就是在網頁中顯示一條水平線而已，它沒有結束標簽，因為它不具有修飾文本的功能。
水平線的顯示效果由一下屬性來規定：
width???水平線寬度，值可以是正整數或者百分數，正整數表示單位為象素，百分比。。當然就是占當前行的百分比拉
size?????水平線的高度，其實就是粗細，值取正整數，單位也是象素
align????對齊，取left/center/right，表示對齊方式
noshade??無陰影，水平線默認有一個陰影效果，如果輸入這個值，就會取消而只顯示一條平面的線
舉個例子：
程序代碼：????[?復制代碼到剪貼板?]
<hr?size=2?width=100?noshade?align=left>
就是一條左對齊，高度為2象素，長度為100象素并且沒有陰影效果的直線（屬性順序可以任意寫）。
5.<br>換行標簽
這個非常常用了，很簡單，就是在標簽位置插入一個換行，前面我們說過，編輯文檔的時候輸入的換行是會被忽略為一個空格的，所以換行的部位你可以用換行標簽來實現，當然你用<pre>標簽也是可以的，不過換行標簽更加常用更加方便，它沒有任何屬性也沒有結束標簽，理由我想可以不用說了吧
6.<center>...</center>居中標簽
作用也非常簡單也非常實用，可以讓位于標簽中的一切東東全部居中顯示，也許你要問，那如果我在居中標簽中使用了<p?align=left>段落文字</p>，那“段落文字”是居中呢還是左對齊？呵呵，你只要記住HTML這個特性就行了：修飾標簽修飾功能有重疊或者沖突時，總是以最靠近被修飾文本的標簽或者說最后一次修飾的標簽為準，所以，“段落文字”會左對齊。
7.<font>字體標簽
這個標簽非常實用，大部分文本的修飾工作都要靠它來完成。我們看看它可以使用的屬性，就知道它可以怎么修飾文本了：
size???字體大小，可以取1、2、3、4、5、6、7，1最小7最大，還可以取+1,+2,+3,+4,+5,+6,+7,-1,-2,-3,-4,-5,-6這是相對大小，即在原來大小上做加減。
color????顏色，字體的顏色由這個屬性來修飾，顏色必須使用網頁通用的顏色代碼，它由一個#符號開始，6位16進制數字組成，比如#ff0000代表紅色，這個代碼可以對照顏色表來決定。你也可以輸入一些預設好的顏色如：red（紅色）、green（綠色）等等，不過不是你認為對的顏色英文單詞都可以用，你可以自己試試看。
face????字體，多種字體可以用半角的“,”隔開，比如：“宋體,楷體,黑體”，第一個首選，如果瀏覽者沒有第一種字體就嘗試第二個，依此類推。
字體標簽的運用：
程序代碼：????[?復制代碼到剪貼板?]
<font?color="#ff0000"?size=3?face="宋體,楷體,黑體">被修飾的文字</font>
表示大小為3號，紅色，首選為宋體的文字。
8.特殊修飾字體標簽，這幾個標簽都是沒有屬性，而且非常簡單只實現單一修飾功能的標簽，如下：
<b>...</b>????加粗字體
<i>...</i>????斜體字
<u>...</u>??加下劃線
<sup>...</sup>???上標
<sub>...</sub>???下標
<s>...</s>???加刪除線
<em>...</em>???斜體，跟<i>標簽功能相同
<strong>...</strong>???加粗
<code>...</code>???代碼，會以特殊的字體顯示，可以自己試試看了
以上分成了兩組，第二組還有其他的標簽，但是運用的比較少，第一組是修飾標簽，第二組則是歸類為強調性文字用的標簽。
9.<a>...</a>?鏈接標簽
這個用處非常大，就是給文本加上超鏈接信息（以后我們講了圖片之后，你會發現也可以給圖片加鏈接），可以說網頁的瀏覽功能就是靠這個標簽的完成的！看它的屬性：
href???鏈接地址URL，就是鏈接的地址，可以是相對的地址也可以是絕對地址
target??目標位置，就是打開鏈接的位置，可以取_self（在當前窗口打開新鏈接）、_blank（在新窗口打開）、name（在指定窗口名字的窗口打開），還有一些其他的取值等我們提到框架的時候在具體說明。
舉個例子：
程序代碼：????[?復制代碼到剪貼板?]
<a?href="
http://thefeeling.rknw.com"&?...?quot;_self">蟲子的博客</a>
這就給“蟲子的博客”加上了鏈接，點擊這個鏈接的時候會在當前窗口打開我的博客網頁：）
文本標簽主要說的就這些，這些也是最常用到的，在下一次，我們講述的是圖片媒體標簽與排版標簽，進一步美化我們的網頁咯！好，我們把今天所講的東西做在一個頁面里：
程序代碼：????[?復制代碼到剪貼板?]
<html>
<head>
<title>HTML學習</title>
</head>
<body>
<font?size=6?color=green>HTML?的學習</font>
<hr?size=1?width=100%?ailgn=left>
<p?align=left><b>今天我們學習了文本標簽</b></p>
這篇文章出自<a?href="
http://thefeeling.rknw.com"?target=_self>未名蟲子的博客</a>
</body>
</html>
請注意：當我們需要多個顯示效果的時候，我們的標簽是可以互相套用起來的，但是要注意，就像括號一樣標簽必須成對出現，并且一一相對應好，不然，會出現意外的顯示效果出來！
在網絡中，我們常用的地址有絕對地址與URL，所謂絕對地址，就是物理地址，也就是我們電腦上最常用來表示文件地址，格式一般是這樣：“盤符:\文件夾\文件”，實際在網絡上的運用要比URL要少得多，很多情況是在后臺程序中運用，比如ASP中常用的數據庫連接，數據庫所在位置必須使用絕對地址也就是物理地址才能夠完成讀取、寫入操作，這些內容等與大家聊到后臺程序設計的時候再細細地說吧。
URL是我要說的一個比較重要的概念，英文全名是：?Uniform?Resource?Locator（統一資源定位器），是文檔在Web或者Internet上的地址，一般用在超級鏈接當中。盡管URL?看起來可能很長很復雜，但它總是由四個部分構成：協議、主機名、文件夾名（路徑）和文件名，各有各的特定功能。
下面是一個標準的URL：
程序代碼：????[?復制代碼到剪貼板?]
http://thefeeling.rknw.com/music/musiclist.html其中，http://是協議，thefeeling.rknw.com是主機名，/music是文件夾名，musiclist.html是文件名。
協議
協議用于指定計算機傳輸信息時所用的語言，具體來說，協議告訴瀏覽器信息在什么地方（例如在Web服務器、FTP服務器或者本地硬盤等等），并且告訴瀏覽器取得文件的過程（例如是否需要登陸、服務器提供哪些信息等）。
下面是常用的幾個協議：
http://???用于Web文檔，包括HTML文檔及相關鏈接，最常用。
file:///????用于本地硬盤上的文檔，第三個“/”表示主機名，所以可以直接輸入文件夾名和文件名。
ftp://?????用于FTP服務器上的文檔。
gopher://?用于gopher服務器上的文檔。
telnet://??用于與特定主機的telnet鏈接，一般用于鏈接圖書館書目，但這個協議是不確定的，因為不知道訪問者端是否安裝或者設置了telnet應用程序。
wais://??用于鏈接wais數據庫，很少用到。
mailto:???用于提供一個窗口，讓訪問者向指定e-mail地址發送消息。大多數瀏覽器都支持mailto:，但是它還不是標準或者正是接受的協議。這個協議不帶//。
news:???用于連接新聞組或者組中的特定文章，但這是不保險的，因為我們無法知道瀏覽者要訪問哪一個新聞組。
主機名
主機名是保存HTML文檔和相關文件的服務器名。每一個服務器都有特定的地址，該服務器上所有的文檔都有相同的主機名。
作為信息的提供者，不一定非用服務器名作為URL的主機名部分。我們可以使用虛擬域名，用自己的主機名，但文件仍然存在別的主機上。
文件夾名
文件夾名使URL中的下一段信息，表示文件所在的文件夾。文件夾在Web服務器上的作用與PC機上相同，就是用于組織文檔。如果把文件放在最高層，則可以不要文件夾名。為了管理和維護的方便，一般都是把相關的文件放在相關的文件夾里的。這是文件管理和網頁制作的一個好習慣。
文件夾命名時，它只能以下列字符：
1。字母（大寫，小寫）
2。數字
3。符號，包括美元（$），連字符（-），下劃線（_），點號（.）
如果文件夾名含有其他字符，就要采用這些字符的十六進制表示。例如，有些操作系統在文件夾名中支持空格，為了在URL中放進空格，就需要采用與空格對應的十六進制表示符20%。一般來說，最好不要使用特殊符號給文件夾命名。
文件名
文件名時具體HTML文檔或者其他文件的名稱，具體包括兩個信息：文件的名稱和文件的擴展名。在提供文件名時，者兩個信息都不能有錯誤，否則就會報告找不到這個文件。
在Web服務器上，指定URL中的主機名或者文件夾名而不指定文件名時，可以取得某個缺省的文件。比如我們在瀏覽器中只需要輸入主機名：www.sina.com.cn，而不輸入文件名就能顯示頁面，原因是Web服務器根目錄下有一個缺省文件index.htm存在。
URL的類型
URL隨鏈接文檔的位置不同而不同。例如：如果文件在www上，URL就比較長，有比較多的信息：如果文件在本地硬盤上，那么就可以比較短了。
URL大致可以分成：
絕對URL
相對URL
絕對URL幾乎包含了URL的全部信息，包括協議、主機名、文件夾名和文件名。如果其中的任何一個部分出錯，那么都會找不到相應的文件。
相對URL通常只包含文件夾名和文件名，如果就在當前文件夾下，那么連文件夾名都不需要。此時，瀏覽器假設鏈接的目標文檔和原文檔在同一個文件夾中或者同一個服務器中，所以不需要協議和主機名。相對URL的使用跟Unix和Dos中的目錄進出很相似。比如“../”表示上一級目錄，“./”表示當前目錄，?“/”表示根目錄。
舉個例子：
程序代碼：????[?復制代碼到剪貼板?]
../../hello.htm
表示鏈接到當前文件所在位置的上一級的上一級文件夾中的hello.htm文件的URL。
程序代碼：????[?復制代碼到剪貼板?]
/index.htm
表示鏈接到當前服務器下根目錄中的index.htm文件的URL。
在做葉子時，對于同一服務器下的頁面，一般鼓勵使用相對URL，這與訪問鏈接的速度很有關系，如果你使用的時絕對地址，那么服務器在進行尋址操作時，會按照絕對URL的支持重復一次尋址操作，如果用了相對URL，那么服務器在尋址時就直接從當前文件所在文件夾開始進行，速度上有明顯的優勢，一般情況下除非沒有辦法，盡量使用相對URL。
首先說說圖片標記，從前幾次我們也了解到，網頁其實就是用HTML語言寫的特殊類型文本文件，而不是如同WORD那樣的軟件，文字和圖片可以以“塊”的方式進行任意編排，用一個白背景，然后所有的塊可以任意往上面貼的，任意變換他們的位置的，一切，都必須用HTML設定好的標記來添加進去。因此，插入圖片也是使用特定標簽——圖片標簽來插入的，至于圖文混排的具體方法，這個接下來說網頁排版問題的時候再詳細展開。
HTML文檔，屬于純文檔，因此用簡單的記事本就可以打開編輯，我們不可能用WORD中的“插入圖片”命令來簡單把圖片放進去，我們要用到的標記是：<img>
<img>標記相比其他的標簽來說稍微復雜一點，我先用個例子來說明：
程序代碼：????[?復制代碼到剪貼板?]
<img?src="tupian.jpg"?align=absmiddle?alt="這里是圖片"?width=120?height=120>
什么意思呢？其實就是指，在這個標簽的位置插入一張圖片，圖片的來源是src中的內容即tupian.jpg，width/height這個我想不用我解釋大家也能明白，這個分別是圖片的寬度和高度，align這個屬性似曾相識，我們在<p>段落標記中也用到過，它代表的是“對齊方式”，這里也是用樣的道理，也是表示圖片的對齊方式，但是稍稍不同的是，圖片的對齊方式指的是與四周文字的對齊方式，我們可以取的值有：?top?middle?bottom?abstop?absmiddle?absbottom等，常用的就這幾個，什么意思呢？top即頂對齊，其實就是圖片的上緣與文字的頂部對齊，middle當然就是文字對齊到圖片的中間，而bottom則是文字對齊到圖片的下緣。很顯然一般圖片的高度是肯定要超過文字的，所以這個對齊方式決定了它周圍一行文字的位置關系，abs是“絕對”的意思，是以文字所在行的對齊方式，與“非絕對”有什么不同呢？這個在說道網頁排版的時候，就清楚了。此外，align還可以取left（左對齊），這種對齊方式，文字將環繞圖片分布，具體效果是什么樣大家可以自己操作試試看。記住是圖文混排的時候才起作用的。alt屬性是對圖片的說明，不在網頁上直接顯示，當由于某種原因圖片文件沒有找到的時候，說明文字則會被顯示出來，這很重要，由于網絡速度的問題，圖片并不一定能完全導入，或者導入失敗，那么，必要的文字說明是很需要的，瀏覽者需要知道這個位置原來是要放什么東西。
從這個例子我們看到，HTML插入圖片的時候，并不是直接把一張圖片放進去，而是用了一種間接的方式，做了一個標記（即<img>標簽），告訴瀏覽器從哪里下載這一張圖片（即src屬性指定的地址），然后以多少寬度高度顯示，如何與周圍文字對齊，在找不到圖片的時候如何顯示，這樣HTML就把原本是圖片的文件簡單的用一行語句給代替了，當瀏覽者打開這個網頁的時候，在從標簽中指定的位置取讀取圖片文件并以指定的方式顯示出來。以后你會發現?HTML除了圖片，其他例如聲音、動畫等等之類的媒體插入的時候都是利用這種方式。
總結一下圖片標簽的運用：
標簽：<img>??（沒有結束標簽）
可用屬性：
src?????圖片的來源，值為URL（上次我們已經詳細討論過了），相對和絕對URL都可以，當然，盡量用相對URL
width???圖片寬度，值為正整數，可以取0（取0圖片就沒了。。。也沒多大意義），單位是象素
height???圖片高度，用法同width
align????與周圍文字對齊方法，取值：top（頂部對齊）、middle（中間）、bottom（底部）、absmiddle（絕對中間）、absbottom（絕對底部）、baseline（基線對齊）、left（左對齊）、right（右對齊）
alt????文字說明，當圖片不能顯示時，會在原來圖片位置顯示說明文字，當鼠標移動到圖片上方并停留時，也會顯示出來
border???圖片的邊線，取值為整數，表示圖片邊線的寬度，0時沒有邊線
hspace、vspace??圖片與周圍文本的距離，值為整數
如何給圖片做鏈接呢，上回我們說到<a>標記的時候，我提到<a>標記不僅可以給文字加鏈接，也可以給圖片加鏈接，所以，只要把圖片標記放到<a>...</a>之間就實現鏈接了，舉例如下：
程序代碼：????[?復制代碼到剪貼板?]
<a?href="
http://thefeeling.rknw.com"?target="_self"><img&?...?nbsp;width=88?height=31?alt="蟲子的BLOG"?border=0></a>
這個例子，其實就是我的BLOG的圖片鏈接：）
網頁中除了文本之外有了圖片，就變得豐富多彩了，但是，圖文混排就成了問題，我們不能隨便讓一個圖片插入到文本之間，雖然圖片標記中的align屬性能提供簡單的對齊關系，但是這樣版面還是比較混亂，所以，必須需要一個框框架架的東西，來編排好網頁的格局，就像書架一樣，先得有個架子，然后往上面放東西就會比較整齊、條理，網頁中的編排方式，大致可以分成一下三種：表格布局、框架布局和CSS+DIV布局方法，我們這里要討論的，主要是表格布局，框架布局略微說明（其實是比較簡單的），CSS+DIV布局方式是目前最標準的布局方法，需要很深的CSS基礎，所以，暫時只作為介紹。
關于表格布局，今天的篇幅有限，所以放到下一次專門來討論這個表格布局方法。
框架布局，就是把原本是一個頁面的網頁，分成塊，然后在每一個塊中分別導入一個頁面，以此拼成一個整體的頁面。框架的頁面，需要以下兩個部分：一就是架子，二就是架子里放的東西。首先我們要搭一個網頁的架子出來，單獨保存為一個頁面，這個頁面包括了網頁的基本框架結構和框架中導入頁面的地址。
框架的主標記：<frameset>...</frameset>
屬性：
rows???多重框架高度
cols????多重框架寬度
這個標記是用來切分頁面用的，比如：
程序代碼：????[?復制代碼到剪貼板?]
<framset?rows="80,*">
將頁面分成了兩個部分，即上部和下部，上部高度占80象素，下部則是占剩下的高度（用*來表示余下的部分），另外這個80可以寫成百分數，這樣就以百分比來切分頁面。這個標簽，就是框架的架子
除了上述兩個切分頁面的屬性外還有：
frameborder???是否顯示框架分隔線，取值為yes、no
framespace????框架內部留白，即框架內容與分隔線之間的距離
bordercolor????分隔線的顏色
框架單元標簽：<frame>
沒有結束標記
屬性：
name???這個框架單元的名字
src??????框架內容的來源
frameborder??是否顯示框架分隔線，取值為yes、no
marginwidth??框架內留白的寬度
marginheight?框架內留白的高度
scrolling???框架內容超過內容大小的時候是否顯示滾動條，可以取auto（自動，超過就顯示不超過則不顯示，這個是默認值）、yes（總是有滾動條）、no（沒有滾動條，這樣超過的部分就顯示不出來了）
這個標簽的作用，就是用來代表框架中的具體內容了。下面我們來看一個具體的例子：
程序代碼：????[?復制代碼到剪貼板?]
<html>
<head>
<title>框架實例</title>
</head>
<frameset?rows="80,*"?frameborder="no"?border=0?framespacing=0>
???<frame?src="top.htm"?scrolling="no"?name="top">
???<frame?src="content.htm"?scrolling="auto"?name="content">
</frameset>
</html>
這個框架頁面，把網頁分成了上下兩個部分，上部占80象素高，下部占余下的部分，上部導入top.htm這個頁面為內容，下部導入content.htm這個頁面作為內容，也就是說這個頁面其實是由兩個頁面拼接而成的。
為什么我們要設置name這個屬性呢？假如我們在top.htm這個葉子里有這樣的一個鏈接：
程序代碼：????[?復制代碼到剪貼板?]
<a?href="myfavorite.htm"?target="content">我的愛好</a>
當我們點擊這個“我的愛好”的鏈接，就會打開myfavorite.htm這個頁面，在哪里打開？對了，注意到target屬性沒有用我們上次說的那些值：?_self、_blank，而是用了下部的那個框架content的名字，就是在命名為content的框架中打開這個頁面，這樣，就實現了網頁中部分內容的切換而不切換整個頁面，就像電視的畫中畫功能一樣，通過上部框架頁面的鏈接控制下部框架顯示的內容，反過來也可以用下面的鏈接控制上部框架的內容，這個只是跟target的取值有關而已，這樣我們也就體會到框架的好處了
我們修改一下上面的那個框架頁面：
程序代碼：????[?復制代碼到剪貼板?]
<html>
<head>
<title>框架實例</title>
</head>
<frameset?rows="80,*"?frameborder="no"?border=0?framespacing=0>
???<frame?src="top.htm"?scrolling="no"?name="top">
???<frameset?cols="10%,*"?frameborder="no"?border=0?framespacing=0>
?????<frame?src="left.htm"?scrolling="no"?name="left">
?????<frame?src="content.htm"?scrolling="auto"?name="content">
???</frameset>
</frameset>
</html>
這段代碼，我們對下部的框架進行了再分割，分成左邊占10％、右邊占剩下的空間兩個部分，左邊導入left.htm頁面作為內容，右邊則是導入content.htm作為內容。
類似的，我們可以對框架再細細分隔，但是，隨著分隔數量增多，網頁被分成了許多塊，每一塊必須導入一個頁面作為內容，這樣，對網頁的更新、修改是非常麻煩的一件事情，所以，框架的布局是十分有限的，復雜的頁面，我們最好還是采用表格布局或者CSS+DIV布局。
CSS?+DIV布局的思想，有點類似WORD的排版，也就是把文字圖片等等網頁的內容分成許多塊，然后，用坐標值來定位每一個塊的位置，這樣就實現了類似于?WORD的排版方式，所謂的DIV其實就是塊的意思，而CSS在布局時發揮的作用就是用坐標來詳細定義這些塊的位置，以此可見，只要我們改動CSS中關于坐標的定位值，我們就可以輕松改變網頁中塊的位置，網頁的整體布局也就會完全被改變！這種布局方式是目前的潮流所趨，但是需要比較搞的HTML+CSS編輯能力，真正排版起來，也并不是向我現在說的那么輕松的。但是，它比表格布局方式運行更快、更方便搜索引擎之類的查詢媒體搜索，所以潛力很大，而表格布局的簡單實用也有它的優勢，也有其生命力，不需要熟悉CSS就可以實現網頁的編排，所以下一次，我們詳細來討論如何用表格來對網頁進行布局。
今天講的差不多是HTML基礎的最后一講，也是最關鍵的表格布局。
先不說布局，來說說怎么在網頁上畫出一張表格來。HTML是純文本的一種網頁語言，所以，網頁中的表格也必須轉化成標簽代碼的格式，我們用<table>....<?/table>代表一個表格，用<tr>...</tr>來表示表格中的一行，用<td>...<?/td>來表示表格中的一格。具體來看下面一個例子：
程序代碼：????[?復制代碼到剪貼板?]
<table>
??<tr><td>第一行第一格</td><td>第二格</td><td>第三格</td></tr>
??<tr><td>第二行第一格</td><td>第二格</td><td>第三格</td></tr>
</table>
上述例子是畫了一個2×3的表格，即有兩行，三列。這樣，HTML就把這個表格轉化成了代碼表示，我們現在具體看看這些標簽的運用：
1.<table>...</table>
表格標記，代表其中是一個表格
可用的屬性：
width????表格寬度，可以取整數或者百分比數，如果為百分比數，則表示占網頁總寬度的百分比，如果表格嵌套在其他表格的某個單元格中，則表示占這個單元格寬度的百分比。
height???表格高度，取值與寬度相同
border???表格邊線寬度，取整數，取0即不顯示邊線
background??背景圖片，取值為URL
bgcolor???背景顏色
align??????對齊方式，與<p>的align對齊方式完全相同
cellpadding??單元格填充距離，就是單元格中的內容與邊線之間的距離，取整數
cellspacing???單元格間距，取整數
2.<tr>...</tr>
表示表格的一行，只能用在<table>標簽內部
屬性：
align???該行中內容的水平對齊方式，取值：left（左對齊）、center（居中）、right（右對齊）
valign??該行中內容的垂直對齊方式，取值：top（頂端）、middle（中間）、bottom（底部對齊）
bgcolor?該行背景顏色
3.<td>...</td>
表示一個單元格，只能用在<tr>標簽內部
屬性：
width、height???單元格寬度和高度，取值和<table>中相同
bgcolor????單元格的背景顏色
background??單元格背景，取值為圖片的URL
align、valign??單元格對齊方式，與<tr>標簽中用法相同
colspan???該單元格占用多少格列數
rowspan??該單元格占用多少格行數
下面我們舉一個稍微復雜一點的表格例子：
程序代碼：????[?復制代碼到剪貼板?]
<table?width=500?height=400?cellpadding=0?cellspacing=0?bgcolor="#cccccc"?border=1>
??<tr>
?????<td?align=center?width=20%>第一行第一格</td>
?????<td?align=center?width=30%>第一行第二格</td>
?????<td?align=center?valign=middle?width=50%>第一行第三格</td>
??</tr>
??<tr>
?????<td?colspan=2?align=center>第二行第一格</td>
?????<td?align=center>第二行第二格</td>
??</tr>
</table>
畫出來表格大致是這個樣子：
┌──┬─────┬─────────┐
├──┴─────┼─────────┤
└────────┴─────────┘
在例子中，第一行的每一個單元格的寬度我都做了限定，而第二行我則沒有做限定，第二行的單元格會自動與上一個單元格對應對齊，也就是和該列上一個單元格的寬度相等，如果想要不相等怎么辦？對不起沒有辦法。。。HTML的表格自動對齊方式有利有弊，如果同一列上下兩個單元格寬度不等時，一個方法就是用?colspan來合并幾個單元格成為一格，這樣這個單元格的寬度就增加了，但是這樣這個單元格的寬度就等于上一列所合并的單元格寬度之和，還是不能隨意的改動，唯一的解決辦法是：在需要重新拆分成不同寬度的這個單元格中再插入一個表格，用新的表格來限定寬度！不同表格之間寬度是互相不影響的，這也是表格排版的一個重要思想！例如上一個表格中我們需要在第二行的第二格重新分成左右兩格，寬度與上一行不等：
程序代碼：????[?復制代碼到剪貼板?]
<table?width=500?height=400?cellpadding=0?cellspacing=0?bgcolor="#cccccc"?border=1>
??<tr>
?????<td?align=center?width=20%>第一行第一格</td>
?????<td?align=center?width=30%>第一行第二格</td>
?????<td?align=center?valign=middle?width=50%>第一行第三格</td>
??</tr>
??<tr>
?????<td?colspan=2?align=center>第二行第一格</td>
?????<td?align=center>
????????<table?width=100%?height=100%?cellpadding=0?cellspacing=0?border=1>
????????<tr>
??????????<td?width=50%?align=center>左邊的表格</td>
??????????<td?width=50%?align=center>右邊的表格</td>
????????</tr>
????????</table>
?????</td>
??</tr>
</table>
表格的多重嵌套，就可以使表格的排版越來越復雜，但是，請注意表格嵌套層次越多，網頁導入的速度也就越慢，所以，合理嵌套并劃分表格以盡量減少對導入速度的影響，這是一個好的網頁設計師必須考慮的問題。
表格的畫法，我們就介紹這么多了，下面我們就來談談如何用表格來布局。
其實非常簡單，我們可以先用表格來畫一個網頁的整體框架結構，然后，把表格的邊線設置為0（即border=0）隱去所有的邊線，就可以實現網頁的布局了，除去邊線之后只有表格中的內容會被顯示，框架結構是不會顯示出來的，這就是我們說的表格布局，熟練了表格的制作以后其實這是非常簡單的。
這里，表格布局的觀念我要給大家說幾個注意點，首先，一個網頁不要用一個表格來布局，網頁顯示時，是一個表格導入完了然后全部顯示出來的，所以整個網頁如果只有一個表格的話，那么，只有等整個表格內容導入之后才會被顯示出來，所以，如果網速比較慢的瀏覽者，那他將面對比較長的時間是一個空白的頁面，而我們的期望是導入一部分就顯示一部分，避免消磨瀏覽者的耐心，所以表格布局要拆分成若干個表格來分擔，如何拆分這就是個人習慣問題了，需要一段時間的實踐，慢慢就會有自己的套路。
另外，將表格布局與框架布局合理結合，可以使網頁在瀏覽操作的時候更加方便，比如網頁的導航欄與內容部分分成兩個框架，點擊導航欄鏈接時更換內容部分的顯示而不更換導航欄的內容，導航欄和內容部分又可以使用表格來布局，瀏覽這樣一個布局格式的頁面將會是一件很方便的事情
HTML?語言是動態網頁設計最基本的內容，也是必須要熟悉的基礎，ASP等等其他后臺程序的設計都是基于HTML的基礎之上的。但是，這里講HTML語言，目的并非是要大家用HTML來編寫網頁的源代碼，但可以作為修改網頁源代碼的基礎，網頁細節部分的內容還是必須通過對HTML源代碼直接修改來完成的。不過用記事本來編輯網頁是鍛煉基本功的一個非常好的途徑，其實我本人學習網頁制作，一開始接觸的也是HTML而不是諸如FRONTPAGE、DW之類的軟件，?FEELING?DESIGN最初版本，就是我完全使用記事本寫出來的，當然這樣做的效率比起用軟件來要低得多，但是親手寫出來的網頁源代碼，結構清晰，層次明確，沒有冗余的代碼，這也是軟件所不能及的，大家用什么方法來學HTML，可以自己把握衡量，如果你想向著網絡程序員的方向發展，那么鼓勵使用記事本或者其他純文本編輯器來寫網頁文件！
本次要說的，如何豐富和美化網頁的內容，其實也是一些純理論的東西，多實踐是最好的鍛煉方法。
1.給網頁加入圖片。
圖片對于一個網站來說是一把雙刃劍，加入圖片，給網頁的導入帶來了負荷壓力，圖片的文件大小往往比一個網頁（xxx.htm文件）大得多，這會減慢導入網頁的速度，然而圖片對于網站的美化來說不可缺少的。隨著現代網絡硬件的發展，網速也提高得非?？?，可以說圖片導入的速度問題，以不像原來那樣占據主要地位了，但是一個好的網站，導入速度與美化必須都要慎重考慮！
理論上說，比起密密麻麻的文字，直觀的圖片是瀏覽者更加愿意看的，所以，給網頁加上必要的圖片，為了加快導入的速度，圖片盡量使用網頁通用的圖片格式例如：GIF?JPG等，而不要使用未經壓縮的BMP?PNG等，在不影響瀏覽效果的前提下，盡量壓縮圖片，能用HTML代替的地方盡量不要使用圖片。
2.給網頁加入背景
方法：<body>標簽的屬性：background、bgcolor
<body>標簽的兩個屬性，background可以定義背景圖片，bgcolor則定義背景的顏色，例如：
程序代碼：????[?復制代碼到剪貼板?]
<body?background="bg.gif"?bgcolor="#eeeeee">
背景圖片會自動重復鋪滿整個頁面，當這兩個值都設置時，將顯示圖片而不顯示背景顏色，兩個都定義的好處就是，如果背景圖片由于某些問題沒有導入成功，那么就不會顯示而顯示出背景顏色。
3.給網頁加入背景音樂
方法：<bgsound>標簽
程序代碼：????[?復制代碼到剪貼板?]
<bgsound?src="URL"?loop=number>
src屬性代表音樂來源URL，loop屬性表示音樂重復的次數，如果想讓音樂無限循環，取-1。注意，請慎重使用背景音樂，一方面會影響頁面的導入速度（音樂文件一般比圖片還要大），另一方面，比較正式的網站需要比較嚴肅的氣氛或者瀏覽者并不希望聽到什么聲音。
4.給網頁加入視頻文件
方法：<embed>...</embed>標簽
程序代碼：????[?復制代碼到剪貼板?]
<embed?src="tv.wmv"?width=500?height=400?autostart="yes"></embed>
src屬性表示視頻文件的來源URL
width、height??表示視頻的寬度和高度
autostart???表示是否在網頁導入后自動播放，取值為yes、no
這個標簽不僅可以加入視頻，音頻也可以加入
5.給網頁加入FLASH
方法：<embed>...</embed>標記
用法和插入視頻相同，此外還可以用<object>...</object>（其實這個更加常用一點），屬性比較復雜，用法見下：
程序代碼：????[?復制代碼到剪貼板?]
<object?classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"?codebase="
http://download.macromedia.com/pub/sho?...?h/swflash.cab#version=4,2,0"?width="300"?height="300"?vspace=0?hspace=0?border=0>
??<param?name=flash?value="flash.swf">
??<param?name="scale"?value="noborder">
</object>
<?object>標簽是插入媒體的標簽，<param>是它的子標簽，用來設定用<object>插入媒體的一些參數。?<object>標簽中的classid屬性，后面跟著一大堆代碼，我們不用去管他，它是代表FLASH播放插件的，codebase代表?flash播放插件的位置，也就是說如果瀏覽者的瀏覽器上沒有安裝FLASH播放器的話，就會從這個位置下載播放插件以播放媒體文件。?width/height/vspace/hspace?這幾個屬性我想不用我多介紹了吧：）
<param>是<?object>專用的子標簽，它只能位于<object>標簽內部，用來設定播放插件的參數值，第一個參數值就是代表FLASH文件的地址URL，第二個參數是設定FLASH播放器沒有邊線顯示，參數根據object標簽插入媒體的不同而不同，所以屬性是比較復雜的，這里我不詳細展開，大家可以參考HTML相關的書籍。
6.內部框架
方法：<iframe>...</iframe>
屬性：
src???內部框架的內容來源URL
width、height?框架寬度?高度
marginwidth、marginheight??框架內部內容留白
frameborder?框架邊線的寬度，取值為整數
例如：
程序代碼：????[?復制代碼到剪貼板?]
<iframe?src="window.htm"?width=300?height=200?marginwidth=0?marginheight=0?frameborder=1>無法顯示框架</iframe>
iframe?的功能，是插入一個內部框架，就像打開了一個窗口，窗口內導入了另外一個網頁，合理利用這個標簽將給頁面的布局帶來不少方便，<?iframe>...</iframe>標簽內的文本，是當瀏覽器不能支持框架時所顯示的內容（目前瀏覽器的版本基本都支持）
7.加入動態的文字
方法：<marquee>...</marquee>標簽
屬性：
direction??滾動方向，取值：left（從右到左）、right（從左到右）、up（從下到上）、down（從上到下）
behavior??滾動方式，取值：scroll（無限次反復滾動），slide（滑入，就是只滾動一次），alternate（來回振蕩）
loop???循環次數，默認無限次
scrollamount??運動速度，取正整數，默認是6
scrolldelay??運動停頓，取正整數，默認是0，也就是沒有停頓，如果這個值不為0則在滾動中就會出現停頓現象
align?滾動部分的垂直對齊方式，取值：top?middle?bottom，默認是middle
bgcolor?滾動部分的背景顏色
height??滾動部分的高度
width???滾動部分的寬度
hspace??內部內容留白
一個例子：
程序代碼：????[?復制代碼到剪貼板?]
<marquee?behavior="scroll"?direction="up"?width=100?height=200?scrollamount=2?scrolldelay=60>
????<p>這里是滾動的文字
????<p><img?src="image.jpg"?alt="圖片也可以滾動"?width=50?height=120?border=0>
<marquee>
8.加入腳本
方法：<script>...</script>標簽
可以加入用其他語言編寫的腳本文件，例如最常見的Javascript腳本等等，可以幫助網頁實現一定的特效功能，這些腳本在網上有很多，他們屬于外部代碼不包括在HTML語言中，我這里也不詳細討論了。
屬性：
language??腳本使用的語言
src???外部腳本文件導入地址，有些網頁為了方便將嵌入的腳本程序單獨保存為一個文件，然后用這個屬性來導入，這樣腳本可以被多個網頁使用而減少重復寫腳本代碼的時間。
內部腳本使用的例子：
程序代碼：????[?復制代碼到剪貼板?]
<script?language="Javascript">
<!--
??alert("腳本被執行了！");
-->
</script>
運行時會彈出一個警告窗口，并告訴瀏覽者“腳本被執行了！”，這個彈出警告窗口的功能就是javascript腳本來實現的，<!--??--?>這是什么意思呢？這是HTML中使用的注釋語句，包括在其中的文本不會顯示在網頁上，而保存在源代碼中，當JAVASCRIPT源代碼編寫有問題時有時會把源代碼當作普通文本顯示到網頁上，這不是我們想看到的，因為會嚴重影響網頁的內部文本顯示，影響美觀，用這個注釋標簽可以保證內部的文字不會被顯示，另外，寫過程序的朋友也知道，在程序中加入注釋可以增加程序的可讀性，雖然它并不在網頁的顯示中體現什么功能或者說是效果，但是給編程人員修改網頁，查看代碼的時候帶來了很大的便利，網頁比較復雜，程序比較長的時候必要的地方（如果功能模塊等）加入注釋是編程的一個好習慣
外部導入腳本文件的例子：
程序代碼：????[?復制代碼到剪貼板?]
<script?language="Javascript"?src="javascript.js">...</script>
這段代碼從外部導入了一個叫做javascript.js的腳本文檔，功能上，與腳本文檔中的程序代碼直接寫到HTML網頁里是完全相同的，好處就是一來多個網頁可以導入這同一個文檔避免重復寫代碼，二來修改這個腳本文檔，所有導入了這個腳本文檔的網頁功能也隨之會改變，修改起來就減輕了工作量，三來，網頁的結構也更加清晰簡單，給網頁的修改編輯帶來了方便。
HTML的內容到此全部結束，還有一個重要的層<div>標簽沒有講，是因為它在CSS中才發揮了強大的作用，所以當我們說到CSS的時候再詳細給大家說明。
另:
格式預設：<pre>內容</pre>
????這是非常有用的一個標簽，它可以使得最終顯示效果以原始格式實現。請看以下代碼和效果：
代碼：
<pre>
???1236
??-1207
--------
?????29?
</pre>
效果：
???1236
??-1207
--------
?????29?
????論壇里，有時我們需要精確地對齊某些元素，pre標簽能夠幫上大忙，它能令效果比在“設計”模式下用空格符移動顯示符號更準確。
posted on 2006-03-29 01:33
行 閱讀(7234)
評論(5) 編輯 收藏