HTML英語意思是：Hypertext Marked Language，即超文本標記語言,是一種用來製作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱爲HTML文檔，它能獨立於各種操作系統平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web 的信息表示語言，用於描述Homepage的格式設計和它與WWW上其它Homepage 的連結信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。
標記一覽
標記 類型 譯名或意義 作 用 備註
文件標記
<HTML> ● 文件宣告 讓瀏覽器知道這是 HTML 文件
<HEAD> ● 開頭 提供文件整體資訊
<TITLE> ● 標題 定義文件標題，將顯示於瀏覽頂端
<BODY> ● 本文 設計文件格式及內文所在
排版標記
<!--註解--> ○ 說明標記 爲文件加上說明，但不被顯示
<P> ○ 段落標記 爲字、畫、表格等之間留一空白行
<BR> ○ 換行標記 令字、畫、表格等顯示於下一行
<HR> ○ 水平線 插入一條水平線
<CENTER> ● 居中 令字、畫、表格等顯示於中間 反對
<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示
<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置
<NOBR> ● 不折行 令文字不因太長而繞行
<WBR> ● 建議折行 預設折行部位
字體標記
<STRONG> ● 加重語氣 產生字體加粗 Bold 的效果
<B> ● 粗體標記 產生字體加粗的效果
<EM> ● 強調標記 字體出現斜體效果
<I> ● 斜體標記 字體出現斜體效果
<TT> ● 打字字體 Courier字體，字母寬度相同
<U> ● 加上底線 加上底線 反對
<H1> ● 一級標題標記 變粗變大加寬，程度與級數反比
<H2> ● 二級標題標記 將字體變粗變大加寬
<H3> ● 叄級標題標記 將字體變粗變大加寬
<H4> ● 四級標題標記 將字體變粗變大加寬
<H5> ● 五級標題標記 將字體變粗變大加寬
<H6> ● 六級標題標記 將字體變粗變大加寬
<FONT> ● 字形標記 設定字形、大小、顏色 反對
<BASEFONT> ○ 基準字形標記 設定所有字形、大小、顏色 反對
<BIG> ● 字體加大 令字體稍爲加大
<SMALL> ● 字體縮細 令字體稍爲縮細
<STRIKE> ● 畫線刪除 爲字體加一刪除線 反對
<CODE> ● 程式碼 字體稍爲加寬如<TT>
<KBD> ● 鍵盤字 字體稍爲加寬，單一空白
<SAMP> ● 範例 字體稍爲加寬如<TT>
<VAR> ● 變數 斜體效果
<CITE> ● 傳記引述 斜體效果
<BLOCKQUOTE> ● 引述文字區塊 縮排字體
<DFN> ● 述語定義 斜體效果
<ADDRESS> ● 地址標記 斜體效果
<SUB> ● 下標字 指數
<SUP> ● 下標字 下標字
清單標記
<OL> ● 順序清單 清單項目將以數字、字母順序排列
<UL> ● 無序清單 清單項目將以圓點排列
<LI> ○ 清單項目 每一標記標示一項清單項目
<MENU> ● 選單清單 清單項目將以圓點排列，如<UL> 反對
<DIR> ● 目錄清單 清單項目將以圓點排列，如<UL> 反對
<DL> ● 定義清單 清單分兩層出現
<DT> ○ 定義條目 標示該項定義的標題
<DD> ○ 定義內容 標示定義內容
表格標記
<TABLE> ● 表格標記 設定該表格的各項參數
<CAPTION> ● 表格標題 做成一打通列以填入表格標題
<TR> ● 表格列 設定該表格的列
<TD> ● 表格欄 設定該表格的欄
<TH> ● 表格標頭 相等於<TD>，但其內之字體會變粗
表單標記
<FORM> ● 表單標記 決定單一表單的運作模式
<TEXTAREA> ● 文字區塊 提供文字方盒以輸入較大量文字
<INPUT> ○ 輸入標記 決定輸入形式
<SELECT> ● 選擇標記 建立 pop-up 捲動清單
<OPTION> ○ 選項 每一標記標示一個選項
圖形標記
<IMG> ○ 圖形標記 用以插入圖形及設定圖形屬性
連結標記
<A> ● 連結標記 加入連結
<BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標
框架標記
<FRAMESET> ● 框架設定 設定框架
<FRAME> ○ 框窗設定 設定框窗
<IFRAME> ○ 頁內框架 於網頁中間插入框架 IE
<NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示
影像地圖
<MAP> ● 影像地圖名稱 設定影像地圖名稱
<AREA> ○ 連結區域 設定各連結區域
多媒體
<BGSOUND> ○ 背景聲音 於背景播放聲音或音樂 IE
<EMBED> ○ 多媒體 加入聲音、音樂或影像
其他標記
<MARQUEE> ● 走動文字 令文字左右走動 IE
<BLINK> ● 閃爍文字 閃爍文字 NC
<ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找於該一頁 反對
<META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件
<LINK> ○ 關係定義 定義該文件與其他 URL 的關係
StyleSheet
<STYLE> ● 式樣表 控制網頁版面
<span> ● 自訂標記 獨立使用或與式樣表同用
注：
● 表示該標記屬圍堵標記，即需要關閉標記如 </標記>。
○ 表示該標記屬空標記，即不需要關閉標記。
IE 表示該標記只適用於 Internet Explorer。
NC 表示該標記只適用於 Netscape Communicator。
反對 表示該標記不爲 W3C 所贊同，通常這標記是 IE 或 NC 自訂，且己爲衆所支 援，只是 HTML 標準中有其它同功能或更好的選擇。
棄用 表示該標記己爲 W3C 所棄用，是過時的標記，但 HTML 具向下兼容的特 性，不用擔心新瀏覽器不支援舊標記。
新 表示該標記是 HTML 4.0 中新增的。
調色原理
■ 調色原理：
HTML 的顏色表示可分兩種：
以命名方式定義常用的顏色，如 RED。
以 RGB 值表示，如 #FF0000 表示 red。
命名方式涵括的色種不多亦不甚方便，較少採用，以下介紹 RGB 值的原理：
衆所皆知顏色是由 "red" "green" "blue" 叄原色組合而成的，在 HTML 中對於彩度的定義是 採十六進位的，對於叄原色 HTML 分別給予兩個十六進位去定義，也就是每個原色可有 256 種彩度，故此叄原色可混合成一千六佰多萬的顏色。
例如
白色的組成是 red=ff, green=ff, blue=ff, RGB 值即爲 ffffff
紅色的組成是 red=ff, green=00, blue=00, RGB 值即爲 ff0000
綠色的組成是 red=00, green=ff, blue=00, RGB 值即爲 00ff00
藍色的組成是 red=00, green=00, blue=ff, RGB 值即爲 0000ff
黑色的組成是 red=00, green=00, blue=00, RGB 值即爲 000000
於應用時常在每個 RGB 值之前加上符號 # 以示分別，但不加亦可。
■ HTML 基本架構：
選按不同顏色按鍵以測試前景顏色效果 (只適合 Internet Explorer)
選按不同顏色按鍵以測試背景顏色效果
或輸入一個 RGB 顏色碼或名稱
■ 16 常用顏色表：
Color value Name Color value Name
#00FFFF aqua #808080 gray
#000080 navy #C0C0C0 silver
#000000 black #008000 green
#808000 olive #008080 teal
#0000FF blue #00FF00 lime
#800080 purple #FFFF00 yellow
#FF00FF fuchsia #800000 maroon
#FF0000 red #FFFFFF white
■ 其它常用顏色表：
Color value Name Color value Name
#F0F8FF aliceblue #A00000 antiquewith
#7FFFD4 aquamarine #F0FFFF azure
#F5F5DC beige #FFE4C4 bisque
#000000 black #FFEBCD blanchedalmond
#0000FF blue #8A2BE2 blueviolet
#A52A2A brown #DEB887 burlywood
#5F9EA0 cadetblue #7FFF00 chartreuse
#D2691E chocolate #FF7F50 coral
#C0F000 cornfloewrblue #FFF8DC cornsilk
#00FFFF cyan #00008B darkblue
#008B8B darkcyan #B8860B darkgoldenrod
#A9A9A9 darkgray #006400 darkgreen
#DA0000 darkhaki #8B008B darkmagenta
#556B2F darkolivegreen #DA000E darkorenge
#9932CC darkorchid #8B0000 darkred
#E9967A darksalmon #8FBC8F darkseagreen
#483D8B darkslateblue #2F4F4F darkslategray
#00CED1 darkturquoise #9400D3 darkviolet
#FF1493 deeppink #00BFFF deepskyblue
#696969 dimgray #1E90FF dodgerblue
#B22222 firebrick #FFFAF0 floralwhite
#228B22 forestgreen #DCDCDC gainsboro
#00000E gostwhite #FFD700 gold
#00E00D golenrod #808080 gray
#008000 green #ADFF2F greenyellow
#F0FFF0 honeydew #FF69B4 hotpink
#CD5C5C indianred #FFFFF0 ivory
#F0E68C khaki #E6E6FA lavender
#FFF0F5 lavenderblush #7CFC00 lawngreen
#FFFACD lemonchiffon #ADD8E6 lightblue
#F08080 lightcoral #E0FFFF lightcyan
#0000E0 lightgodenrod #0000E0 lightgodenrodyellow
#0000A0 lightgray #90EE90 lightgreen
#FFB6C1 lightpink #FFA07A lightsalmon
#20B2AA lightseagreen #87CEFA lightskyblue
#0000EB lightslateblue #778899 lightslategray
#B0C4DE lightsteelblue #FFFFE0 lightyellow
#32CD32 limegreen #FAF0E6 linen
#FF00FF magenta #800000 maroon
#66CDAA mediumaquamarine #0000CD mediumblue
#BA55D3 mediumorchid #ED0000 mediumpurpul
#3CB371 mediumseagreen #7B68EE mediumslateblue
#00FA9A mediumspringgreen #48D1CC mediumturquoise
#C71585 mediumvioletred #191970 midnightblue
#F5FFFA mintcream #FFE4E1 mistyrose
#FFE4B5 moccasin #FFDEAD navajowhite
#000080 navy #A0B0E0 navyblue
#FDF5E6 oldlace #6B8E23 olivedrab
#FFA500 orange #0E0EED orengered
#DA70D6 orchid #A00D00 palegodenrod
#98FB98 palegreen #AFEEEE paleturquoise
#DB7093 palevioletred #FFEFD5 papayawhip
#FFDAB9 peachpuff #CD853F peru
#FFC0CB pink #DDA0DD plum
#B0E0E6 powderblue #800080 purple
#FF0000 red #BC8F8F rosybrown
#4169E1 royalblue #8B4513 saddlebrown
#FA8072 salmon #F4A460 sandybrown
#2E8B57 seagreen #FFF5EE seashell
#A0522D sienna #87CEEB skyblue
#6A5ACD slateblue #708090 slategray
#FFFAFA snow #00FF7F springgreen
#4682B4 steelblue #D2B48C tan
#D8BFD8 thistle #FF6347 tomato
#40E0D0 turquoise #EE82EE violet
#00E0ED violetred #F5DEB3 wheat
#000E00 hite #F5F5F5 whitesmoke
#FFFF00 yellow #9ACD32 yellowgreen
連接標記
■ 本節主要介紹的標記：
<A>
<BASE>
欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。
■ <A> ：
▲Top
<A> 稱連結標記，由 <A> 與 </A> 所圍的文字、圖片等等可以成爲一個連結。
<A> 的一般參數設定：
例如 <a href="index.html" name="hello" target="_top">
href="index.html"
這參數不能與另一參數 name 同時使用，使用這參數才能造成可按的連結。
當作爲一外部連結時： href 所設定的是該連結所要連到的文件名稱，若 該文件與此 html 檔不是同在一目錄請加上適當的路徑，相對絕對皆可。相 對路徑與絕對路徑的分別、內部連結與外部連結的分別務必請看 Composer 教室的【連結進階】。
當作爲一內部連結時： href 所設定的是該連結所要連到的同文件內參考 點或指定文件之參考點，且不需要包圍任何字畫只需加上結束標示 </a>便 可以，例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便 是參考點，並需於其前加上符號 # 以作識別，參考點由下一個參數 name 事先於文件中埋下。
name="hello"
這參數是爲文件埋下參考點，作爲被連結，不會被顯示。所以說造成一個內部連 結需要使用兩次 <A> 連結標記。一個使用參數 name 事先於文件中埋下一參考 點，另一個使用參數 href 連到這個參考點。
target="_top"
設定連結被按後之結果所要顯示的視窗。可選值爲： _blank, _parent, _self, _top, 框 窗名稱。
target="框窗名稱"
這隻運用於框架中，若被設定則連結結果將顯示於該“框窗名稱”之框窗 中，框窗名稱是事先由框架標記所命名。
target="_blank" 或 target="new"
將連結的畫面內容，開在新的瀏覽視窗中。
target="_parent"
將連結的畫面內容，當成文件的上一個畫面。
target="_self"
將連結的畫面內容，顯示在目前的視窗中。(內定值)
target="_top"
將框架中連結的畫面內容，顯示在沒有框架的視窗中。（即除去了框架)
例子一：（外部連結）
原始碼
<a href="../promote/engines.html">四百五十個尋找引擎</a>
<p><a href="http://www.hkseek.com/icq";>
<img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a>
<p><a href="http://www.hkseek.com/icq";>
<img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a>
顯示結果 四百五十個尋找引擎
例子二（內部連結）：請到 PenPal Garden 的 FAQ Page 刻體驗一下何爲內部連結。
原始碼 <a name="test"></a>
<a href="#test">本頁的內部連結</a>
<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a>
顯示結果
本頁的內部連結
跳到 PenPal Garden 的 FAQ 部分
■ <BASE> ：
▲Top
<BASE> 是一個連結基準標記，用以改變文件中所有連結標記的參數內定值。它只能應用 於文件的開頭部分，即標記 <HEAD> 與 </HEAD> 之間。
<BASE> 的一般參數設定：
例如 <base href="http://www.microsoft.com/"; target="_top">
href="http://www.microsoft.com/";
設定該頁網頁中所有 HTTP 文件及圖形（包括相對路徑連結及 <IMG> 圖形標記 等）的內定路徑，其他如 ftp:// 及 gopher:// 等則不受影響。這參數只可填入一個相 對或絕對的路徑，不必填入檔案名稱。一般相對路徑連結及 <IMG> 圖形標記等是 內定以該頁網頁所在的目錄作爲起點，若依這例子，該文件中所有連結將會以 http://www.microsoft.com/ 作爲起點，若其中有連結如 <a href="index.html">Back _fcksavedurl=""index.html">Back" to Main Page</a> ，那末它不會連到自已目錄下的 index.html，它將會連到 Microsoft 的 首頁，這是因爲相對路徑己給 <BASE> 轉成絕對的了。
target="_top"
設定該頁網頁中所有連結被按後之結果所要顯示的視窗，免得分別爲所有連結加 上 target 參數，常應用於框架中。其設定與 <A> 連結標記中 target 參數相同。
例子容後再寫，你可親自嘗試或到一些以框架製作的網頁去體驗一下
圖形標記
■ 本節主要介紹的標記：
<IMG>
欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。
■ <IMG> ：
<IMG> 稱圖形標記，主要用以插入圖片於網頁中，至於其它用處如配合影片檔案等的播 放及影像地圖（Image Map 或稱一圖多連結）則於不會在這節提及，請看【影像地圖】及 【其他標記】。
<IMG> 的一般參數設定：
例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
src="logo.gif"
圖片來源，接受 .gif, .jpg 及 .png 格式，前兩者通行己久，後者由 96 年開始發展， 於未來取代前兩者。若圖片檔與該 html 檔同處一目錄則只需寫上檔案名稱，否則 必須加上正確的途徑，相對及絕對皆可。兩者的分別請看 Composer 教室之【連結 進階】。
width=100 height=100
設定圖片大小，此寬度、及高度一般採用 pixels 作單位。通常只設爲圖片的真實 大小以免失真，若需要改變圖片大小最好事先使用圖像編輯工具。
hspace=5 vspace=5
設定圖片邊沿空白，以免文字或其它圖片過於貼近。hspace 是設定圖片左右的空 間，vspace 則是設定圖片上下的空間，高度採用 pixels 作單位。
border=2
圖片邊框厚度。
align="top"
調整圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、底端、 左右等，可選值：top, middle, bottom, left, right，內定爲 botom。Netscape 還支援 texttop, baseline, absmiddle, absbottom，
texttop 表示圖片和文字依頂線對齊，
baseline 表示圖片對齊到目前文字行底線值，
absmiddle 表示圖片對齊到目前文字行絕對中央，
absbottom 表示圖片對齊到目前文字行絕對底部，（絕對底部意指它考慮到比方 y 、g、q 等字的下緣）。
alt="Logo of PenPal Garden"
這是用以描述該圖形的文字，若用者使用文字瀏覽器，由於不支援圖片，這些文 字更會代替圖片而被顯示。若於支援圖片顯示的瀏覽器，當鼠標移至圖片上該些 文字亦會顯示。
lowsrc="pre_logo.gif"
設定先顯示低解像圖片，若所加入的是一張很大的圖片，下載需時很長，這張低 解像圖片會先被顯示以免瀏覽失卻興趣，通當是原圖片灰階版本。
例子一：
原始碼 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入
顯示結果 普通插入
例子二：
原始碼 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 設定上下左右空白位置
顯示結果 設定上下左右空白位置
例子叄：
原始碼 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 設定上下左右空白位置
顯示結果 設定字畫中間對齊，邊框厚度爲 4。
例子四：
原始碼 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 設定圖片*右。
顯示結果 設定圖片*右。
例子五：
原始碼 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的圖片
顯示結果 放大了的圖片
其他標記
■ 本節主要介紹的標記：
<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>
欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。
■ <MARQUEE>：
<MARQUEE> 只適用於 IE ，臺灣譯爲「跑馬燈」如 Status Bar 的那種，意指走動或捲動的 文字，其參數設定頗多。我先舉些例子，然後再列出各參數。
例子一：
原始碼 <marquee width=150>I'm a small MARQUEE</marquee>
顯示結果 I'm a small MARQUEE
例子二：
原始碼 <marquee behavior=slide>This is a slide effect</marquee>
顯示結果 This is a slide effect
例子叄：
原始碼 <marquee behavior=alternate>撞來撞去，啊！我昏啦</marquee>
顯示結果 撞來撞去，啊！我昏啦
例子四：
原始碼 <marquee scrolldelay=5 scrollamount=50>譁！！太快了，我又昏啦</marquee>
顯示結果 譁！！太快了，我又昏啦
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
behavior="SCROLL"
決定文字的捲動方式，可選值爲：
SCROLL 一般捲動，是內定值。
SLIDE 如幻燈片，一格格的，效果是文字一接觸左邊便全部消失。
ALTERNATE 文字向左右兩邊撞來撞去。
direction="LEFT"
設定文字的捲動方向，LEFT 表示向左，是內定值，RIGHT 表示向右。
bgcolor="#0000FF"
設定文字捲動範圍的背景顏色，顏色值可參考【調色原理】。
height="30" width="150"
>設定文字捲動範圍，可採用相對或絕對，如 30% 或 30 等，單位爲像素。
hspace="0" vspace="0"
設定文字的水平及垂直空白位置。
loop="INFINITE"
設定文字捲動次數，其值可以是正整數或 INFINITE，INFINITE 是內定值，表示無 限次。
scrollamount="30"
每「格」文字之間的間隔，單位是像素。
scrolldelay="500"
文字捲動的停頓時間，單位是毫秒。
■ <BLINK> ：
▲Top
<BLINK> 是令文字閃爍，只適用於 NC，用法直接，沒有參數。看看例子便知：
例子：
原始碼 <blink>我是天上星，閃又閃</blink>
顯示結果 我是天上星，閃又閃
■ <ISINDEX> ：
▲Top
<ISINDEX> 可讓某些 Web Server 找尋網頁內的關鍵字，假如你的 Web Server 提供這樣的 找尋功能，使用者的瀏覽器也支援這些找尋功能，那麼，載入網頁時就會看到一個簡單的 找尋方塊。其用法直接，沒有參數，本來是要放於 <HEAD> 標記內的，但把它放在 <BODY> 標記內亦不見有問題，請記住，3W 以反對此標記。
例子：
原始碼 <isindex>
顯示結果
--------------------------------------------------------------------------------
可以搜索該索引。請鍵入要搜索的關鍵字:
--------------------------------------------------------------------------------
■ <META> ：
▲Top
<META> 是放於 <HEAD> 與 </HEAD>之間的標記，功用與變化等對，所以我公式化地介 紹。
<meta name="Description" content="This is Chris's Home Page">
該網頁的描述，作用於尋找引擎的登錄，其詳細用法請參加考【登錄技巧】
<meta name="Keywords" content="Chris, Web, Music, photo">
該網頁的關鍵字，作用於尋找引擎的登錄，其詳細用法請參加考【登錄技巧】
<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
以上行功能相同，都是要瀏覽器重新載入該頁，不要使用快取檔案，當然可以修 改該 Expire 時間。
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
設定這是 HTML 文件及其編碼語系，中文網頁請使用 big5 那行，或者不設編碼亦 可，純英文網頁建議使用 iso-8859-1。
<meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
這隻表示該網頁由甚麼編輯器寫成。
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
這一行較爲實用，能於預定秒數內自動轉到指定的網址。原始碼中 10 表示 10秒。
■ <LINK> ：
▲Top
<LINK> 用來將目前文件與其它 URL 作連結，但不會有連結按鈕，用於 <HEAD> 標記間， 格式如下：
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">
