回到頂端
HTML標籤列表
基本架構
<html>#文件的開始
<head>#標示文件資訊
#文件資訊放在此處
<title>網頁的標題</title>
</head>
<body>
網頁的內容
</body>
</html>#文件的結束
網頁設定 段落 文字格式 項目格式 超連結
圖片 表格 音樂 表單 HTML特殊字元
網頁設定
編號 標籤 屬性與說明 範例
<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx" background="*" bgproperties="fixed">
文字
</body>
1 <body>
文字
</body>
bgcolor:背景顏色
#xxxxxx為顏色碼
部分顏色可使用英文單字
<body bgcolor="#CCCCCC" alink="#FFFFFF">
文字
</body>
text:文字顏色
link:超連結的顏色
alink:作用中的超連結顏色
vlink:查閱過的超連結顏色
background:背景圖片
*為圖片的檔案名稱
也就是圖片存放的路徑
<body background="img/bg.gif">
文字
</body>
bgproperties="fixed"
使背景圖能固定不動
 
段落
編號 標籤 屬性與說明 範例
1 <br /> 換行  
2 <p>文字</p> 說明:分段
 
align:對齊方式
3 <pre>文字</pre> 使用原始排列  
4 <hr /> 說明:分隔線 <hr size="5" width="100" />

文字
<hr width="100" align="center" noshade />
align:對齊方式
size:高度
width:寬度
color:顏色
noshade:無陰影
文字格式
編號 標籤 屬性與說明 範例
1 <h*>文字</h*> 說明:文字大小
*為1~6,文字會自成一個段落
<h3 align="right">文字</h3>

文字

align:對齊方式
2 <b>文字</b>
(strong)
粗體字 文字
3 <i>文字</i>
(em)
斜體字 文字
4 <u>文字</u> 底線 文字
5 <sup>文字</sup> 上標字 文字文字
6 <sub>文字</sub> 下標字 文字文字
<font size="*" face="字型" color="#xxxxxx">文字</font>
7 <font>文字</font> size:文字大小
*為1~7,若沒設定size,預設為3
<font size="7">文字</font>
face:字型
1個字型以上要逗點跟空格
<font face="細明體, Arial">文字</font>
color:文字顏色 <font color="#CCCCCC">文字</font>
項目格式
編號 標籤 屬性與說明 範例
1 <ul>
<li>文字</li>
<li>文字</li>
</ul>
說明:符號式
<ul type="disc"><li>文字</li><li>文字</li></ul>
  • 文字
  • 文字
type:
disc→小圓點
circle→空心小圓點
square→實心正方形
2 <ol>
<li>文字</li>
<li>文字</li>
</ol>
說明:數字式
<ol type="I" start="3"><li>文字</li><li>文字</li></ol>
  1. 文字
  2. 文字
type:A、a、I、i
start:起始值
超連結
編號 標籤 屬性與說明 範例
1 <a>文字</a> href:連結 一般:
<a href="http://www.wretch.cc">文字</a>文字
Email:
<a href="mailto:hzed@wretch.cc">文字</a>文字
站內連結:
<a href="#name">文字</a>文字
target:目標視窗
參數:_blank、_parent、_self
<a href="http://thu.edu.tw" target="_blank">
文字</a>文字
title:標題(滑鼠提示文字) <a href="http://thu.edu.tw" title="tMail">
文字</a>文字
style="text-decoration:none"
消除連結的底線
<a href="http://thu.edu.tw" style="text-decoration:none">
文字</a>文字
name:文件內的目標名稱 <a name="name">文字</a>文字
圖片
編號 標籤 屬性與說明 範例
1 <img / > src:圖片路徑 <img src="img/qoo.gif" />
width:寬度
height:高度
<img src="img/qoo.gif" width="20" height="30" />
align:對齊方式
參數:bottom、middle、top、left、right
<img src="img/qoo.gif" align="middle" />
alt:圖片註解 <img src="img/qoo.gif" alt="Q1" title="Q2" />Q1
title:圖片標題(滑鼠提示文字)
border:外框粗細 <img src="img/qoo.gif" border="2" />
表格
編號 標籤 屬性與說明 範例
<table>#表格的開始
<caption>文字</caption>
 <tr>#列的開始
  <th>文字1-1</th>#列裡面的標題
  <td>文字1-2</td>#儲存格的開始與結束
 </tr>#列的結束
 <tr>
  <td>文字2-1</td>
  <td>文字2-2</td>
 </tr>
</table>#表格的結束
文字
文字1-1文字1-2
文字2-1文字2-2
<table>
 <tr>
  <td colspan="2">文字3-1</td>
 </tr>
 <tr>
  <td rowspan="2">文字4-1</td>
  <td>文字4-2</td>
 </tr>
 <tr>
  <td>文字5-2</td>
 </tr>
</table>
文字3-1
文字4-1文字4-2
文字5-2
1 <table></table> align:對齊方式 <table align="left" border="2" bordercolor="red" bgcolor="blue">
</table>
文字
border:框線
bordercolor:框線顏色
bgcolor:背景顏色
background:背景圖片 <table width="100" height="50" background="img/qoo.gif">
</table>
 
