html知識

原創 zhouyin1988 2018-08-31 17:33

 目錄
1、HTML語言剖析之Html簡介
2、HTML語言剖析之HTML標記一覽
3、HTML語言剖析之文件標記
4、HTML語言剖析之排版標記
5、HTML語言剖析之字體標記
6、HTML語言剖析之清單標記
7、HTML語言剖析之表格標記
8、HTML語言剖析之表單標記
9、HTML語言剖析之圖形標記
10、HTML語言剖析之鏈接標記
11、HTML語言剖析之多媒體標記
12、HTML語言剖析之其他標記
13、HTML語言剖析之特殊字符
14、HTML語言剖析之調色原理

1、HTML語言剖析之Html簡介
全寫： HyperText Mark-up Language
譯名： 超文件註標式語言（譯名之一）
簡釋：一種爲普通文件中某些字句加上標示的語言，其目的在於運用標記（tag）使文件達到預期的顯示效果。
HTML 是在 SGML 定義下的一個描述性語言，或可說 HTML 是 SGML 的一個應用程式，HTML 不是程式語言，如 C++ 和 Java 之類，它只是標示語言，基本上你只要明白了各種 標記的用法便算學懂了 HTML，HTML 的格式非常簡單，只是由文字及標記組合而成，於 編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然 以專業的網頁編輯軟件爲佳。
■ 閱讀須知：
這一篇【HTML剖析】偏重於標記的介紹，考慮到易懂及每節的篇幅問題，我並不按 W3C 的 HTML 分類，這可令你更易選擇有興趣的標記，其中只有【文件標記】是必讀的，其 餘可任意選擇。這一篇不會提及任何網頁編輯軟件，只要掌握了 HTML ，任何網頁 編輯工具都可以變成一把利器。
■ 標記寫法：
任何標記皆由"<"及">"所圍住，如 <P>
標記名與小於號之間不能留有空白字符。
某些標記　要加上參數，某些則不必。如 <font size="+2">Hello</font>
參數只可加於起始標記中。
在起始標記之標記名前加上符號"/"便是其終結標記，如 </font>
標記字母大小寫皆可。

■ 圍堵標記與空標記：
標記按型態分爲圍堵標記與空標記
圍堵標記
顧名思義，它以起始標記及終結標記將文字圍住，令其達到預期顯示效果。
例如 HTML Source ： <b>Creation of Webpage</b> is my favourite.
顯示成： Creation of Webpage is my favourite.

其中 <b></b> 便稱爲圍堵標記。
它以起始標記<b>及終結標記</b>標示文字 Creation of webpage ，令它顯示成粗體，兩者失其一都會發生錯誤顯示。


空標記
是指標記單獨出現，只有起始標記沒有終結標記。
例如 HTML Source：
I love Creation of Webpage.<br>It's a wonderful place.
顯示成：
I love Creation of Webpage.
It's a wonderful place.

其中換行標記<br>便屬空標記。
它的作用便是將標記後所有東西顯示於下一行，可見終結標記於它是沒意義的， 但有些人會爲空標記加上終結標記，這是爲方便記認而己，對 HTML 沒有影響。

admin 2006-11-02 04:33
2、HTML語言剖析之HTML標記一覽

標記 類型 譯名或意義 作 用 備註
文件標記
<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 中新增的。

admin 2006-11-02 04:34
3、HTML語言剖析之文件標記

<HTML> ； <HEAD> ； <TITLE> ； <BODY>
欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。

■ HTML 基本架構：
以下 HTML Source Code 便是一份 HTML 文件的基本架構 ：

<HTML>
<HEAD>
<TITLE> 網頁的標題 </TITLE>
</HEAD>
<BODY>
網頁的內容，很多標記都作用於此
</BODY>
</HTML>

特點解說：

整份文件處於標記<HTML>與</HTML>之間。
<HTML>用以聲明這是 HTML 文件，讓瀏覽器認出並正確處理此 HTML 文件。

文件分兩部分，由<HEAD>至</HEAD>稱爲開頭，<BODY>至</BODY>稱本文。
基本上兩者各有適用的標記，如<TITLE>只可出現於開頭部分。

開頭部分用以存載重要資訊，而只有本文部分會被顯示。
所以大部分標記會運用於本文部分。

<TITLE>所標示的是文件的標題。
會出現於瀏覽器頂部及爲別人 Bookmark 時的名稱，所以每頁有不同而明確的標題 是需要的。
上述標記中只有<BODY>具參數設定。

■ <BODY> 之參數設定：
例子：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">

text="#000000"
用以設定文字顏色。 #000000 代表黑色，亦可以採用顏色的名稱，即 text="black" 。各種顏色的值及名稱可參考【調色原理】一節。

link="#0000FF"
設定一般文字連結顏色。

alink="#FF0000"
設定剛按下時文字連結顏色。

vlink="#0000FF"
設定連結後的顏色。（被按過）。

background="bg1.gif"
設定背景牆紙。GIF 或 JPEG 皆可，可以是絕對途徑或相對途徑。

bgcolor="#FFFFFF"
設定背景顏色。當己設定背景牆紙時會失去作用，除非牆紙有透明部分。

leftmargin=2
設定整份文件顯示畫面的左方邊沿空間，單位爲像素。 『只適用於IE』

topmargin=2
設定整份文件顯示畫面的上方邊沿空間。 『只適用於IE』

bgproperties="fixed"
固定背景牆紙，當捲動文字時牆紙不會跟著捲動。 『只適用於IE』
標記及參數之字母大小都可以。

admin 2006-11-02 04:34
4、HTML語言剖析之排版標記

<!--註解--> ； <P> ； <BR> ； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ；
■<!--註解-->： ▲Top

像很多電腦語言一樣，HTML 文件亦提供註解功能。瀏覽器會忽略此標記中的文字（可以 是很多行）而不作顯示，一般使用目的：
爲文中不同部份加上說明，方便日後修改。
這對較複雜或非私人網頁尤其重要，它不單是提醒自已，亦提醒你的同事這部分 做什麼、那部分做什麼。
例子：
<!--由這處開始是產品訂購表格-->

