常用HTML語法

[HEAD] [FRAMES] [BODY] [一般文字] [圖形] [超連結] [表格] [特殊符號] [分隔線] [HTML 標籤索引]

一、HEAD

1.<title>這是一份文件的主題，會顯示在視窗的標題列上</title>

2.<!-這個命令類似程式設計裏用到的附註，不會在瀏覽程式中顯示出來->

3.<metahttp-equiv="refresh"content="5;url=h3-1.html">

這就是所謂的動態連結，可以自動連結到所指定要連結的下一個目的地！

二、FRAMES

<html>

<head>

<title>FRAMESET試驗開始</title>

</head>

<framesetrows="50%,50%">

　<framesetcols="30%,70%">

　　　<framesrc="left1.html"name="left1">

　　　<framesrc="right1.html"name="right1">

　</frameset>

　<framesetcols="35%,65%">

　　　<framesrc="left2.html"name="left2">

　　　<framesrc="right2.html"name="right2">

　</frameset>

<bodybgcolor=#ffffff>

<h3>

當您使用不支援frame的browser觀看時,<br>

只會看到這個訊息!!

</h3>

</center>

</body>

</noframe>

</html>

我們就以上邊這個試驗的source為例：

1.<frameset rows="50%,50%"></frameset>

第一個<frameset rows="50%,50%">是說我們要開始作frame了，如果您熟悉<table></table>的使用方法，相信您會覺得rows這個字很眼熟！其實在分割的概念上是相同的，不同的是，在這裏要直接將需要的視窗數目及比例同時表達出來；rows="50%,50%"就是說要分成上下兩個各占50%的視窗，引號可別忘了加喲！另外，如果你想再進一步分割上視窗或是下視窗的話，在這之後還可以再加入<frameset>作更精細的分割，在左例中，這個視窗將要分割成上下左右四個部份，現在我們往下看看其餘的分割動作！

2.<frameset cols="30%,70%"></frameset>

這會把上一步分割出來的視窗中，第一個(上面的視窗)再分成左右各占30%以及70%的兩個視窗

3.<frameset cols="35%,65%"></frameset>

這則是把第二個(下面的視窗)再分成左右各占35%以及65%的兩個視窗

4.<frame src="left1.html" name="left1">

現在我們要按照順序替分割出來的四個視窗各取一個名字，第一個視窗(左上角)的name="left1"，所以它的名字就叫left1，其他的視窗也是依次類推；為什麼要取名字呢？因為，有了這個動作，以後我們才能很方便的指定要某一個link的目的地出現在其中一個視窗喔！再來，還有一個src="left1.html"，這是用來設定名叫left1的這個視窗中，第一個要出現的檔案名稱以及位置

5.<noframe></noframe>

這個是為了顧全其他沒有使用支援frame的瀏覽程式的使用者，在這裏面要放的東西也是一個html文件，當您使用沒有支援frame語法的瀏覽程式時，frame的語法會被忽略，在<noframe></noframe>裏面的東東便會顯示出來；反過來說，當您用了有支援frame語法的瀏覽程式觀看這份文件時，<noframe></noframe>裏面的東東便會被忽略，而顯示出分割過的四個視窗以及各自顯示所指定的檔案！

三、BODY

1.<bodytext=#rrggbb>

這是設定html文件內所有文字的顏色，可不是照著上面打rrggbb喲，是依R(red)G(green)B(blue)的順序，將你要的顏色組合值設上去，不過，要換算成十六進位，譬如說，白色的R,G,B值分別是255,255,255，所以各自用十六進位換算一下，您會得到ff,ff,ff的值，這時候您就要在rrggbb的位置打上ffffff，也就是說，您希望這篇文件裏的文字統統要用白色的話，要打<bodytext=#ffffff>；再舉一例，如果您要用紅色的字，紅色的R,G,B值是255,0,0，您就要打<bodytext=#ff0000>！也許您對顏色有點頭痛，沒關係，您可以用一些現成的編輯器，如HtmlABC，或是在繪圖軟體中指定一個你想要的顏色，再把它對應的RGB值抄下來並換算一下，不過，如果當您都懶得用的時候，還是有偷雞的辦法，不過，顏色可用的就比較少了，那就是用ff和00去做組合，舉幾個例子來說，像黑色(#000000)．白色(#ffffff)．紅色(#ff0000)．綠色(#00ff00)．藍色(#0000ff)．黃色(#ffff00)等等．．其餘請自行想像！

2.<body bgcolor=#rrggbb background="*.gif/jpg">

這個語法裏面的bgcolor=#rrggbb是設定該文件視窗所使用背景色，與前面說明過的rrggbb用法相同；這裏的重點是要介紹background，您也許會納悶，這個background與bgcolor有什麼不同？其實，打個比方來說，假設現在有一張黑色的桌子上面舖了一塊碎花桌布，那麼，bgcolor就是桌子的顏色(黑色)，background就是您舖上的碎花桌布，請注意，bgcolor只能用RGB值去定出顏色，但background這塊桌布就可以用您喜愛的圖檔去拼湊，只要是GIF檔或是JPG檔，你的視窗便會被這個圖檔舖滿！