width:寬度
height:高度
cellpadding:內距
cellspacing:儲存隔間的間距
<table>
</table>
文字
<table cellpadding="10">
</table>
文字
<table cellspacing="5">
</table>
文字
2 <captiom>文字
</caption>
說明:表格的標題 <table><caption align="right">文字</caption></table>
文字
文字1-1
align:對齊方式
5 <tr></tr> align:水平對齊方式
參數:left、center、right
valign:垂直對齊方式
參數:baseline、bottom、middle、top
<table><tr align="center"><td>文字1</td></tr>
<tr bgcolor="red" valign="top"><td>文字2</td></tr>
<tr bordercolor="#FFFFFF"><td>文字3</td></tr></table>
文字1
文字2
文字3
bgcolor:背景顏色
bordercolor:框線顏色
4 <th></th>
<td></td>
align:水平對齊方式
valign:垂直對齊方式
<table><tr><th align="center">文字1</th>
<th valign="middle">文字2</th></tr></table>
文字1 文字2
bgcolor:背景顏色
background:背景圖片
bordercolor:框線顏色
<table><tr><td bgcolor="#FFFFFF">文字1</td>
<td background="img/Qoo.gif">文字2</td>
<td bordercolor="#CCCCCC">文字3</td></tr></table>
文字1 文字2 文字3
width:寬度
height:高度
<table><tr><td width="100">文字1-1</td><td>文字1-2</td></tr>
<tr><td>文字2-1</td><td height="50">文字2-2</td></tr></table>
文字1-1文字1-2
文字2-1文字2-2
rowspan:儲存格下跨N個列
colspan:儲存格橫跨N個欄
 
音樂
編號 標籤 屬性與說明 範例
1 <bgsound /> src:音樂檔路徑 <bgsound src="img/music.mp3" loop="5" />
loop:重播次數
若要一直重複播放,可使用infinite
2 <embed></embed> src:音樂檔路徑 <embed src="img/music.mp3" align="botton" autostart="fasle"></embed>文字
文字
align:對齊方式
參數:bottom、middle、top、left、right
autostart:自動播放
參數:true、false(預設為true)
width:寬度
height:高度
<embed src="img/music.mp3" width="200" height="20"></embed>
hidden:隱藏
參數:true、false
<embed src="img/music.mp3" hidden="true"></embed>
loop:重複播放
參數:true、false
<embed src="img/music.mp3" loop="true"></embed>
ShowPositionControls:顯示快轉與倒帶
參數:true、false
<embed src="img/music.mp3" ShowPositionControls="fasle"></embed>
ShowTracker:顯示播放進度
參數:true、false
ShowAudioControls:顯示音量控制器
參數:true、false
ShowStatusBar:顯示資訊狀態列
參數:true、false
ShowDisplay:顯示資訊狀態
參數:true、false
表單
編號 標籤 屬性與說明 範例
<form action="xx.htm" method="get" name="form1">
<input type="text"></input>
</form>
1 <form></form> action:動作(執行網頁) login.php
method:執行動作的方法
參數:get、post(預設為get)
 
enctype:編碼類型 <form enctype="application/x-www-form-urlencoded">
name:表單名稱  
target:目標視窗  
2 <input /> 共同屬性  
type:類型  
name:名稱(可重複)
id:名稱(不可重複)
<input type="text" name="test" />
disabled:沒有作用
readonly:不能操作
<input type="text" value="135" disabled />

<input type="text" readonly value="135" />
type="text":文字欄位
type="password":密碼
<input type="text" size="5" maxlength="3" value="135" />

<input type="password" value="135" />
size:文字顯示的長度
maxlength:字數限制
value:代表的值
type="button":按鈕
type="submit":送出表單
type="reset":重設表單
<input name="2" type="button" value="OK" />
<input name="2" type="submit" />
<input name="2" type="reset" />
value:按鈕顯示的文字
type="checkbox":核取方塊
type="radio":選項按鈕
一組表單內只能有一個選項按鈕被選取
而且選項按鈕的name要設為相同的
<input name="col" type="checkbox" value="50" />文字 文字1文字2
<input name="row" type="radio" value="50" />文字 文字1文字2
value:代表的值
checked:是否被選取
type="file":檔案欄位 <input name="music" type="file" />

<input name="music" type="file" size="50" />
value:代表檔案的相關資訊
size:文字顯示的長度
maxlength:字數限制
type="hidden":隱藏欄位 <input name="userid" type="hidden" value="100" />
(因為隱藏了,所以看不到)
value:代表的值
3 <textarea></textarea> 文字區域 <textarea name="text" cols="30" rows="5"></textarea>
name:名稱(可重複)
id:名稱(不可重複)
cols:行數
rows:列數
disabled:沒有作用
readonly:不能操作
<textarea name="read" cols="10" rows="3" disabled>value</textarea>

<textarea name="read" cols="10" rows="3" readonly>value</textarea>
wrap:換行
參數:off、virtual、physical
<textarea name="read" cols="10" rows="3" wrap="off">value</textarea>
4 <select></select> 說明:選單、清單 <select name="data" size="2" multiple>
<option value="1">文字1</option>
<option value="2">文字2</option>
<option value="3">文字3</option>
</select>
name:選單名稱(可重複)
id:選單名稱(不可重複)
size:顯示的高度
disabled:沒有作用
multiple:允許多重選取
若有此屬性,則select為清單
5 <option></option> 清單值
必須包含在select裡
value:代表的值
HTML特殊字元
編號 字元 實際顯示 範例
1 &amp; &  
2 &quot "  
3 &lt <  
4 &gt >  
5 &absp; 空白