用作版權聲明。
假如你不希望別人使用或複製你的網頁，可加上警告字眼。
例子：
<!--本文版權爲 1998, Creation of Webpage 所擁有，未經許，請勿抄摘-->

■ <P> ： ▲Top

<P>稱爲段落標記。作用：爲字、畫、表格等之間留一空白行。
本來<P>是一圍堵標記，標於一段落的頭尾，但從 HTML 2.0 開始己不需要</P>作結尾。

<P> 的常用參數： 如：<p align="center">

align="center"
可選值：right, left, center。
內定值： align="left"
例子： 原始碼 Here is the text for my paragraph. It does't 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.
<P>Here's the next paragraph.
顯示結果 Here is the text for my paragraph. It does't 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.
Here's the next paragraph.



■ <BR> ： ▲Top

<BR>稱爲換行標記。作用：令字、畫、表格等顯示於下一行。
由於瀏覽器會自動忽略原始碼中空白和換行的部分，這令到<BR>成爲最常用的標記之 一。因爲無論你在原始碼中編好了多漂亮的文章，若不適當地加上換行標記或段落標記， 瀏覽器只會將它顯示成一大段。

錯誤示範：（郵局可不會接受一行過的地址） 原始碼 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
結果 566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America


正確例子： 原始碼 566 E Boston Post RD
<BR>Mamaroneck NY 10543-9982
<BR>United States of America
結果 566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America


■ <HR> ： ▲Top

<HR>稱爲水平線。作用：插入一條水平線。
<HR> 之參數修改：
以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 爲例。

align="LEFT"
設定線條置放位置，可選擇：left；right；center 三種設定值。

size="2"
設定線條厚度，以像素作單位，內定爲 2。

width="70%"
設定線條長度，可以是絕對值（以像素作單位）或相對值，內定爲 100%。

color="#0000FF" 『只適用於IE』
設定線條顏色，內定爲黑色。 #0000FF 代表藍色，亦可以採用顏色的名稱，即 text="blue" 。

noshade
設定線條爲平面顯示，若刪去則具陰影或立體，這是內定值。
例子： 原始碼 <HR>
<HR align="LEFT" size="4">
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
顯示結果
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------



■ <CENTER> ： ▲Top

<CENTER>稱爲居中標記。作用：令字、畫、表格等顯示於中間。
這標記原先是 Netscape 所定義，後來其它瀏覽器都支持它，但你會發現很多標記已有 align="CENTER" 的參數，<CENTER>似乎多餘了，事實上它還是常用的標記之一，其簡單 易用，常用於文字上，對於己加有 align="CENTER" 參數的 <TABLE> 標記亦要不厭其煩 地加上居中標記，因有狻多瀏覽器不支持<TABLE> 標記中的 align="CENTER" 參數。

例子： 原始碼 <CENTER>Chris's First Homepage</CENTER>
<CENTER>What's new</CENTER>
<CENTER>My profile</CENTER>
結果 Chris's First Homepage
What's new
My profile


■ <PRE> ： ▲Top

<PRE>稱爲預設格式標記。作用：令文件按照原始碼的排列方式顯示。
這標記允許保留你於原始碼中輸入的空白及 Return。細看以下例子你便可體會到此標記的 威力。除了運用一大堆表格標記之外你只有採用這標記纔能有此效果。

能以<PRE>標記產生對　效果，或產生多於一行的空白纔算上乘！

例子： 原始碼     <pre>   Creation of Webpage Log Analysis I

  Composer Learning 459 407 480 522 547 586 673
  HTML Advanced   200 268 296 358 385 453 506</pre>

顯示結果         Creation of Webpage Log Analysis I   

  Composer Learning 459 407 480 522 547 586 673
  HTML Advanced   200 268 296 358 385 453 506



■ <DIV> ： ▲Top

<DIV>稱爲區隔標記。作用：設定字、畫、表格等的擺放位置。
<DIV>應用於 Style Sheet（式樣表）方面會更顯威力，它最終目的是給設計者另一種組織 能力，有 Class ; Style ; title ; ID 等屬性，將會於【Style Sheet】一節才作詳述，這處只介紹 一個屬性設定。
以 <DIV align="center"> 爲例：


align="center"
可選值：center ; left ; right 。決定字、畫、表格等居中、靠左或靠右。
<DIV align="center"> 的作用和居中標記 <CENTER>一樣，前者是由 HTML3.0 開始 的標準，後者是通用己久的標示法。
例子： 原始碼 <DIV align="center">Chris's First Homepage
<br>What's new
<br>My profile</DIV>
結果 Chris's First Homepage
What's new
My profile


■ <NOBR> ： ▲Top

<NOBR>稱爲不折行標記。作用：令某些文字不因太長而繞行，一　顯示於同一行或下一 行。它對住址、數學算式、一行數字、程式碼等尤爲有用。
例子：（其中 Chris's Creation of Webpage 將不被分開而顯示於同一行。） 碼 If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot.
結果 If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot.


■ <WBR> ： ▲Top

<WBR>稱爲建議折行標記。作用：預設折行部位。
它沒有侵犯到 <BR> 的責任，只是作建議而已，若觀者的系統解像度夠高的話，那麼它是 不會折行的。
例子：（若不加<WBR>標記，整個網址會顯示於下一行。） 原始碼 Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/<WBR>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 http://www.geocities.com/SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place.

admin 2006-11-02 04:35
5、HTML語言剖析之字體標記

<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>
■實體標記與邏輯標記 ： ▲Top

