HTML語法教學- 環球暢貨行銷提供您正確的網路行銷觀念
文章推薦指數： 80 %
-這裡是個人的介紹開始-->)，讓網頁文件的架構較適合用於程式語法的套用以及日後的修改。 、
常用到的HTML標籤語法，儲存在自己專用的標籤列表。
如>
貳、HTML寫作注意事項
2.1編輯工具：
記事本：因為編輯的是純文字。
Dreamweaver：專業的網頁編輯器。
FrontPage：微軟設計的網站編輯器。
UltraEdit：工程師常用的軟體之一，易用於文字編輯和程式撰寫。
當然，市面上還有很多其他的小工具，在此就不再列舉..。
2.2注意事項：
雖然HTML標籤不分大小寫，但為了日後方便搜尋修改，最好還是統一大小寫。
在儲存檔案的時候，若單純只是html語法而已，請儲存成.html或.htm(不支援長檔名系統所用)，另外若使用的是Unix系統，則檔名的大小寫會有差別。
檔名最好不要有空白字元，可用"_"代替。
適時地在網頁文件內加入說明標籤(如)，讓網頁文件的架構較適合用於程式語法的套用以及日後的修改。
常用到的HTML標籤語法，儲存在自己專用的標籤列表。
如
■標籤及屬性的介紹
3.1標籤(tag)：
大致上可以分成兩種，一種是用來網頁識別用；另外一種是用來呈現網頁用。
例如：
網頁識別:、、、這個標籤來告訴電腦，這是一個表格，至於BORDER=1這參數是設定此表格的框線粗細為
1。
1
2
3
看見沒有，
一組是設定一橫列的開始。
一組則是設定一個欄位。
當然，文字就是要擺在這裡面。
現在我們再來增加二個格子：
原始碼
呈現結果
1
2
3
沒有增加， 卻增加了二組。
那如果我要再加上一列呢？很簡單，就像這樣：
原始碼
呈現結果
1
2
3
1
2
3
4
5
6
【合併表格欄位】
並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠「合併欄位」，讓表格更美觀、更實用一點，而談到「合併欄位」，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併）
，一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。4
5
6
左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將1、2、3格通通合併變成一大格：
原始碼
呈現結果
1
4
5
6
您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的4
5
6
標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個欄位左右
橫跨了3個欄位」，也正因如此，本來的兩個
都可以省掉了，因為都被併掉了嘛！
上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將1、4格通通合併變成一大格：
原始碼
呈現結果
2
3
1
2
3
5
6
有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下
面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的5
6
標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」，其結果如下：
【表格欄位對齊位置設定】
我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：
原始碼
呈現結果
1 加入
ALIGN=CENTER這參數即可：
原始碼
呈現結果
中呢？因為，
是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在
中。
既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用VALIGN=TOP
這種屬性即可讓表格內物件靠上方對齊。
原始碼
呈現結果
【表格背景、底色設定】
那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。
底下是指定整格表格背景顏色的方法：
原始碼
呈現結果
1
2
1
2
3
4
將BGCOLOR="顏色碼"加在3
4
中，可以指定「一列」的背景顏色：
原始碼
呈現結果
1
2
1
2
3
4
將BGCOLOR="顏色碼"加在3
4
中，可以指定「一欄」的背景顏色：
原始碼
呈現結果
2
1
2
3
4
表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。3
4
和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列
的背景圖片：
原始碼
呈現結果
1
2
1
2
3
4
將BACKGROUND="圖片名稱"加在3
4
中，可以指定「一欄」的背景顏色：
原始碼
呈現結果
2
1
2
3
4
【表格框線設定】
如何設定表格粗細？只要利用BORDER="粗細值"就行了。3
4
原始碼
呈現結果
1
原始碼
呈現結果
1
原始碼
呈現結果
1
一般而言內定值為2，不過我建議設定為4比較漂亮。
原始碼
呈現結果
1
2
我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。1
2
一般而言內定值為2，不過我通常習慣設為
0。
原始碼
呈現結果
1
2
4.10序列標籤
【無序標籤】
序列標籤基本上可分為兩種，一種是「無序條列」，一種是「有序條列」。1
2
所謂「無序條列」當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔
。
至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
我們先來看看「無序列表標籤」如何使用：
原始碼
呈現結果
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中標籤即為「無序列表標籤」，每增加一列內容，就必須加一個
姓名：傑克昇凱
生日：1974/11/21
星座：天蠍座
【有序標籤】
接下來，我們來看看「有序列表標籤」如何使用：
原始碼
呈現結果
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。
）：
原始碼
呈現結果
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中標籤即為「有序列表標籤」，每增加一列內容，就必須加一個
姓名：傑克昇
生日：1974/11/21
星座：天蠍座
另外，我們亦可指定序列起始的數目，其方法如下：
原始碼
呈現結果
和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
原始碼
呈現結果
我們先來舉個例子，我們常常會在文章中看見這樣的格式：
CSS（Cascadingstylesheet）
CSS是由W3C於1996年12月所公佈的一項新技術，什麼叫做Cascadingstyle
sheet？簡單說來他是一種具有階層性的形式設定，能夠讓網頁設計者在設計網頁時，對於網頁上的任何物件均有更佳的操控性…
網頁裡也有可以做到這種效果的標籤喔！現在要來跟各位說的就是這個標籤。
咱們先來看看這標籤的用法：
我們先來看看「定義列表標籤」如何使用：
原始碼
呈現結果
小標題
標題的內容說明
4.11表單標籤
【表單的用途】
對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA
Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。
不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！
本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。
【各種輸入類型】
文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。
文字輸入列的形態就是TYPE="TEXT，其使用方法如下：
呈現結果
姓名：
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
單選核取表單：利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。
呈現結果
性別：男
女
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
複選核取表單：利用TYPE="CHECKBOX
"就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。
呈現結果
喜好：
電影
看書
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
密碼表單：利用TYPE="PASSWORD
"就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
呈現結果
請輸入密碼：
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE="
SUBMIT"及TYPE="RESET"來產生，相當的簡單易用。
呈現結果
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一按鈕的名稱。
VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
按鈕元件：表單中或是JAVASCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE="
BUTTON"來產生一個按鈕，相當簡單。
呈現結果
請按下按鈕：
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一按鈕的名稱。
VALUE="文字"，是設定此一按鈕上要呈現的文字。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文
字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
隱藏欄位：表單中有時有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE="
HIDDEN"來產生一個隱藏的欄位。
呈現結果
隱藏欄位：
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱。
VALUE="文字"，是設定此一欄位的值、文字或意義。
【大量文字輸入元件】
有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可
作為預設文字。
呈現結果
請輸入您的意見：
原始碼
其有下列可設定之屬性：
NAME="名稱"，是設定此一欄位的名稱。
WRAP="設定值"，是設定此一欄位的換行模式。
設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、
PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
COLS="數值"，是設定此一欄位的行數（橫向字數）。
ROWS="數值"，是設定此一欄位的列數（垂直字數）。
【下拉式選單】
下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用
延伸文章資訊
- 1HTML語法教學
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件...
- 2HTML 基礎- 學習該如何開發Web
HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成， ...
- 3提供HTML語法整理表
文件檔頭資料. 文件宣告. <HTML></HTML> · 內容宣告區. <HEAD></HEAD> · 文件主體. <BODY ></BODY> · 網站標題. <TITLE></TITLE>...
- 4HTML 是什麼？HTML 語法入門教學｜ALPHA Camp Blog
HTML 是Hypertext Markup Language 的縮寫，也就是「超文本標記語言」(請注意他是標記語言，不是程式語言)。HTML5是HTML的最新修訂版本， ...
- 5HTML 語法教學HyperText Markup Language 超文件標示語言
HTML (HyperText Markup Language) 教學. HTML (HyperText Markup Language, 超文字標示語言) 是用來編寫網頁(web pages)...
