利用HTML標記(如<h1>、<h2>或<font>等標記)做為選擇器(selector)，再利用『連結外部樣式檔』與『內嵌宣告』之方式(詳細介紹請詳網頁教學：如何用套用CSS樣式表)，就可以將HTML程式碼裡中之HTML標記都套用同一種樣式。但是如果希望樣式可以套用到不同之HTML標記，可以利用HTML標記(如<font>標記)的『class』屬性及『id』屬性來達到目的，即利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器。【小提示：CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成，示如圖1 ，詳細介紹請詳網頁教學：CSS之基本格式。】
圖1 CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成
一、以『.class屬性之設定值』為選擇器
- 首先要在HTML標記裡加入『class』屬性。在此以<font>標記來說明，其輸入語法如下：
<font class="test1">
【小提示：『class』屬性之設定值是我們自己命名的，盡量不要使用HTML標記名稱作為『class』屬性之設定值，以免混淆。】 - 接著只要在CSS樣式表裡加入以『.class屬性之設定值』為選擇器之樣式規則。其輸入語法如下：
.test1{font-size:16px; color:#FFFFFF; font-weight:bold; }
圖2 以『.class屬性之設定值』為選擇器
圖3 以圖2內容所製作之網頁內容(以瀏覽器執行之結果)
二、以『.id屬性之設定值』為選擇器
- 首先要在HTML標記裡加入『id』屬性。在此以<font>標記來說明，其輸入語法如下：
<font id="test2">
【小提示：『id』屬性之設定值是我們自己命名的，盡量不要使用HTML標記名稱作為『id』屬性之設定值，以免混淆。】 - 接著只要在CSS樣式表裡加入以『#id屬性之設定值』為選擇器之樣式規則。其輸入語法如下：
#test2{font-size:16px; color:#FFFFFF; font-weight:bold; }
三、只在指定之HTML標記上套用CSS樣式表
當你設定了利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器之CSS樣式，只要在欲套用之HTML標記中加入『class』屬性及『id』屬性，即可套用CSS樣式。如果你只希望在指定之HTML標記上套用CSS樣式，可以在『.class屬性之設定值』或『#id屬性之設定值』前加上指定之HTML標記名稱。其輸入語法如下所示：
font.class屬性之設定值{font-size:16px; color:#FFFFFF; font-weight:bold;}
font.test1{font-size:16px; color:#FFFFFF; font-weight:bold;}
及font#test2{font-size:16px; color:#FFFFFF; font-weight:bold;}
壹、表單的應用
表單主要功能係讓使用者輸入資料之用，聽起會不會覺得一頭霧水呢？舉例來說好了，你平常上網購物、搜尋網頁、投票或是註冊網站會員，皆有使用到表單之功能。以下為一般常見的表單應用：
一、網頁搜尋
二、線上投票
三、線上購物
四、會員註冊
貳、表單之設置
表單元件種類可分為四大類，文字文件、清單元件、核取元件及按鈕元件等。
一、表單之基本架構
由一個簡單且基本的登入畫面來瞭解並解說表單的基本架構。圖1及圖2分別為登入畫面之原始碼及以瀏覽器瀏覽之結果。
圖1 登入畫面之原始碼
圖2 以圖1之內容所製作之網頁(以瀏覽器瀏覽之結果)
二、<form>標記之介紹及其屬性之使用方法
1.<form>標記
<form>標記及</form>標記之功能分別為為宣告表單之開始及結束，各種表單之元件必須放在<form>標記與</form>標記中間，才能被有效執行。關於<form>標記之輸入語法請詳圖1。【小提示：就好像<table>標記與</table>標記一樣，宣告表格之起始及結束之範圍。】
2.<form>標記之屬性介紹及使用方法
<form>標記之屬性包括有<method>、<action>及<entype>，其使用介紹及使用方法彙整如下：
- <method>屬性：<method>屬性係設定傳送資料之方式，其設定值有"post"與"get"二種。
1.method="get"
利用「get」方式傳送資料時，傳送之資料會直接顯示在網址列上，安全性較有疑慮；此外利用「get」方式進行傳送資料，它有字元限值，最多僅可傳送255個字元，適用於資料量較少之表單。
2.method="post"
利用「post」方式傳送資料時，係將資料封裝之後再傳送，傳送資料沒有字元限制，資料傳送之安全性較高，對於需要保密的資料較常採用「post」方式來傳送。
"post"與"get"二種設定值之使用時機及優缺點彙整示如表1。
表1 "post"與"get"二種設定值之使用時機及優缺點彙整一覽表
- <action>屬性：
- <enctype>屬性：為傳送表單的編碼方式，共計有三種模式。
1.enctype="text/plain"：將表單內容以E-mail傳送時，<enctrype>屬性之設定值必須設定為"text/plain"，否則傳送至E-mail軟體時，會出現亂碼。
2.enctype="multipart/form-data"：若要上傳檔案，<enctrype>屬性之設定值必須設定為"multipart/form-data"。
3.enctype="application/x-www-form-urlencoded"：如果未指定<enctrype>屬性，則<enctrype>屬性會預設為"application/x-www-form-urlencoded"。
三、製作表單所需使用之重要標記介紹
因為製作表單常用之主要表單元件可分為四大類，包括文字元件、清單元件、核取元件及按鈕元件，在此篇中僅介紹其名稱及輸入語法之範例，相關詳細之設定方法將在其它篇幅中說明。表2為製作表單之主要元件名稱及輸入語法之範例。
表2 製作表單之主要元件名稱及輸入語法之範例一覽表
| 表單元件分類 | 元件名稱 | 輸入語法範例 | 備註 |
| 文字元件 | text | <input type="text" name="username" value="在此輸入文字" size="10" maxlength="10" readonly> | |
| textarea | <textarea cols="20" rows="2" name="文字區域欄位" wrap="virtual"></textarea readonly> | ||
| pqssword | <input type="password" name="在此輸入密碼" size="15"> | ||
| 清單元件 | select | <select size="4" name="name"> | |
| 核取元件 | radio | <input type="radio" name="gender" value="女" align="nmiddle" checked> | |
| checkbox | <input type="checkbox" name="interest" value="看電影" align="middle" checked>看電影 | ||
| 按鈕元件 | submit | <input type="submit" name="aa" value="送出" align="middle"> | |
| reset | <input type="reset" name="bb" value="重新設定" align="middle"> | ||
| button | <input type="button" name="cc" value="回到上一頁" align="middle"> |
【小提示：<marquee >標記只適用於IE瀏覽器。】
『跑馬燈』這名詞大家應該不陌生，在看新聞台時，常會看到在字串在螢幕的左右或上下移動。在網頁內容的呈現上，也可以製作出這種效果，只要利用<marguee>標記即可。以下將介紹<marguee>標記之使用方法：
一、文字跑馬燈
(1)<marguee>標記(跑馬燈)之語法
一般在設計網頁時，會將重要之公告或消息以跑馬燈之方式呈現，希望瀏覽者在瀏覽網頁時能馬上注意到跑馬燈上之訊息。因為跑馬燈會捲動，為了不讓瀏覽者等待太多時間及看得眼花瞭亂，跑馬燈刊載之字數不宜太多。
跑馬燈之語法如下：
<marquee direction="right" behavior="slide" scrolldelay="120" loop="5" bgcolor="#00FFFF" width="500" height="30">觀迎光臨育華影印店！</marquee>
(2)<marguee>標記屬性之介紹
在此再複習一下標記屬性之輸入位置及規定。屬性係直接輸入在起始標記內，其輸入之規定彙整如下：
- 直接置於起始標記內。
- 標記屬性輸入之格式為：屬性名稱="設定值" 。
- 如果有很多屬性，則以空白隔開不同的屬性。
- 屬性輸入後，其設定值之前後需輸入 『"』，如<body text="#000000">。
1.direction屬性
設定文字的捲動方向，『left』表示向左移動，『right』表示向右移動。當沒有填寫direction屬性時，會預設為向左(left)移動。
2.behavior屬性
設定文字的捲動模式，分為三種：
- behavior="scroll"
文字從一端開始跑動，捲動到另一端消失，當沒有指定behavior屬性時，會預設為此種捲動模式。
- behavior="slide"
文字從一端開始跑動，捲動到另一端就會完全消失。
- behavior="alternate"
文字從一端開始跑動，捲動到另一端時，會立即轉向另一端，在兩端交替跑來跑去。
3.bgcolor屬性
設定跑馬燈的顏色。
4.width屬性
設定跑馬燈的寬度。如未指定跑馬燈寬度，則預設為螢幕寬度。
5. height屬性
設定跑馬燈的高度。如未指定跑馬燈高度，則預設為與文字或圖片相同高度。
6.hspace屬性
設定跑馬燈與四周文字的水平空白距離。
7.vspace屬性
設定跑馬燈與四周文字的垂直空白距離。
8.loop屬性(loop="infinite")
設定跑馬燈重複次數，其設定值可以是『整數』或是『infinite』。『infinite』表示無限次，如果未指定loop屬性，則預設為『infinite』。
9.scrollamount屬性
跑馬燈移動的距離，單位為「像素」。
10.scrolldelay屬性
跑馬燈移動的停頓時間 ，單位為「毫秒」。
二、圖片跑馬燈
除了可設定文字的跑馬燈之外，圖片也可以有跑馬燈效果。要將圖片設定成具有跑馬燈之效果，同樣係仗用<marquee>標記，只要將文字替換成影像標記就可以了，其他屬性設定都與設定文字跑馬燈一樣。
三、上下捲動的跑馬燈
在瀏覽其它網站時，發現其實跑馬燈也可以上下捲動。輸入之語法很簡單，其實只要改變一下<marquee>標記中之<direction>屬性即可。
其輸入語法如下：
- 向上捲動
<marquee direction="up" behavior="slide" scrolldelay="120" loop="5" bgcolor="#00FFFF" width="500" height="30">觀迎光臨育華影印店！ </marquee>向下捲動
<marquee direction="down" behavior="slide" scrolldelay="120" loop="5" bgcolor="#00FFFF" width="500" height="30">觀迎光臨育華影印店！ </marquee>
在網頁中加入水平線，可以讓瀏覽者更容易區分網頁之內容，也可以讓網頁有更多的變化。
一、加入水平線：使用<hr>標記
<hr aling=〝right〞 size=〝1〞 width=〝80%〞 color=〝#0000FF〞 noshade>
【小提示：各種標記之屬性係直接輸在起始標記中，其輸入之語法為『屬性名稱=〝設定值〞』，不同的屬性以空格隔開。】
二、<hr>標記之屬性介紹
| 屬性名稱 | 設定值 | 說明 |
| align | right | 1.線條放置之位置。 |
| size | 像素值 | 1.設定線條的粗細(厚度)。 |
| color | 顏色名稱 | 設定線條顏色。 |
| width | 像素值 | 1.設定線條長度。 |
| noshade | － | 1.設定水平線條為平面顯示。 2.預設值：立體並有陰影。 |
網頁中最常使用的是文字，文字的排版對網頁閱讀起來的流暢度有大的影響。一般我們使用word或openoffice這類文書軟體時，需要罝中與縮排時，只需按下『置中』及『縮排』之按鈕即可完成。但在網頁的呈現上，則必需使用相關標記，如<center>(置中標記)及<blockquote>(縮排標記)，才能達到相同的功能。【因為最近常在kkbox上聽林俊傑的『背對背擁抱』，覺得很好聽，所以就把這首歌的歌詞拿來做網頁文字排版之範例內容。】
一、置中標記：<center></center>
<center>標記的作用係將文字置中，只要在你想要讓它置中之文字前後分別加上<center>及</center>，就可讓該文字置於網頁之中間。由圖1之內容可看到「然後戰火再燃燒」字串前後分別有加上<center>及</center>，在用瀏覽器瀏覽該網頁時(示如圖2)，則可以看到「然後戰火再燃燒」字串位於網頁的中間。
圖1 <center>、<blockquote>及<pre>標記之使用方式
圖2 利用圖1內容製作之網頁內容
二、縮排標記：<blockquote></blockquote>
<blockquote>標記的作用是縮排標記，如果我們需要某段文字縮排，只要在其前後分別加上<blockquote>及</blockquote>，在用瀏覽器瀏覽該網頁時，就可讓該段文字呈現縮排的效果。由圖1之內容可看到「我們背對背擁抱」字串前後分別有加上<blockquote>及</blockquote>，在用瀏覽器瀏覽該網時(示如圖2)，則可以看到「我們背對背擁抱」字串呈現縮排之情形。此外，若是針對一段文字使用二組以上之<blockquote>及</blockquote>標紀，該段文字將會一層層地往內縮排(示如圖2)。
在網頁設計上常用的單位有百分比(%)與像素(%)，這與我們在日常生活中常用之長度單位有很大之不同。但是長寬設定對網頁設計來說是一個很重要的部分，例如網頁呈現之大小、圖片大小及表格大小，甚至於是插入分隔線之長度大小，都需要用到長度之設定。以下茲就百分比(%)與像素(%)進行說明：
一、百分比
標記本身與外圍標記的百分比值。【以<hr>為例，當<hr>置於<body>與</body>內容中，則外圍標記就是<body>標記，但若是放在<td>與</td>標記中，則外圍標記就是<td>標記】
以<hr>標記來說明，其用途為在網頁中加入水平線，其width屬性值是用來設定水平線之長度。
圖1 以<hr>標記來說明長寬設定之方式
圖2 以圖1之內容所製作之網頁內容(以瀏覽器顯示之結果)
二、像素(px，pixels)
瀏覽器所使用的預設單位為像素(px)。由圖1之內容來看，當<hr>標記屬性之設定值沒有輸入單位時，表示係以像素(px)來顯示。
網頁中的標記有許多的功能，可以用來組成網頁的內容。有些標記可以加上一些屬性，如文字顏色、背景顏色及指定背景圖片等，這些屬性將可改變網頁之呈現方式，更可以美化你的網頁內容。
一、標記屬性之輸入位置及規定
屬性係直接輸入在起始標記內，其輸入之規定彙整如下：
- 直接置於起始標記內。
- 標記屬性輸入之格式為：屬性名稱="設定值" 。
- 如果有很多屬性，則以空白隔開不同的屬性。
- 屬性輸入後，其設定值之前後需輸入 『"』，如<body text="#000000">。
二、標記屬性的用法介紹
圖1之內容可看到，<body>標記之起始標記內容中，有『text』、『bgcolor』、『link』、『alink』、『background』、『bgproperties』、『leftmargin』及『topmargin』等文字，這些就是<body>標記的屬性。標記之種類很多，其屬性亦有許多種，在此一部份沒有辦法逐一介紹，在此僅以<body>標記來介紹。
圖1 標記屬性的用法介紹
<body>標記的屬性功用說明如下：
-
text
-
link
-
alink
-
vlink
-
background
-
bgcolor
-
leftmargin
-
topmargin
-
bgproperties
一個最簡單的html網頁，是由<html>與</html>標記出網頁開始與結束(如圖1)，網頁內大致可分為頭(<head>)與身體(<body>)二部分，而<head>與<body>內又有許多具備其他能功能的標記，如<title>、<br>及<hr>等，才能完全構成一個功能完整的網頁。就好像人的身體一樣，除了頭與身體外，還需要脖子連接頭與身體，更需要四肢人才能自由的活動。
圖1 網頁的基本組成(本範例係利用dreamwaver編輯，切換至《程式碼》頁面時之情形)
以圖1的內容為例，逐一說明裡面各相關標記的功能。
一、<head>與</head>標記
<head>與</head>標記內一般係用來放置網頁的相關資訊，例如<title>、<meta>，這些資訊通常不會呈現在網頁內容中。
二、<tilte>與</title>標記
<title>與</title>係用來說明此網頁的標題，此標題會顯示在你使用的瀏覽器標題列上(如圖2)。另外，當別人要將你所製作的網頁儲存為『我的最愛』時，該書籤之預設名稱(如圖3)。
圖2 用瀏覽器觀看依『圖1』內容所製作之網頁
圖3 新增我的最愛時，「名稱」欄位之內容，即為<title>與</title>間之文字
三、<body>與</body>標記
這裡係放置網頁的內容，這些內容將直接呈現在網頁之內容中(如圖2)。
訂閱：
文章 (Atom)