這一節【字體標記】你必須先明白實體標記與邏輯標記的分別，否則你會迷惑於爲何不同 的標記卻有相同的效果。兩者分別有以下兩處：
實體標記有固定的顯示效果，邏輯標記則依不同瀏覽器而不同。
例如邏輯標記的 <EM> 由於瀏覽器的不同它所標示的文字不一定出現斜體效果， 它可能是加底線、粗體或反白等，所以這一節是以它們在 IE 和 NC 中的效果作介 紹。

多個實體標記亦可有效標示同一字句，邏輯標記則通常於舊瀏覽器不能有效顯示多 重的標示。
例如兩個邏輯標記 <EM> 及 <STRONG> 同時標示一字句於舊瀏覽器常失去作用。

實體標記有：
<I> <B> <U>
邏輯標記有：
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
若要求真確的效果當然以實體標記爲佳。

■<STRONG> <B> ： ▲Top

兩者皆能產生字體加粗的效果，但必須注意的是當文件被設爲 gb2312 Encoding 時，兩者所 標示的中文字不會於 Netscape Netvigator 顯示粗體效果。
例子： （第一行是沒有任何字體標記的，作對照之用） HTML Source Code （原始碼） 瀏覽器顯示結果
Creation of Webpage
<br><STRONG>Creation of Webpage</STRONG>
<br><B>Creation of Webpage</B> Creation of Webpage
Creation of Webpage
Creation of Webpage


■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>： ▲Top

這些標記於 Internet Explorer 都產生斜體效果，而只有 </DFN> 於 Netscape Netvigator 失去作 用。這些標記中只有 <ADDRESS> 較爲特別，因它包括換行效果所以不必在它前面加上 <BR> 標記。
例子： HTML Source Code （原始碼） 瀏覽器顯示結果
<I>Creation of Webpage</I>
<br><EM>Creation of Webpage</EM>
<br><VAR>Creation of Webpage</VAR>
<br><CITE>Creation of Webpage</CITE>
<br><DFN>Creation of Webpage</DFN>
<ADDRESS>Creation of Webpage</ADDRESS> Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage


■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> ▲Top

爲方便對照及記認，所以把十個標記於在一起介紹。
<TT> <SAMP> <CODE> <KBD> 可令每字母有相等寬度且每字母之間的距離稍爲加 寬。但於 NC 不見得如此。
<U> 是加底線的標記，一些特別的瀏覽器並不支援，因顧慮到與連結混淆。
<STRIKE> 加上刪除線的標記。
<BIG> 令字體加大。
<SMALL> 令字體變細。
<SUB> 爲下標字， <SUP> 則爲上標字，僅剩的數學標記。
例子： （第一行是沒有任何字體標記的，作對照之用） HTML Source Code （原始碼） 瀏覽器顯示結果
Creation of Webpage
<br><TT>Creation of Webpage</TT>
<br><SAMP>Creation of Webpage</SAMP>
<br><CODE>Creation of Webpage</CODE>
<br><KBD>Creation of Webpage</KBD>
<br><U>Creation of Webpage</U>
<br><STRIKE>Creation of Webpage</STRIKE>
<br><BIG>Creation of Webpage</BIG>
<br><SMALL>Creation of Webpage</SMALL>
<br>12345<SUB>7</SUB> 6789<SUP>9</SUP> Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899


■<H1> <H2> <H3> <H4> <H5> <H6>： ▲Top

這些是標題標記，由 <H1> 至 <H6> 變粗變大加寬的程度逐漸減小。每個標題標記所標示 的字句將獨佔一行且上下留一空白行。
例子： 原始碼 <H1>Header Level 1</H1>
<H2>Header Level 2</H2>
<H3>Header Level 3</H3>
<H4>Header Level 4</H4>
<H5>Header Level 5</H5>
<H6>Header Level 6</H6>
顯示結果 Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6


■<FONT> <BASEFONT>： ▲Top

這一節只有這兩個標記具參數設定，且兩者的參數設定是一樣的，都是負責設定文字的大 小、字形及顏色，但各有用處，且看以下比較：
<BASEFONT> 可以用於文件的開頭部分，即 <HEAD> 與 </HEAD> 之間的位置，將 影響全文字句，是一個空標記，用以改變字體顯示的內定值。
<FONT> 是應用於文件的內文部分，即 <BODY> 與 </BODY> 之間的位置，隻影響 所標示的字句，是一個圍堵標記。
兩標記可同時存在，唯沒被 <FONT> 所標示的字句才直接受 <BASEFONT> 所影 響，而 <FONT> 本身亦受 <BASEFONT> 的影響。
<FONT>的參數設定：
例子： <font face="Arial" size="+2" color="#008000">Creation of Webpage</font>


face="Arial"
設定文字的字形。Arial 是常用的一種，請不要使用 Window 內建字 形以外的字形。於沒有設定爲 Gb2312 Encoding 的中文網頁，Netscape Netvigator 不會顯示此標記 所指明的任何中文字形。
size="+2"
設定文字的大小。其值可以是絕對或相對，
絕對的意思便是標記自己決定文字的大小，不受 <BASEFONT> 的影響，如
size="5" 表示其大小便是 5， 而html內定值爲 3，即 size="3"和沒有設定是一樣的。
相對的意思便是在內定值 3 的基礎上增加或減少大小級數，如 size="+2" 便等同絕 對錶示法的 size="5"，但若已設定 <BASEFONT size="n"> 則其實際大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有絕對錶示法。
color="#008000"
設定文字的顏色。#008000 表示綠色
例子： 原始碼 <font size="+1">I love Creation of Webpage</font>
<br><font size="+2" color="#800080">I love Creation of Webpage</font>
<br><font face="Times New Roman" size="5" color="#008000">I love Creation of Webpage</font>
顯示結果 I love Creation of Webpage
I love Creation of Webpage
I love Creation of Webpage

admin 2006-11-02 04:35
6、HTML語言剖析之清單標記

<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>
■ <OL> <LI> : 　

<OL>稱爲順序清單標記。<LI>則用以標示清單項目。
所謂順序清單就是在每一項前面加上 1,2,3... 等數目，又稱編號清單。
<OL> 的參數設定（常用）：
例如： <ol type="i" start="4"></ol>

