HTML 簡介
● HTML 文件基本格式
<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODY>
這是本文區.
</BODY>
</HTML>
代表 html 文件的開始
文件表頭，用來提供文件整體資訊 代表文件的標題
文件本文內容部份 代表文件結束
● 標籤 (TAG)
格式為：<標籤名稱 屬性=”值”>……</標籤名稱>
(大小寫皆可，值的雙引號可以省略) 例如：
<TITLE>：<標籤名稱>，開始標籤
<IMG SRC=”girl.gif”>：<標籤名稱 屬性=”值”>
<IMG SRC=”girl.gif” ALT=”女孩”>：<標籤名稱 屬性 1=”值 1” 屬性 2=”值 2”>
</TITLE>：<標籤名稱>，結束標籤
● 標籤類別
1. 成對型：例如：<TITLE>……</TITLE>
2. 單獨型：例如：<HR>
3. 結構型：例如：<OL>
<LI>……</LI>
<LI>……</LI>
</OL>
HTML 標籤一覽表
基本標籤
標籤 定義
<HTML>……</HTML> 標示 HTML 文件的開始和結束
<HEAD>……</HEAD> 標示 HTML 文件標題部份的開始和結束
<BODY>……</BODY> 標示 HTML 文件本文部份的開始和結束 BGCOLOR = #rrggbb 設定背景顏色
BACKGROUND = 圖片 URL 設定背景的圖片 TEXT = #rrggbb 設定文字內容的顏色 LINK = #rrggbb 設定超連結文字的顏色
VLINK = #rrggbb 設定已點選過的超連結文字顏色 屬
性
ALINK = #rrggbb 設定正按下超連結的文字顏色
<TITLE>……</TITLE> HTML 文件的標題
<STYLE>……</STYLE> 表示 CSS 樣式的段落
<SCRIPT>……</SCRIPT> 表示為 Script 的程式段落 屬
性
LANGUAGE = JavaScript 或 VbScript
設定 Script 使用的語言
<?...?> 表示為 PHP 程式段落
<%...%> 表示為 ASP 程式段落
文字變化標籤
標籤 定義
<DIV>……</DIV> 產生新的區段 屬
性
ALIGN = LEFT 或 CENTER 或 RIGHT
代表此區段文字的編排方式
<P>……</P> 產生新的段落 (結束標籤可省略) 屬
性
ALIGN = LEFT 或 CENTER 或 RIGHT
代表此段落文字的編排方式
<BR> 插入一行，強迫斷行
<PRE>……</PRE> 文件以原本的格式顯示
<Hn>……</Hn> 產生區段標題，其中 n=1~7 (由大到小)
<HR> 加入水平線 ALIGN = LEFT 或 CENTER 或
RIGHT
代表此水平線的對齊方式
SIZE = n 設定水平線的寬度
WIDTH = n% 設定水平線的長度
屬 性
NOSHADE 產生實心的水平線
<CENTER>……</CENTER> 置中標籤
<B>……</B> 顯示粗體字型
<I>……</I> 顯示斜體字型
<U>……</U> 顯示底線字型
<TT>……</TT> 顯示打字機字型
<S>……</S> 顯示刪除線字型
<BLINK>……</BLINK> 顯示閃爍字型
<SUP>……</SUP> 顯示上標字型
<SUB>……</SUB> 顯示下標字型
<BIG>……</BIG> 顯示大字
<SMALL>……</SMALL> 顯示小字
<EM>……</EM> 強調文章中某段文字
<STRONG>……</STRONG> 強調文章中某段文字的重要性
<ADDRESS>……</ADDRESS> 說明 E-mail 位址
<CITE>……</CITE> 表示一段文字引用的來源
<Q>……</Q> 表示一段引用而來的資料
<VAR>……</VAR> 表示程式中的變數
<CODE>……</CODE> 表示一段程式碼
<DFN>……</DFN> 表示一段定義內容
<SAMP>……</SAMP> 表示一段範例
<KBD>……</KBD> 顯示由鍵盤輸入的文字
<ABBREV>……</ABBREV> 表示縮寫字
<ACRONYM>……</ACRONYM> 表示一句簡稱
<PERSON>……</PERSON> 顯示人名
<BASEFONT SIZE = n> 設定文字的預設字體大小
<FONT>……</FONT> 設定文字的格式
SIZE = n 或 +n 或 –n 設定文字大小，其中 n = 1 ~ 7 (小到大) COLOR = #rrggbb 設定文字顏色，以十六進位表示 RGB 屬
性 FACE = 字體名稱 設定文字字型
<MARQUEE>……</MARQUEE> 產生文字跑馬燈 屬
性
ALIGN = TOP 或 MIDDLE 或 BOTTOM
代表文字在跑馬燈錘垂直方向上的對齊 方式，分別為上、中、下
DIRECTION = LEFT 或 RIGHT 代表由右到左或由左到右的旋轉方向
LOOP = n 設定跑馬燈捲動的次數
BEHAVIOR = SCROLL 或 SLIDE 或 ALTERNATE
設定跑馬燈的效果，捲動或滑動
HEIGHT = n、n% 設定跑馬燈的高度
WIDTH = n、n% 設定跑馬燈的寬度
SCROLLAMOUNT = n 設定跑馬燈捲動的步伐 SCROLLDELAY = n 設定跑馬燈捲動時間的延遲 屬
性
BGCOLOR = #rrggbb 設定跑馬燈文字的顏色
特殊字元
特殊字元 定義
空白字元
< <
> >
& &
列表及表格標籤
標籤 定義
<OL>……</OL> 產生有編號順序的列表
START = n 指定列表的編號要從幾號開始
TYPE = A, a, I, i, 1 選擇不同的編號數字系統，分別為大寫英 文字母、小寫英文字母，大寫羅馬字母、
小寫羅馬字母，數字
<LI>……</LI> 加入各式列表的列表項目
START = n 設定該項及以後編號的開始號碼
TYPE = A, a, I, i, 1 該項及以後的編號數字系統
<UL>……</UL> 產生非編號的列表 TYPE = DISC 或 CIRCLE 或
SQUARE
設定列表項目前的項目符號為●、○、■
(小小的)
<DL>……</DL> 產生定義型列表 (名詞解釋列表)
<DD> 設定名詞解釋內容
<TABLE>……</TABLE> 產生表格
BORDER = n 設定框線的寬度 (0 代表無框線)
HEIGHT = n, n% 設定表格的高度 WIDTH = n, n% 設定表格的寬度
CELLSPACING = n 設定資料格和資料格之間的距離
CELLPADDING = n 設定資料格內容和資料格框線間的距離 BORDERCOLOR = #rrggbb 設定表格的框線顏色
BGCOLOR = #rrggbb 設定表格的背景顏色 BACKGROUND = 圖片 URL 設定表格的背景圖片 屬
性
ALIGN = LEFT 或 CENTER 或 RIGHT
設定表格的對齊方式
<CAPTION>……</CAPTION> 設定表格標題 屬
性
ALIGN = TOP 或 BOTTOM 設定標題文字放置的位置 (上或下)
<TR>……</TR> 為表格新增一列的資料 ALIGN = LEFT 或 CENTER 或
RIGHT
設定一列所有資料格的水平對齊方式
VALIGN = TOP 或 MIDDLE 或 BOTTOM
設定一列所有資料格的垂直對齊方式
HEIGHT = n, n% 設定一列的高度 屬
性
WIDTH = n, n% 設定一列所有資料格的寬度
<TH>……</TH> 為表格新增一表格
<TD>……</TD> 在表格一列中新增一欄的資料格 ALIGN = LEFT 或 CENTER 或
RIGHT
設定資料格的水平對齊方式
VALIGN = TOP 或 MIDDLE 或 BOTTOM
設定資料格的垂直對齊方式
HEIGHT = n, n% 設定資料格的高度
WIDTH = n, n% 設定資料格的寬度
NOWRAP 關閉資料格的換行功能
COLSPAN = n 此資料格為橫跨 n 行且合併 n 格資料格 ROWSPAN = n 此資料格為橫跨 n 列且合併 n 格資料格 BORDERCOLOR = #rrggbb 設定此資料格的框線顏色
屬 性
BGCOLOR = #rrggbb 設定此資料格的背景顏色
鏈結標籤
標籤 定義
<A>……</A> 建立超連結 HREF = 欲連結 URL
如：http://www.google.com.tw
表示連結到哪個位址，讀取什麼形式的文 件。文件可以是任何形式的文件，如：網 頁文件、影像、office 文件或壓縮檔…等 等。
NAME = name 在文件中設定一個連結點
屬 性
TARGET = _parent 或 _blank 或 _self 或 _top 或 frame 名稱
超連結顯示的目標，_blank 為新視窗
<BASE HREF = URL> 設定文件相對連結的位址基底
影像音樂標籤
標籤 定義
<IMG> 加入圖片
SRC = 圖片檔的 URL 設定圖片檔的檔名
ALT = 說明文字 代替影像的說明文字
BORDER = n 設定圖片外框的寬度 (0 表示無外框)
HEIGHT = n, n% 設定圖片顯示的高度 WIDTH = n, n% 設定圖片顯示的寬度
HSPACE = n 設定圖片的左右邊界的空白
VSPACE = n 設定圖片的上下邊界的空白
ALIGN = LEFT 或 CENTER 或 RIGHT
設定圖片和文字的對齊方式
VALIGN = TOP 或 MIDDLE 或 BOTTOM
設定圖片和文字的垂直對齊方式 屬
性
ISMAP 宣告圖片為影像地圖
<EMBED SRC = 多媒體檔 URL> 將多媒體資料嵌入文件中
<BGSOUND> 設定背景音樂 屬
性
LOOP = n 設定背景音樂重覆播放的次數
頁框標籤
標籤 定義
<FRAMESET>……</FRAMESET> 建立一個頁框組 (一畫面包含多個頁框) COLS = n, *, … 垂直切割畫面，也就是將畫面左右分開
COLS = “*”, 沒有切割
COLS = “80, *”, 切割為左右兩個 COLS = “40, *, 40”, 切割為左中右三個 ROWS = n, *, … 橫向切割畫面，也就是將畫面上下分開 FRAMEBORDER = yes 或 no 設定是否顯示頁框的邊框
BORDER = n 設定頁框邊框的寬度
屬 性
FRAMESPACING = n 表示頁框與頁框間的保留空白的距離
<FRAME>……</FRAME> 建立一個頁框
SRC = URL 設定此頁框中要顯示的網頁名稱
NAME = name 設定此頁框的名稱
FRAMEBORDER = yes 或 no 設定是否顯示頁框的邊框
BORDER = n 設定頁框邊框的寬度
SCROLLING = yes 或 no 或 auto 設定是否顯示捲軸。要、不要、視需要
NORESIZE 設定此頁框的大小不可以改變
MARGINHEIGHT = n 表示頁框高度部份邊緣所保留的空間 屬
性
MARGINWIDTH = n 表示頁框寬度部份邊綠所保留的空間
表單標籤
標籤 定義
<FORM>……</FORM> 建立一個表單
ACTION = 執行程式的 URL 設定此表單的處理程式 屬
性 METHOD = GET 或 POST 設定表單資料的傳遞方式 (POST 有編碼)
<INPUT> 加入表單的內容 (各種輸入欄位)
TYPE = text 文字輸入欄位
TYPE = submit 表單資料送出按鈕
TYPE = reset 表單資料重設按鈕
TYPE = password 密碼輸入欄
TYPE = radio 多選一的選項按鈕
TYPE = checkbox 複選的核取方塊 TYPE = hidden 隱藏式的欄位 屬
性
TYPE = image 影像索引欄位
NAME = 欄位名稱 設定此欄位的名稱
VALUE = value 設定欄位的初始值或顯示的資訊
SIZE = n 設定文字欄位的輸入框長度
MAXLENGTH = n 設定文字欄的最大輸入字數
CHECKED checkbox 或 radio 輸入欄位的初始項目
<SELECT>……</SELECT> 建立一個下拉式選單
MULTIPLE 設定可複選
SIZE = n 設定下拉式選單一開始出現的列數
屬 性
NAME = 欄位名稱 設定此欄位的名稱
<OPTION> 在下拉式選單中增加一個選項
VALUE = value 代表選擇此選項的值 屬
性 SELECTED 代表這個選項為初選項目
<TEXTAREA>……</TEXTAREA> 加入一個有選動軸的多列文字輸入欄
ROWS = n 設定此文字輸入欄的列數
COLS = n 設定此文字輸入欄的行數
屬
性 NAME = 欄位名稱 設定此欄位的名稱
