1、 HTML語言剖析之Html簡介全寫： HyperText Mark-up Language譯名： 超文件注標式語言（譯名之一）簡釋：一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。HTML 是在 SGML 定義下的一個描述性語言，或可說 HTML 是 SGML 的一個應用程式，HTML 不是程式語言，如 C+ 和 Java 之類，它只是標示語言，基本上你只要明白了各種 標記的用法便算學懂了 HTML，HTML 的格式非常簡單，只是由文字及標記組合而成，于 編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然 以專業的網頁編輯軟件為佳。 閱讀須知：這一篇【HTML剖析】偏重于標記的介紹，考慮到易懂及每節的篇幅問題，我并不按 W3C 的 HTML 分類，這可令你更易選擇有興趣的標記，其中只有【文件標記】是必讀的，其 余可任意選擇。這一篇不會提及任何網頁編輯軟件，只要掌握了 HTML ，任何網頁 編輯工具都可以變成一把利器。 標記寫法：任何標記皆由所圍住，如 標記名與小于號之間不能留有空白字符。某些標記要加上參數，某些則不必。如 Hello參數只可加于起始標記中。在起始標記之標記名前加上符號/便是其終結標記，如 標記字母大小寫皆可。 圍堵標記與空標記：標記按型態分為圍堵標記與空標記圍堵標記顧名思義，它以起始標記及終結標記將文字圍住，令其達到預期顯示效果。例如 HTML Source ： Creation of Webpage is my favourite.顯示成： Creation of Webpage is my favourite.其中 便稱為圍堵標記。它以起始標記及終結標記標示文字 Creation of webpage ，令它顯示成粗體，兩者失其一都會發生錯誤顯示。空標記是指標記單獨出現，只有起始標記沒有終結標記。例如 HTML Source：I love Creation of Webpage.Its a wonderful place.顯示成：I love Creation of Webpage.Its a wonderful place.其中換行標記便屬空標記。它的作用便是將標記后所有東西顯示于下一行，可見終結標記于它是沒意義的， 但有些人會為空標記加上終結標記，這是為方便記認而己，對 HTML 沒有影響。2、 HTML語言剖析之HTML標記一覽標記 類型 譯名或意義 作 用 備注文件標記 文件聲明 讓瀏覽器知道這是 HTML 文件 開頭 提供文件整體資訊 標題 定義文件標題，將顯示于瀏覽頂端 本文 設計文件格式及內文所在 排版標記 說明標記 為文件加上說明，但不被顯示 段落標記 為字、畫、表格等之間留一空白行 換行標記 令字、畫、表格等顯示于下一行 水平線 插入一條水平線 居中 令字、畫、表格等顯示于中間 反對 預設格式 令文件按照原始碼的排列方式顯示 區隔標記 設定字、畫、表格等的擺放位置 不折行 令文字不因太長而繞行 建議折行 預設折行部位 字體標記 加重語氣 產生字體加粗 Bold 的效果 粗體標記 產生字體加粗的效果 強調標記 字體出現斜體效果 斜體標記 字體出現斜體效果 打字字體 Courier字體，字母寬度相同 加上底線 加上底線 反對 一級標題標記 變粗變大加寬，程度與級數反比 二級標題標記 將字體變粗變大加寬 三級標題標記 將字體變粗變大加寬 四級標題標記 將字體變粗變大加寬 五級標題標記 將字體變粗變大加寬 六級標題標記 將字體變粗變大加寬 字形標記 設定字形、大小、顏色 反對 基準字形標記 設定所有字形、大小、顏色 反對 字體加大 令字體稍為加大 字體縮細 令字體稍為縮細 畫線刪除 為字體加一刪除線 反對 程式碼 字體稍為加寬如 鍵盤字 字體稍為加寬，單一空白 范例 字體稍為加寬如 變數 斜體效果 傳記引述 斜體效果 引述文字區塊 縮排字體 述語定義 斜體效果 地址標記 斜體效果 下標字 下標字 上標字 指數（平方、立方等） 清單標記 順序清單 清單項目將以數字、字母順序排列 無序清單 清單項目將以圓點排列 清單項目 每一標記標示一項清單項目 選單清單 清單項目將以圓點排列，如 反對 目錄清單 清單項目將以圓點排列，如 反對 定義清單 清單分兩層出現 定義條目 標示該項定義的標題 定義內容 標示定義內容 表格標記 表格標記 設定該表格的各項參數 表格標題 做成一打通列以填入表格標題 表格列 設定該表格的列 表格欄 設定該表格的欄 表格標頭 相等于，但其內之字體會變粗 表單標記 表單標記 決定單一表單的運作模式 文字區塊 提供文字方盒以輸入較大量文字 輸入標記 決定輸入形式 選擇標記 建立 pop-up 卷動清單 選項 每一標記標示一個選項 圖形標記 圖形標記 用以插入圖形及設定圖形屬性 連結標記 連結標記 加入連結 基準標記 可將相對 URL 轉絕對及指定連結目標 框架標記 框架設定 設定框架 框窗設定 設定框窗 頁內框架 于網頁中間插入框架 IE 不支援框架 設定當瀏覽器不支援框架時的提示 影像地圖 影像地圖名稱 設定影像地圖名稱 連結區域 設定各連結區域 多媒體 背景聲音 于背景播放聲音或音樂 IE 多媒體 加入聲音、音樂或影像 其他標記 走動文字 令文字左右走動 IE 閃爍文字 閃爍文字 NC 頁內尋找器 可輸入關鍵字尋找于該一頁 反對 開頭定義 讓瀏覽器知道這是 HTML 文件 關系定義 定義該文件與其他 URL 的關系 StyleSheet 樣式表 控制網頁版面 自訂標記 獨立使用或與樣式表同用 注： 表示該標記屬圍堵標記，即需要關閉標記如 。 表示該標記屬空標記，即不需要關閉標記。IE 表示該標記只適用于 Internet Explorer。NC 表示該標記只適用于 Netscape Communicator。反對 表示該標記不為 W3C 所贊同，通常這標記是 IE 或 NC 自訂，且己為眾所支 持，只是 HTML 標準中有其它同功能或更好的選擇。棄用 表示該標記己為 W3C 所棄用，是過時的標記，但 HTML 具向下兼容的特 性，不用擔心新瀏覽器不支援舊標記。新 表示該標記是 HTML 4.0 中新增的。3、 HTML語言剖析之文件標記 ； ； ； 欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。 HTML 基本架構：以下 HTML Source Code 便是一份 HTML 文件的基本架構 ： 網頁的標題 網頁的內容，很多標記都作用于此 特點解說：整份文件處于標記與之間。用以聲明這是 HTML 文件，讓瀏覽器認出并正確處理此 HTML 文件。文件分兩部分，由至稱為開頭，至稱本文。基本上兩者各有適用的標記，如只可出現于開頭部分。開頭部分用以存載重要資訊，而只有本文部分會被顯示。所以大部分標記會運用于本文部分。所標示的是文件的標題。會出現于瀏覽器頂部及為別人 Bookmark 時的名稱，所以每頁有不同而明確的標題 是需要的。上述標記中只有具參數設定。 之參數設定：例子：text=#000000用以設定文字顏色。 #000000 代表黑色，亦可以采用顏色的名稱，即 text=black 。各種顏色的值及名稱可參考【調色原理】一節。link=#0000FF設定一般文字連結顏色。alink=#FF0000設定剛按下時文字連結顏色。vlink=#0000FF設定連結后的顏色。（被按過）。background=bg1.gif設定背景墻紙。GIF 或 JPEG 皆可，可以是絕對途徑或相對途徑。bgcolor=#FFFFFF設定背景顏色。當己設定背景墻紙時會失去作用，除非墻紙有透明部分。leftmargin=2設定整份文件顯示畫面的左方邊沿空間，單位為像素。 只適用于IEtopmargin=2設定整份文件顯示畫面的上方邊沿空間。 只適用于IEbgproperties=fixed固定背景墻紙，當卷動文字時墻紙不會跟著卷動。 只適用于IE標記及參數之字母大小都可以。4、 HTML語言剖析之排版標記 ； ； ； ； ； ； ； ； ； ： Top像很多電腦語言一樣，HTML 文件亦提供注解功能。瀏覽器會忽略此標記中的文字（可以 是很多行）而不作顯示，一般使用目的：為文中不同部份加上說明，方便日后修改。這對較復雜或非私人網頁尤其重要，它不單是提醒自已，亦提醒你的同事這部分 做什么、那部分做什么。例子：用作版權聲明。假如你不希望別人使用或復制你的網頁，可加上警告字眼。例子： ： Top稱為段落標記。作用：為字、畫、表格等之間留一空白行。本來是一圍堵標記，標于一段落的頭尾，但從 HTML 2.0 開始己不需要作結尾。 的常用參數： 如：align=center可選值：right, left, center。內定值： align=left例子： 原始碼 Here is the text for my paragraph. It doest matter how long it is,how many space are between the words or when I decide to hit the return key.It will create a new paragraph only when I begin the tag with another one.Heres the next paragraph. 顯示結果 Here is the text for my paragraph. It doest matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one.Heres the next paragraph. ： Top稱為換行標記。作用：令字、畫、表格等顯示于下一行。由于瀏覽器會自動忽略原始碼中空白和換行的部分，這令到成為最常用的標記之 一。因為無論你在原始碼中編好了多漂亮的文章，若不適當地加上換行標記或段落標記， 瀏覽器只會將它顯示成一大段。錯誤示范：（郵局可不會接受一行過的地址） 原始碼 566 E Boston Post RDMamaroneck NY 10543-9982United States of America 結果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 正確例子： 原始碼 566 E Boston Post RDMamaroneck NY 10543-9982United States of America 結果 566 E Boston Post RDMamaroneck NY 10543-9982United States of America ： Top稱為水平線。作用：插入一條水平線。 之參數修改：以： 為例。align=LEFT設定線條置放位置，可選擇：left；right；center 三種設定值。size=2設定線條厚度，以像素作單位，內定為 2。width=70%設定線條長度，可以是絕對值（以像素作單位）或相對值，內定為 100%。color=#0000FF 只適用于IE設定線條顏色，內定為黑色。 #0000FF 代表藍色，亦可以采用顏色的名稱，即 text=blue 。noshade設定線條為平面顯示，若刪去則具陰影或立體，這是內定值。例子： 原始碼 顯示結果- ： Top稱為居中標記。作用：令字、畫、表格等顯示于中間。這標記原先是 Netscape 所定義，后來其它瀏覽器都支持它，但你會發現很多標記已有 align=CENTER 的參數，似乎多馀了，事實上它還是常用的標記之一，其簡單 易用，常用于文字上，對于己加有 align=CENTER 參數的 標記亦要不厭其煩 地加上居中標記，因有狻多瀏覽器不支持 標記中的 align=CENTER 參數。例子： 原始碼 Chriss First HomepageWhats newMy profile 結果 Chriss First HomepageWhats newMy profile ： Top稱為預設格式標記。作用：令文件按照原始碼的排列方式顯示。這標記允許保留你于原始碼中輸入的空白及 Return。細看以下例子你便可體會到此標記的 威力。除了運用一大堆表格標記之外你只有采用這標記才能有此效果。能以標記產生對效果，或產生多于一行的空白才算上乘！例子： 原始碼 Creation of Webpage Log Analysis I Composer Learning 459 407 480 522 547 586 673 HTML Advanced 200 268 296 358 385 453 506顯示結果 Creation of Webpage Log Analysis I Composer Learning 459 407 480 522 547 586 673 HTML Advanced 200 268 296 358 385 453 506 ： Top稱為區隔標記。作用：設定字、畫、表格等的擺放位置。應用于 Style Sheet（式樣表）方面會更顯威力，它最終目的是給設計者另一種組織 能力，有 Class ; Style ; title ; ID 等屬性，將會于【Style Sheet】一節才作詳述，這處只介紹 一個屬性設定。以 為例：align=center可選值：center ; left ; right 。決定字、畫、表格等居中、靠左或靠右。 的作用和居中標記 一樣，前者是由 HTML3.0 開始 的標準，后者是通用己久的標示法。例子： 原始碼 Chriss First HomepageWhats newMy profile 結果 Chriss First HomepageWhats newMy profile ： Top稱為不折行標記。作用：令某些文字不因太長而繞行，一顯示于同一行或下一 行。它對住址、數學算式、一行數字、程式碼等尤為有用。例子：（其中 Chriss Creation of Webpage 將不被分開而顯示于同一行。） 碼 If you want to know how to create you own homepage quickly, dont miss Chriss Creation of Webpage which will help you a lot. 結果 If you want to know how to create you own homepage quickly, dont miss Chriss Creation of Webpage which will help you a lot. ： Top稱為建議折行標記。作用：預設折行部位。它沒有侵犯到 的責任，只是作建議而已，若觀者的系統解像度夠高的話，那么它是 不會折行的。例子：（若不加標記，整個網址會顯示于下一行。） 原始碼 Please visit my other 5、6、7、 homepage which locate at /SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place. 結果 Please visit my other homepage which locate at /SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place.5、 HTML語言剖析之字體標記 實體標記與邏輯標記 ： Top這一節【字體標記】你必須先明白實體標記與邏輯標記的分別，否則你會迷惑于為何不同 的標記卻有相同的效果。兩者分別有以下兩處：實體標記有固定的顯示效果，邏輯標記則依不同瀏覽器而不同。例如邏輯標記的 由于瀏覽器的不同它所標示的文字不一定出現斜體效果， 它可能是加底線、粗體或反白等，所以這一節是以它們在 IE 和 NC 中的效果作介 紹。多個實體標記亦可有效標示同一字句，邏輯標記則通常于舊瀏覽器不能有效顯示多 重的標示。例如兩個邏輯標記 及 同時標示一字句于舊瀏覽器常失去作用。實體標記有： 邏輯標記有： 若要求真確的效果當然以實體標記為佳。 ： Top兩者皆能產生字體加粗的效果，但必須注意的是當文件被設為 gb2312 Encoding 時，兩者所 標示的中文字不會于 Netscape Netvigator 顯示粗體效果。例子： （第一行是沒有任何字體標記的，作對照之用） HTML Source Code （原始碼） 瀏覽器顯示結果Creation of WebpageCreation of WebpageCreation of Webpage Creation of WebpageCreation of WebpageCreation of Webpage ： Top這些標記于 Internet Explorer 都產生斜體效果，而只有 于 Netscape Netvigator 失去作 用。這些標記中只有 較為特別，因它包括換行效果所以不必在它前面加上 標記。例子： HTML Source Code （原始碼） 瀏覽器顯示結果Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage Top為方便對照及記認，所以把十個標記于在一起介紹。 可令每字母有相等寬度且每字母之間的距離稍為加 寬。但于 NC 不見得如此。 是加底線的標記，一些特別的瀏覽器并不支援，因顧慮到與連結混淆。 加上刪除線的標記。 令字體加大。 令字體變細。 為下標字， 則為上標字，僅剩的數學標記。例子： （第一行是沒有任何字體標記的，作對照之用） HTML Source Code （原始碼） 瀏覽器顯示結果Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage123457 67899 Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage123457 67899 ： Top這些是標題標記，由 至 變粗變大加寬的程度逐漸減小。每個標題標記所標示 的字句將獨占一行且上下留一空白行。例子： 原始碼 Header Level 1Header Level 2Header Level 3Header Level 4Header Level 5Header Level 6 顯示結果 Header Level 1Header Level 2Header Level 3Header Level 4Header Level 5Header Level 6 ： Top這一節只有這兩個標記具參數設定，且兩者的參數設定是一樣的，都是負責設定文字的大 小、字形及顏色，但各有用處，且看以下比較： 可以用于文件的開頭部分，即 與 之間的位置，將 影響全文字句，是一個空標記，用以改變字體顯示的內定值。 是應用于文件的內文部分，即 與 之間的位置，只影響 所標示的字句，是一個圍堵標記。兩標記可同時存在，唯沒被 所標示的字句才直接受 所影 響，而 本身亦受 的影響。的參數設定：例子： Creation of Webpageface=Arial設定文字的字形。Arial 是常用的一種，請不要使用 Window 內建字 形以外的字形。于沒有設定為 Gb2312 Encoding 的中文網頁，Netscape Netvigator 不會顯示此標記 所指明的任何中文字形。size=+2設定文字的大小。其值可以是絕對或相對，絕對的意思便是標記自己決定文字的大小，不受 的影響，如size=5 表示其大小便是 5， 而html內定值為 3，即 size=3和沒有設定是一樣的。相對的意思便是在內定值 3 的基礎上增加或減少大小級數，如 size=+2 便等同絕 對表示法的 size=5，但若已設定 則其實際大小便是 n+2 不 再是 3+2 了。只有絕對表示法。color=#008000設定文字的顏色。#008000 表示綠色例子： 原始碼 I love Creation of WebpageI love Creation of WebpageI love Creation of Webpage 顯示結果 I love Creation of WebpageI love Creation of WebpageI love Creation of Webpage6、 HTML語言剖析之清單標記 : 稱為順序清單標記。則用以標示清單項目。所謂順序清單就是在每一項前面加上 1,2,3. 等數目，又稱編號清單。 的參數設定（常用）：例如： type=i設定數目款式，其值有五種，請參考 右表，內定為 type=1。start=4設定開始數目，不論設定了哪一數 目款式，其值只能是 1,2,3. 等整 數，內定為 start=1。Type Numbering style1 arabic numbers 1, 2, 3, .a lower alpha a, b, c, .A upper alpha A, B, C, .i lower roman i, ii, iii, .I upper roman I, II, III, . 的參數設定（常用）：例如： type=square只適用于非順序清單，設定符號款式，其值有三種，如下，內定為 type=disc：符號 是當 type=disc 時的列項符號。符號 if width=10 height=10 border=0 是當 type=circle 時的列項符號。符號 是當 type=square 時的列項符號。value=4只適用于順序清單，設定該一項的數目，其後各項將以此作為起始數目而遞增， 但前面各項則不受影響，其值只能是 1,2,3. 等整數，沒有內定值。例子： HTML Source Code （原始碼） 瀏覽器顯示結果My best friends:Michelle WeiMichael WanGloria Lam My best friends:Michelle WeiMichael WanGloria Lam ： 稱為無序清單標記。所謂無序清單就是在每一項前面加上 、 等符號，故又稱符號清單。 的參數設定（常用）：例如： type=square設定符號款式，其值有三種，如下，內定為 type=disc：符號 是當 type=disc 時的列項符號。符號 是當 type=circle 時的列項符號。符號 是當 type=square 時的列項符號。注意：由于 及 都有 type 這個參數，兩者盡可能選用其一。例子： HTML Source Code （原始碼） 瀏覽器顯示結果My Homepages:Penpals GardenICQ GardenSoftware CityCreation of Webpage My Homepages:Penpals GardenICQ GardenSoftware CityCreation of Webpage ： 這兩個標記都不為 W3C 所贊同，希望用者能以 及 代之。 及 ，基本上它和 是一樣的，在一些特別的瀏覽器可能表現出 的 效果，于舊版的 IE 或 NC 標記 不顯示符號或數目。兩標記的用法與 完全一 樣。例子： HTML Source Code （原始碼） 瀏覽器顯示結果My Homepages:Penpals GardenICQ GardenSoftware CityCreation of Webpage My Homepages:Penpals GardenICQ GardenSoftware CityCreation of Webpage : 稱為定義清單標記。 用以標示定義條目， 則用以標示定義內容。所謂定義清單就是一種分二層的項目清單，其不故符號及數目。三個標記都沒有常用的參數。而 可以獨立使用，只是一些舊的瀏覽器并不支 援，如 IE 3.0。常用的如 標記可用以制造段落第一個字前面的空白。例子： 原始碼 How to use Definition ListFirst, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.Other things to knowWe usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. 顯示結果 How to use Definition ListFirst, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.Other things to knowWe usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.7、 HTML語言剖析之表格標記表格標記 ： Top這三個標記是定義表格的最重要的標記，可以說只學這三個己足夠。是一個容器標記，意思是說它用以聲明這是表格而且其他表格標記只能在他的 范圍內才適用，屬容器標記的還有其他。用以標示表格列（row）用以標示儲存格（cell） 的參數設定（常用）：例如： width=400表格寬度，接受絕對值（如 80）及相對值（如 80%）。border=1表格邊框厚度，不同瀏覽器有不同的內定值，故請指明。cellspacing=2表格格線厚度，請看例子三，那是加厚到 5 的格線。cellpadding=2文字與格線的距離，請看例子四，那是加至 10 的 padding。align=CENTER表格的擺放位置（水平），可選值為： left, right, center，請看例子五或六，那表格 是放于中間的，為怕一些瀏覽器不支援，故特加上居中標記，只是多 層保證而己，當然只用亦可。valig