type="i"
設定數目款式，其值有五種，請參考 右表，內定爲 type="1"。
start="4"
設定開始數目，不論設定了哪一數 目款式，其值只能是 1,2,3.. 等整 數，內定爲 start="1"。
Type Numbering style
1 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, ...



<LI> 的參數設定（常用）：
例如： <li type="square" value="4">

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:
<ol>
<li>Michelle Wei
<li>Michael Wan
<li>Gloria Lam
</ol> My best friends:
Michelle Wei
Michael Wan
Gloria Lam



■ <UL> ： 　

<UL>稱爲無序清單標記。
所謂無序清單就是在每一項前面加上 、、 等符號，故又稱符號清單。
<UL> 的參數設定（常用）：
例如： <UL type="square">

type="square"
設定符號款式，其值有三種，如下，內定爲 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
注意：由於 <UL> 及 <LI> 都有 type 這個參數，兩者儘可能選用其一。

例子： HTML Source Code （原始碼） 瀏覽器顯示結果
My Homepages:
<ul>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</ul> My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage



■ <MENU> <DIR> ： 　

這兩個標記都不爲 W3C 所贊同，希望用者能以 <ul> 及 <ol> 代之。
<MENU> 及 <DIR>，基本上它和 <ul> 是一樣的，在一些特別的瀏覽器可能表現出 <ol> 的 效果，於舊版的 IE 或 NC 標記 <DIR> 不顯示符號或數目。兩標記的用法與 <ul> 完全一 樣。
例子： HTML Source Code （原始碼） 瀏覽器顯示結果
My Homepages:
<dir>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</dir> My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage



■ <DL> <DT> <DD> : 　

<DL>稱爲定義清單標記。 <DT> 用以標示定義條目，<DD> 則用以標示定義內容。
所謂定義清單就是一種分二層的項目清單，其不故符號及數目。
三個標記都沒有常用的參數。而 <DT> <DD> 可以獨立使用，只是一些舊的瀏覽器並不支 援，如 IE 3.0。常用的如 <DD> 標記可用以製造段落第一個字前面的空白。

例子： 原始碼 <dl>
<dt>How to use Definition List
<dd>First, 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.
<dt>Other things to know
<dd>We 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.
</dl>
顯示結果 How to use Definition List
First, 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 know
We 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.

admin 2006-11-02 04:36
7、HTML語言剖析之表格標記


表格標記
<TABLE> <TR> <TD>
<TH>
<CAPTION>
■ <TABLE> <TR> <TD> ： ▲Top

這三個標記是定義表格的最重要的標記，可以說只學這三個己足夠。
<TABLE>是一個容器標記，意思是說它用以聲明這是表格而且其他表格標記只能在他的 範圍內才適用，屬容器標記的還有其他。
<TR>用以標示表格列（row）
<TD>用以標示儲存格（cell）
<TABLE> 的參數設定（常用）：
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">


width="400"
表格寬度，接受絕對值（如 80）及相對值（如 80%）。

border="1"
表格邊框厚度，不同瀏覽器有不同的內定值，故請指明。

cellspacing="2"
表格格線厚度，請看例子三，那是加厚到 5 的格線。

cellpadding="2"
文字與格線的距離，請看例子四，那是加至 10 的 padding。

align="CENTER"
表格的擺放位置（水平），可選值爲： left, right, center，請看例子五或六，那表格 是放於中間的，爲怕一些瀏覽器不支援，故特加上居中標記<CENTER>，只是多 層保證而己，當然只用<CENTER>亦可。

valign="TOP".
表格內字畫等的擺放貼　位置（垂直），可選值爲： top, middle, bottom。

background="myweb.gif"
表格　紙，與 bgcolor 不要同用。

bgcolor="#0000FF"
表格底色，與 background 不要同用，請看例子六。

bordercolor="#FF00FF"
表格邊框顏色，NC 與 IE 有不同的效果，請看例子六。

bordercolorlight="#00FF00"
表格邊框向光部分的顏色，請看例子二。『只適用於 IE』

bordercolordark="#00FFFF"
表格邊框背光部分的顏色，請看例子二，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用於 IE』

cols="2"
表格欄位數目，只是讓瀏覽器在下載表格是先畫出整個表格而己。
<TR> 的參數設定（常用）：
例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

align="RIGHT"
該一列內字畫等的擺放貼　位置（水平），可選值爲： left, center, right。

valign="MIDDLE"
該一列內字畫等的擺放貼　位置（垂直），可選值爲： top, middle, bottom。

bgcolor="#0000FF"
該一列底色，請看例子五。

bordercolor="#FF00FF"
該一列邊框顏色，請看例子三。『只適用於 IE』

bordercolorlight="#808080"
該一列邊框向光部分的顏色，請看例子三。『只適用於 IE』

bordercolordark="#FF0000"
該一列邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用於 IE』
<TD> 的參數設定（常用）：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

width="48%"
該一儲存格寬度，接受絕對值（如 80）及相對值（如 80%）。

height="400"
該一儲存格高度。

colspan="5"
該一儲存格向右打通的欄數。請看例子六

rowspan="4"
該一儲存格向下打通的列數。請看例子六

align="RIGHT"
該一儲存格內字畫等的擺放貼　位置（水平），可選值爲： left, center, right。

valign="BOTTOM"
該一儲存格內字畫等的擺放貼　位置（垂直），可選值爲： top, middle, bottom。

bgcolor="#FF00FF"
該一儲存格底色，請看例子四。

bordercolor="#808080"
該一儲存格邊框顏色，請看例子三。『只適用於 IE』

bordercolorlight="#FF0000"
該一儲存格邊框向光部分的顏色，請看例子三。『只適用於 IE』

bordercolordark="#00FF00"
該一儲存格邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用於 IE』