3.<body link=#rrggbb vlink=#rrggbb alink=#rrggbb>

這也是做顏色的設定，不過，這回設定的是link的顏色，也就是你可以用滑鼠click之後連結出去的地方，不論是可以link的文字或是圖形的外框都包含在內，link=#rrggbb是設定還沒被click過的link顏色，vlink=#rrggbb是設定已經被click過的link顏色，而alink=#rrggbb則是設定當您click那個link的時候，瞬間閃過的顏色！

四、一般文字：

1.段落：

一篇文章通常是由一個以上的段落組成，在HTML的文件中，如果要將文章分成數個段落，最簡單的方式就是加一個<p>在要分段的地方，而它會自動在段與段之間空一列空白以示分隔！不需要</p>結束，可以單獨使用！

2.標題

在文章之中蠻常會用到標題，這有時是用來標出文章的精神所在，或是提醒讀者注意某些重點等等的．．．不論是何種功用，都是要讓它比較顯眼，當你使用<h1>OOXX</h1>的時候，這個OOXX就會單獨成列，字體變的很大，而且是粗體字；另外，在OOXX的前後會各有一列空白列出現，果然夠特殊！在這個語法中，又可以分成６級：從<h1>．<h2>．<h3>．<h4>．<h5>．到<h6>數字越大，字體越小，所以囉，最大的標題就是<h1>！

3.文字樣式

a.<font size=6 color=#ff0000>

這個語法是使用在文章中間，調整某幾個字或某一段字的大小以及顏色之用，與標題不同之處，在於這個語法不會中斷文字的連貫，也不會變成粗體字，還有，數字越大的，字體越大，剛好與標題相反！

如果把font中數字代表的大小與標題的大小相比較一下，你會發現，原來<h6>顯示的字體大小剛好跟<fontsize=1>是相同的，依次類推，<h1>顯示的字體大小則跟<fontsize=6>相同！

b.粗體(<b></b>或<strong></strong>)．斜體(<i></i>)．閃爍(<blink></blink>)文字在文章中，要特別標示出幾個字，除了加大字體．變換顏色之外，有時候會用加粗或斜體的方式，HTML文件也具備這樣的功能，而且還多了一個可以讓文字一閃一閃的語法喔！

c.上標字(<sup></sup>)．下標字<sub></sub>

d.強迫斷行(<br>)

在文章當中，有些地方想直接讓文字從下一列開始，可是又不想空行，怎麼辦？這時候，就可以用這個<br>達到你想要的效果！

e.預設格式(<pre></pre>)

在遇到一堆文字排列的樣子比較複雜的時候，在使用瀏覽程式的時候會變的比較奇怪，尤其是文字中使用連續超過一個以上的半形空白時，瀏覽程式會當做只有一個，這時候，如果我希望它就照我打的文字稿依樣畫葫蘆，那就可以用<pre></pre>來偷懶一下，字體本來只能用固定的大小，有關字體大小的語法碰上它是不管用的！但現在情況不同了，您不妨用NetScape2.0之後版本直接到試驗裏自己觀察觀察吧！

f.文字置中(<center></center>)

五、圖形

<imgsrc="*.gif/jpg">

<img src="garfiel7.gif" hspace=15>這是我最喜歡的卡通人物

由於有了圖形，HTML文件可用更活潑的方式呈現，只要在src之後，加上你要使用的圖檔名稱，目前最常使用的是GIF和JPG格式的圖檔，記得要加上引號喔！

這個語法也有一些屬性，除了上面提到的，將指定的圖檔顯示出來之外，還可以定義出圖文排列的方式．外框的設定(這是在這個圖可以連結到他處時使用)等等！

六、超連結

有了超連結，使用者就像買了直達車票一樣，不過，您現在要試驗的是，如何設定好停靠站，讓使用者可以透過這個連結處，直達到您想要他去的地方！

七、表格

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

1.<table (border=)>....</table>

表格線的粗細可以用border加以設定(預設值為1，如為0則無表格線)

2.<caption>....</caption>

表示表格的表頭，以粗體表示

3.<th (colspan=) (rowspan=) (align=)>

table header，後面的文字會以粗體表示，colspan是設寬度跨多少個欄位(預設值為1)，rowspan則是設定高度是多少列(預設為1)，可以用align指定文字位置靠左．靠右．或靠中(預設值為文字中center)

4.<td (colspan=) (rowspan=) (align=)>

table data，與<th>不同之處，是不會使用粗體字，且文字預設值為靠左，其他都雷同！

5.<tr>

