常用HTML語法
WB01668_.gif (3699 個位元組)

[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>

</frameset>

<noframe>

<bodybgcolor=#ffffff>

<center>

<h3>

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

只會看到這個訊息!!

</h3>

</center>

</body>

</noframe>

</html>

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

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

第一個<frameset rows="50%,50%">是說我們要開始作frame了,如果您熟悉<table></table>的使用方法,相信您會覺得rows這個字很眼熟!其實在分割的概念上是相同的,不同的是,在這堶n直接將需要的視窗數目及比例同時表達出來;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的瀏覽程式的使用者,在這堶戚n放的東西也是一個html文件,當您使用沒有支援frame語法的瀏覽程式時,frame的語法會被忽略,在<noframe></noframe>堶悸漯F東便會顯示出來;反過來說,當您用了有支援frame語法的瀏覽程式觀看這份文件時,<noframe></noframe>堶悸漯F東便會被忽略,而顯示出分割過的四個視窗以及各自顯示所指定的檔案!

三、BODY

1.<bodytext=#rrggbb>

這是設定html文件內所有文字的顏色,可不是照著上面打rrggbb喲,是依R(red)G(green)B(blue)的順序,將你要的顏色組合值設上去,不過,要換算成十六進位,譬如說,白色的R,G,B值分別是255,255,255,所以各自用十六進位換算一下,您會得到ff,ff,ff的值,這時候您就要在rrggbb的位置打上ffffff,也就是說,您希望這篇文件堛漱憒r統統要用白色的話,要打<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">

這個語法堶悸槓gcolor=#rrggbb是設定該文件視窗所使用背景色,與前面說明過的rrggbb用法相同;這堛滬威I是要介紹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的前後會各有一列空白列出現,果然夠特殊!在這個語法中,又可以分成6級:從<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之後版本直接到試驗埵菑v觀察觀察吧!

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

五、圖形

<imgsrc="*.gif/jpg">

<img src="garfield.gif" align=middle>

<a href="i-1.html"><img src="garfiel2.gif"></a>

<a href="i-3.html"><img src="garfiel4.gif" border=1></a>

<a href="i-5.html"><img src="garfiel6.gif" alt="這是一隻加菲貓"></a>

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

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

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

六、超連結

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

七、表格

<table border="1" width="41%">

<tr>

<td width="30%">1-1</td>

<td width="36%"><p align="center">1-2</td>

<td width="34%"><p align="right">1-3</td>

</tr>

<tr>

<td width="66%" colspan="2">2-1</td>

<td width="34%">2-2</td>

</tr>

<tr>

<td width="100%" colspan="3">3-1</td>

</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,用來表示表格中一列已結束

八、特殊符號

目前有三個符號:<.>.&,是不能直接打的,而分別要改打成&lt;.&gt;.&amp才行,不然,瀏覽程式會把這幾個符號當作是命令的一部份喔!

九、分隔線

<hr size=2 align=center width=100%>

在本文中您有看到好幾條線段,這不是圖形,而是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> 用於顯示變數