background="myweb.gif"
該一儲存格　紙，與 bgcolor 任用其一。
例子一： 原始碼 <table width="60%" border="1">
<tr><td>只有一個儲存格（cell）的表格</td></tr>
</table>
顯示結果   只有一個儲存格（cell）的表格




例子二： 原始碼 <table width="60%" border="0" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一列第一欄</td><td>第一列第二欄</td></tr>
</table>
顯示結果   第一列第一欄 第一列第二欄




例子三： 原始碼 <table width="60%" border="0" cellspacing="5">
<tr bordercolor="#0000FF">
<td>第一列第一欄</td>
<td>第一列第二欄</td>
</tr>
<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一欄</td>
<td>第二列第二欄</td>
</tr>
</table>
顯示結果   第一列第一欄 第一列第二欄
第二列第一欄 第二列第二欄




例子四： 原始碼 <table width="60%" border="0" cellpadding="10">
<tr>
<td bgcolor="#FFCCE6">第一列第一欄</td>
<td bgcolor="#FFFFC6">第一列第二欄</td>
</tr>
<tr>
<td bgcolor="#FFD9FF">第二列第一欄</td>
<td bgcolor="#DAB4B4">第二列第二欄</td>
</tr>
</table>
顯示結果   第一列第一欄 第一列第二欄
第二列第一欄 第二列第二欄




例子五： 原始碼 <center>
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
<tr>
<td bgcolor="#FFD2E9">第一列第一欄</td>
<td bgcolor="#FFDAB5">第一列第二欄</td>
<td bgcolor="#FFFFB5">第一列第三欄</td>
</tr>
<tr bgcolor="#C0C0C0">
<td>第二列第一欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
</table>
</center>
顯示結果   
第一列第一欄 第一列第二欄 第一列第三欄
第二列第一欄 第二列第二欄 第二列第三欄



例子六 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
<tr>
<td>第一列第一欄</td>
<td colspan="2">第一列 之 第二欄及第三欄</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列 之 第一欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
<tr>
<td>第三列第二欄</td>
<td>第三列第三欄</td>
</tr>
</table>
</center>
顯示結果   
第一列第一欄 第一列 之 第二欄及第三欄
第二列及第三列 之 第一欄 第二列第二欄 第二列第三欄
第三列第二欄 第三列第三欄



■ <TH> ： ▲Top

<TH>與<TD>同樣是標示一個儲存格，唯一不同的是<TH>所標示的儲存格中的文字是以粗 體出現，通常用於表格第一列以標示欄目。它的用法是取代<TD>的位置便可以，其參數 設定請參考<TD>。
當然若爲<TD>所標示的儲存格中的文字加上粗體標記<B>便等如<TH>的效果。
例子： 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr align="CENTER">
<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td><td>61%</td><td>39%</td>
</tr>
<tr align="CENTER">
<td>July</td><td>54%</td><td>46%</td>
</tr>
<tr align="CENTER">
<td>June</td><td>52%</td><td>48%</td>
</tr>
</table>
</center>
顯示結果   
Month % of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%



■ <CAPTION> ： ▲Top

<CAPTION> 的作用是爲表格標示一個標題列，有如在表格上方加上一沒格線的打通列。 當然亦可置於下方，通常用以存放該表格的標題。
<CAPTION> 的參數設定（常用）：
例如：<caption align="TOP" valign="TOP"></caption>

align="TOP"
該表格標題列相對於表格的擺放貼　位置（水平），可選值爲： left, center, right, top, middle, bottom，若 align="bottom" 的話標題列便會出現對錶格的下方，不管你 的原始碼中把 <caption> 放在 <table> 中的頭部或尾部。

valign="TOP"
該表格標題列相對於表格的擺放位置（上下），可選值爲： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一樣的，雖然功能重複了，但如果你要標題列 置於下方及向右或向左貼　，那末兩個參數便可一　用了。當只　一個參數時， 請首選 align，因爲 valign 是由 HTML 3.0 纔開始的參數。
例子： 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>網頁速成 八月份訪客瀏覽器使用分析</caption>
<tr align="CENTER">
<th>Month</th>
<th>% of IE visitor</th>
<th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td>
<td>61%</td>
<td>39%</td>
</tr>
</table>
</center>
顯示結果   
網頁速成 八月份訪客瀏覽器使用分析 Month % of IE visitor % of NC visitor
August 61% 39%

admin 2006-11-02 04:36
8。1、HTML語言剖析之表單標記 -1

<FORM> <INPUT>
INPUT 的種類： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
<SELECT> <OPTION>
<TEXTAREA>
■ 引子
表單的用處很多，於網上無處不見，當然是配合 CGI 使用爲佳，所以饋下有意使用或學 習 CGI 的話，表單設計見必需的，這一節介紹的標記不多，但其參數變化很多。一份表單的基本架構是：在 <FORM> 標記 的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵。
■<FORM> <INPUT> ： 　

<FORM>稱爲表單標記，用以宣告此爲表單模式，屬於一個容器標記，表示其它表單標記需要在它的包圍中才有效，<INPUT>便是其中的一個，用以設定各種輸入資料的方法。它 是一個空標記。
<FORM> 的參數設定（常用）：
例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

action="http://your.isp.com/cgi-local/example.cgi"
表單通常是與 CGI 配合使用的，參數 action 便是用以指明該 CGI 程式的位置，這 樣此表單所填的資料才能正確傳給 CGI 作處理。若饋下沒有 CGI 以進行測試，可 設定此參數爲 ACTION="mailto:[email protected]" 那樣該表單所填的資料將會寄至 此電郵地址（紅色部分）。
method="POST"
傳送資料給 CGI 的的方式，可選值爲 POST, GET。你只需記住POST容許傳送大量資料，但 GET則只接受低於 1K 的資 料，所以你若看過別人的表單原始碼的話，你會發現申請表單用的是POST 而搜 找器用的是 GET。
<INPUT> 的參數設定（常用）：
由於其第一個參數 type 己有很多的選擇，而不同的選擇表示出不同的輸入方式，且其它 參數亦因此而異，故以下將獨立介紹不同輸入方式及其它參數設定。