table rows，用來表示表格中一列已結束

八、特殊符號

目前有三個符號：<．>．&，是不能直接打的，而分別要改打成<．>．&amp才行，不然，瀏覽程式會把這幾個符號當作是命令的一部份喔！

九、分隔線

在本文中您有看到好幾條線段，這不是圖形，而是HTML本身就提供的，您只要依自己的需要，設定粗細長短以及置放的位置就可以了！

現在先來解釋上面的例子，hr是代表線段，size是要填粗細(預設值為1)，align是指定置放的位置(有left-靠左．right-靠右．以及center-置中，預設值是left)，width則是讓你設定長度(預設值是視窗寬度的100%)之用，除了用百分比之外，也可以直接打上pixel的值，如果您對於pixel沒什麼概念的話，建議您使用百分比！

這種線段長度以及位置是"相對的"，也就是說會隨著視窗的縮放而自動跟著調整，如果您使用圖檔來當線段，就只能是固定的長度，不會自動調整！所以，如果你不是非得要有一條多麼美麗的線條，用這個語法不但有分隔的效果，也不增加使用者傳輸的時間，何樂而不為呢？

※ HTML 標籤索引 ※

<A HREF TARGET> 指定超連結的分割視窗
<A HREF=#錨的名稱> 指定錨名稱的超連結
<A HREF> 指定超連結
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

<B> 粗體字
<BASE TARGET> 指定超連結的分割視窗
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行

<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用於引經據典的文字
<CODE>...</CODE> 用於列出一段程式碼
<COMMENT>...</COMMENT> 加上註解

<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字標籤
<DL>...</DL> 設定定義列表的標籤
<DT> 設定定義列表的項目

<EM> 強調之用

<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式表單的處理方式
<FORM METHOD> 設定戶動式表單之資料傳送方式
<FRAME MARGINHEIGHT> 設定視窗的上下邊界
<FRAME MARGINWIDTH> 設定視窗的左右邊界
<FRAME NAME> 為分割視窗命名
<FRAME NORESIZE> 鎖住分割視窗的大小
<FRAME SCROLLING> 設定分割視窗的捲軸
<FRAME SRC> 將HTML檔加入視窗
<FRAMESET COLS> 將視窗分割成左右的子視窗
<FRAMESET ROWS> 將視窗分割成上下的子視窗
<FRAMESET>...</FRAMESET> 劃分分割視窗

<H1>~<H6> 設定文字大小
<HEAD> 標示文件資訊
<HR> 加上分格線
<HTML> 文件的開始與結束

<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加註
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片並預設圖形大小
<IMG HSPACE> 插入圖片並預設圖形的左右邊界
<IMG LOWSRC> 預載圖片功能
<IMG SRC BORDER> 設定圖片邊界
<IMG SRC> 插入圖片
<IMG VSPACE> 插入圖片並預設圖形的上下邊界
<INPUT TYPE NAME VALUE> 在表單中加入輸入欄位
<ISINDEX> 定義查詢用表單

<KBD>...</KBD> 表示使用者輸入文字

<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )

<MARQUEE> 跑馬燈效果
<MENU>...</MENU> 條列文字標籤
<META NAME="REFRESH" CONTENT URL> 自動更新文件內容
<MULTIPLE> 可同時選擇多項的列表欄

<NOFRAME> 定義不出現分割視窗的文字

<OL>...</OL> 有序號的列表
<OPTION> 定義表單中列表欄的項目

<P ALIGN> 設定對齊方向
<P> 分段
<PERSON>...</PERSON> 顯示人名
<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字
<SELECT>...</SELECT> 在表單中定義列表欄
<SMALL> 顯示小字體
<STRIKE> 文字加橫線
<STRONG> 用於加強語氣
<SUB> 下標字
<SUP> 上標字

<TABLE BORDER=n> 調整表格的寬線高度
<TABLE CELLPADDING> 調整資料欄位之邊界
<TABLE CELLSPACING> 調整表格線的寬度
<TABLE HEIGHT> 調整表格的高度
<TABLE WIDTH> 調整表格的寬度
<TABLE>...</TABLE> 產生表格的標籤
<TD ALIGN> 調整表格欄位之左右對齊
<TD BGCOLOR> 設定表格欄位之背景顏色
<TD COLSPAN ROWSPAN> 表格欄位的合併
<TD NOWRAP> 設定表格欄位不換行
<TD VALIGN> 調整表格欄位之上下對齊
<TD WIDTH> 調整表格欄位寬度
<TD>...</TD> 定義表格的資料欄位
<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
<TEXTAREA WRAP> 決定文字輸入欄是自動否換行
<TH>...</TH> 定義表格的標頭欄位
<TITLE> 文件標題
<TR>...</TR> 定義表格美一行
<TT> 打字機字體

<U> 文字加底線
<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )

<VAR>...</VAR> 用於顯示變數