type="Text"
可選值爲 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

--------------------------------------------------------------------------------
輸入方式一： Text （單行文字盒）
例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255">

type="Text"
輸入方式爲 Text，能產生一單行文字盒，上限爲 255 字元。
name="age"
此一單行文字盒名稱，這是最重要的一個，方便 CGI 辨認由表單傳來的資料，雖 說可隨便命名，但通常 CGI 程式中都有指定名稱，若轉用其它名稱便需要修改該 CGI 程式了，名稱可爲沒空白沒特別符號的英文或數字，有大小寫的分別，可以 寫成 Your_Age，若有訪客於此表單此一文字盒填入 40 的話，那末傳給 CGI 的字 串便是 Your_Age=40。
value="20"
此一單行文字盒內定值。若不填寫則文字盒是空白的，等待訪客親自鍵入，若 value="20" 的話， 20 便會出現在文字盒中，當然訪客可以修改之。
align="MIDDLE"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。
size="2"
此一單行文字盒顯示的長度，若饋下是採用 Big5 編碼的中文網頁便要小心，同 size 的文字盒 NC 會顯示得比 IE 狻長。
maxlength="255"
此一單行文字盒可輸入字元的上限，爲方便編排資料或避免錯輸入等，宜設定上 限，例如輸入電話或 ICQ UIN 的可設爲 8，年齡爲 2 等。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
請填入電話號碼：<input type="Text" name="phone" value="" size="10" maxlength="8">
</form>
顯示結果 請填入電話號碼：   



--------------------------------------------------------------------------------
輸入方式二： Radio （單一選擇）
例如：<input type="Radio" name="gender" value="female" align="MIDDLE" checked>

type="Radio"
輸入方式爲 Radio，能產生一單一選擇，以供點選。
name="gender"
此一 Radio 名稱，參考 Text 部分的說明。
value="female"
內定值。每一個 radio 必須及僅有一個 value，通常有同時採用兩個或以上同 name 不同 value 的 Radio 輸入方式，可讓使用使任選其一。
align="MIDDLE"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked
設該 Radio 爲內定被選。同 name 的各個 Radio 中只能有一個使用，或全不使用這 參數。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
請選性別：
<input type="Radio" name="gender" value="Female">女性
<input type="Radio" name="gender" value="Male" checked>男性
<br>你喜歡嗎：
<input type="Radio" name="like" value="Yes">喜歡
<input type="Radio" name="like" value="No">不喜歡
<input type="Radio" name="like" value="NotSure">不肯定
</form>
顯示結果 請選性別： 女性 男性
你喜歡嗎： 喜歡 不喜歡 不肯定



--------------------------------------------------------------------------------
輸入方式三： Checkbox （確認盒）
例如：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>

type="Checkbox"
輸入方式爲 Checkbox，能產生一確認盒，以供剔選。
name="idol"
此一 Checkbox 名稱，參考 Text 部分的說明。
value="Leon"
內定值。每一個 Checkbox 必須及僅有一個 value，當被剔選時這值便會傳及 CGI，例如所傳字串 idol=Leon 。
align="RIGHT"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked
設該 Checkbox 爲內定被選。每個 Checkbox 都是獨立的，所以每一個都可使用這 參數，不像 Radio。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
你喜歡以下那些明星：
<br><input type="Checkbox" name="idol01" value="Leon">黎明
<input type="Checkbox" name="idol02" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="idol03" value="Leon">鄭秀文
<input type="Checkbox" name="idol04" value="BonJovi" checked>BonJovi
</form>
顯示結果 你喜歡以下那些明星：
黎明 酒井法子 鄭秀文 BonJovi



--------------------------------------------------------------------------------
輸入方式四： Password （密碼輸方盒）
例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

Password 的其他參數和 Text 是完全相同的，請參考 Text 的介紹。
兩者作用不同，Password 所輸入的字元全以 * 號表示。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
請輸入姓名：<input type="Text" name="name">
<br>請輸入密碼：<input type="Password" name="pw" maxlength="9">
</form>
顯示結果 請輸入姓名：
請輸入密碼：   



--------------------------------------------------------------------------------
輸入方式五： Submit （傳送鍵）及 Reset （清除鍵）
這是表單上重要的兩個按鍵，兩者所附帶的參數相同，但用處不大。

例如：<input type="Submit" name="other_funtion" value="確定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">

type="Submit"
設定輸入方式爲 Submit 或 Reset。
name="other_funtion"
Submit 的功能隨 name 的不同而不同，須和 CGI 配合。若你只需要普通的傳送 鍵，則是其內定，不必用此參數。
value="確定"
這個值不是輸給 CGI 的，而是顯示在按鍵上，可以不用，傳送鍵的內定值爲 Submit Query，清除鍵的內定值爲 Reset。
align="MIDDLE"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Submit"><input type="Reset">
<br><input type="Submit" value="     確定     "><input type="Reset" value="清除">
</form>

admin 2006-11-02 04:36
8。2、HTML語言剖析之表單標記 -2


--------------------------------------------------------------------------------
輸入方式六： Image （圖片按鍵）
這通常用以取代 Submit 及 Reset 兩個按鍵，因爲由程式產生的按鍵並不漂亮，這 Image 參 數便容許你採用自已製造的按鍵。

例如：<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">

type="Image"
輸入方式爲 Image。
name="submit"
所要代表的按鍵，可以是 submit, reset, 或其它。
align="BOTTOM"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
src="ex_icon.gif"
按鍵圖片來源，若此圖片文件不與該 html 文件在同一目錄下，請加上相對或絕對途 徑。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">
</form>
顯示結果   



--------------------------------------------------------------------------------
輸入方式七： File
例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

input type="File"
輸入方式爲 Image。通常用以傳輸文件。
name="upload"
這文件傳輸的名稱，用以識別之用。
align="BOTTOM"
可選值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
size="20"
所顯示文字盒的長度。
maxlength="100"
可輸入字元的上限。
accept="text/html"
所接受的文件類別，有二十六種選擇，但可不設定。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>
顯示結果   



--------------------------------------------------------------------------------
輸入方式八： Hidden
例如：<input type="Hidden" name="ID" value="6618">

type="Hidden"
輸入方式爲隱藏或內定。它不會顯示任何輸入介面，而是一個內定值隨表單一起 傳給 CGI，列如由 CGI 產生的會員號碼，或傳入可更改的參數以調整 CGI 而避免 修改 CGI 程式碼。
name="ID"
這文件傳輸的名稱，用以識別之用。
value="6618"
內定值，會以如 ID=6618 形式傳給 CGI。
例子： （"Hidden" 是不被顯示的，所以這處多放了一個 "Submit" 鍵，表示 Hidden 之內定 值會隨 submit 鍵被按而傳給 CGI） 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Hidden" name="ID" value="6618">
<input type="Submit" value="Submit">
</form>
顯示結果   



--------------------------------------------------------------------------------
輸入方式九： Button
例如：<input type="Button" name="useless" value="Back">

type="Button"
輸入方式爲一般按鍵。常配合 Java Script 作爲其啓動按鍵。
name="useless"
這文件傳輸的名稱，用處不大。
value="Back"
按鍵顯示名稱。
例子： 其中 Button" value="回前一頁" >
</form>
顯示結果   



■ <SELECT> <OPTION> ： 　

<SELECT>是捲動選單標記，每一選項皆由 <OPTION> 所標示，把它當作圍堵標記或空標 記使用都可以。
<SELECT> 的參數設定（常用）：
例如： <select name="where" size="6" multiple>

name="where"
這捲動選單的名稱，作識別之用，將會傳及 CGI。
size="6"
這捲動選單的列數，即其高度，請自行修改。若使用此參數則不會有 Pop Up 效 果。
multiple
令這捲動選單容許多重選擇。
<OPTION> 的參數設定（常用）：
例如： <option value="tw" selected>

value="tw"
這選項的值，將會傳及 CGI。請自行修改，但不同選項必須有不同的值。
selected
設該選項爲內定被選。一個單選捲動選單只能有一項或零可內定被選。
例子一： （普通 POP UP 捲動選單） 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where">
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>
顯示結果 Where you com from?
Hong Kong Taiwan China United States Canada


例子二： （容許多重選擇 的捲動選單） 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where" multiple>
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>
顯示結果 Where you com from?
Hong Kong Taiwan China United States Canada


例子三：（設定了 Size 的捲動選單） 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where" size="5">
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>
顯示結果 Where you com from?
Hong Kong Taiwan China United States Canada



■ <TEXTAREA> ： 　

<TEXTAREA>是表單文字區塊標記，常用於 bug report, feedback 等需要填寫大量資料的用 途。
<TEXTAREA> 的參數設定（常用）：
例如： <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">

name="comments"
這文字區塊的名稱，作識別之用，將會傳及 CGI。
cols="40"
這文字區塊的寬度，請自行修改。
rows="4"
這文字區塊的列數，即其高度，請自行修改。
wrap="VIRTUAL"
設定其折行問題，可選值爲： off, physical, virtual。off 表示不使用此屬性，physical 時則會強迫劉覽器在送資料到 CGI（Web 伺服器端）必須將實№文字中的換行一 並送出，設爲 virtual 時則送出連續成串的字（除非使用者按了鍵盤的 RETURN / ENTER）。
例子： 原始碼 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
Give comments:
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
這是預設的字句，通常留空的，隨你喜歡。</textarea>
</form>
顯示結果 Give comments:
這是預設的字句，通常留空的，隨你喜歡。

admin 2006-11-02 04:37
9、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 文件同處一目錄則只　寫上文件案名稱，否則 必須加上正確的途徑，相對及絕對皆可。
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> 放大了的圖片
顯示結果 放大了的圖片

admin 2006-11-02 04:37
10、HTML語言剖析之鏈接標記

<A>
<BASE>
■ <A> ： ▲Top

<A> 稱連結標記，由 <A> 與 </A> 所圍的文字、圖片等等可以成爲一個連結。
<A> 的一般參數設定：

例如 <a href="index.html" name="hello" target="_top">

href="index.html"
這參數不能與另一參數 name 同時使用，使用這參數才能造成可按的連結。
當作爲一外部連結時： href 所設定的是該連結所要連到的文件名稱，若 該文件與此 html 檔不是同在一目錄請加上適當的路徑，相對絕對皆可。
當作爲一內部連結時： 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 to Main Page</a> ，那末它不會連到自已目錄下的 index.html，它將會連到 Microsoft 的 首頁，這是因爲相對路徑己給 <BASE> 轉成絕對的了。
target="_top"
設定該頁網頁中所有連結被按後之結果所要顯示的視窗，免得分別爲所有連結加 上 target 參數，常應用於框架中。其設定與 <A> 連結標記中 target 參數相同。
例子容後再寫，你可親自嘗試或到一些以框架製作的網頁去體驗一下。

admin 2006-11-02 04:37
11、HTML語言剖析之多媒體標記

<BGSOUND>
<EMBED>
■ <BGSOUND>：
<BGSOUND> 是用以插入背景音樂，但只適用於 IE，其參數設定不多。如下
<BGSOUND src="your.mid" autostart=true loop=infinite>

src="your.mid"
設定 midi 檔案及路徑，可以是相對或絕對。
autostart=true
是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內定值)。
loop=infinite
是否自動反覆播放。LOOP=2 表示重複兩次，Infinite 表示重複多次。

■ <EMBED>：
<EMBED> 是用以插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支援。其參數設定狻多。如下
<EMBED src="your.mid" autostart="true" loop="true" hidden="true">

src="your.mid"
設定 midi 檔案及路徑，可以是相對或絕對。
autostart=true
是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內定值)。
loop="true"
是否自動反覆播放。LOOP=2 表示重複兩次，true 是， false 否。
HIDDEN="true"
是否完全隱藏控制畫面，true 爲是，no 爲否 (內定)。
STARTTIME="分:秒"
設定歌曲開始播放的時間。如 STARTTIME="00:30" 表示從第30秒處開始播放。
VOLUME="0-100"
設定量的大小，數值是0到100之間。內定則爲使用者系統本身之設定。
WIDTH="整數" 和 HIGH="整數"
設定控制畫面的寬度和高度。(若 HIDDEN="no")
ALIGN="center"
設定控制畫面和旁邊文字的對　方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
C
設定控制畫面的外貌。預設值是 console。
console 一般正常的面板 　　
smallconsole 較小的面板 　　
playbutton 只顯示播放按鈕 　　
pausecutton 只顯示暫停按鈕 　　
stopbutton 只顯示停止按鈕 　　
volumelever 只顯示音量調整鈕

admin 2006-11-02 04:38
12、HTML語言剖析之其他標記
<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>
■ <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" c>
該網頁的描述，作用於尋找引擎的登錄

<meta name="Keywords" c>
該網頁的關鍵字，作用於尋找引擎的登錄

<meta http-equiv="Expires" c>
<meta http-equiv="Pragma" c>
以上行功能相同，都是要瀏覽器重新載入該頁，不要使用快取檔案，當然可以修 改該 Expire 時間。

<meta http-equiv="Content-Type" c>
<meta http-equiv="Content-Type" c>
設定這是 HTML 文件及其編碼語系，中文網頁請使用 big5 那行，或者不設編碼亦 可，純英文網頁建議使用 iso-8859-1。

<meta name="GENERATOR" c>
<meta name="GENERATOR" c>
這隻表示該網頁由甚堋編輯器寫成。

<meta http-equiv="refresh" c>
這一行較爲實用，能於預定秒數內自動轉到指定的網址。原始碼中 10 表示 10秒。

■ <LINK> ： ▲Top

<LINK> 用來將目前文件與其它 URL 作連結，但不會有連結按鈕，用於 <HEAD> 標記間， 格式如下：
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">
其用法我們會於 Style Sheet 一節詳細介紹。

admin 2006-11-02 04:38
13、HTML語言剖析之特殊字符

只要你認識了 HTML 標記，你便會知道特殊字符的用處。 HTML 原始碼 顯示結果 描述
< < 小於號或顯示標記
> > 大於號或顯示標記
& & 可用於顯示其它特殊字符
" " 引號
® ? 己註冊
© ? 版權
? ? 商標
?   半方大的空白
?   全方大的空白
不斷行的空白

■ ISO Latin-1 特殊字符 ：
HTML 原始碼 顯示結果 描述
&AElig; ? Uppercase AE diphthing
Á á Uppercase A, acute accent
 ? Uppercase A, circumflex accent
À à Uppercase A, grave accent
Å ? Uppercase A, ring
à ? Uppercase A, tilde
Ä ? Uppercase A, dieresis or umlaut mark
Ç ? Uppercase C, cedilla
&ETH; D Uppercase Eth, Icelandic
É é Uppercase E, acute accent
Ê ê Uppercase E, circumflex accent
È è Uppercase E, grave accent
Ë ? Uppercase E, dieresis or umlaut mark
Í í Uppercase I, acute accent
Î ? Uppercase I, circumflex accent
Ì ì Uppercase I, grave accent
Ï ? Uppercase I, dieresis or umlaut mark
Ñ ? Uppercase N, tilde
Ó ó Uppercase O, acute accent
Ô ? Uppercase O, circumflex accent
Ò ò Uppercase O, grave accent
Ø ? Uppercase O, slash
Õ ? Uppercase O, tilde
Ö ? Uppercase O, dieresis or umlaut mark
&THORN; T Uppercase THORN, Icelandic
Ú ú Uppercase U, acute accent
Û ? Uppercase U, circumflex accent
Ù ù Uppercase u, grave accent
Ü ü Uppercase U, dieresis or umlaut mark
Ý Y Uppercase Y, acute accent
æ ? Lowercase ae diphthing
á á Lowercase a, acute accent
â a Lowercase a, circumflex accent
à à Lowercase a, grave accent
å ? Lowercase a, ring
ã ? Lowercase a, tilde
ä ? Lowercase a, dieresis or umlaut mark
ç ? Lowercase c, cedilla
ð e Lowercase eth, Icelandic
é é Lowercase e, acute accent
ê ê Lowercase e, circumflex accent
è è Lowercase e, grave accent
ë ? Lowercase e, dieresis or umlaut mark
í í Lowercase i, acute accent
î ? Lowercase i, circumflex accent
ì ì Lowercase i, grave accent
ï ? Lowercase i, dieresis or umlaut mark
ñ ? Lowercase n, tilde
ó ó Lowercase o, acute accent
ô ? Lowercase o, circumflex accent
ò ò Lowercase o, grave accent
ø ? Lowercase o, slash
õ ? Lowercase o, tilde
ö ? Lowercase o, dieresis or umlaut mark
ß ? Lowercase sharp s, German (sz ligature)
þ t Lowercase thorn, Icelandic
ú ú Lowercase u, acute accent
û ? Lowercase u, circumflex accent
ù ù Lowercase u, grave accent
ü ü Lowercase u, dieresis or umlaut mark
ý y Lowercase y, acute accent
ÿ ? Lowercase y, dieresis or umlaut mark

admin 2006-11-02 04:38
14、HTML語言剖析之調色原理

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
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

快速清除你電腦中的垃圾

zhouyin1988 2018-08-31 17:33:48

操作系統進程描述

zhouyin1988 2018-08-31 17:33:47