第 2 章 HTML、XML和XHTML實務

第第 22 章章 HTMLHTML、、 XMLXML和和 XHTMLXHTML實務實務

2-1 HTML2-1 HTML 的基礎的基礎 2-2 HTML2-2 HTML 標籤標籤 2-3 XML2-3 XML與與 XSLTXSLT 的基礎的基礎 2-4 2-4 建立建立 XHTMLXHTML 文件文件

2-1 HTML2-1 HTML的基礎的基礎 2-1-1 2-1-1 第一份第一份 HTMLHTML 文件文件 2-1-2 HTML2-1-2 HTML 文件的基本架構文件的基本架構 2-1-3 Meta2-1-3 Meta 標籤的使用標籤的使用

2-1-1 2-1-1 第一份第一份 HTMLHTML 文件文件 -- 說明說明11

「「 HTMLHTML 」（」（ HyperText Markup HyperText Markup LanguageLanguage ）標記語言屬於一種文件編排）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯語言，其目的是編排文件的內容，以便顯示漂亮的文件內容，示漂亮的文件內容， HTMLHTML 使用使用 SGMLSGML 語語法，「法，「 SGMLSGML 」（」（ Standard Standard Generalized Markup LanguageGeneralized Markup Language ）屬於）屬於一種功能強大的文件標示、管理和編排語一種功能強大的文件標示、管理和編排語言，早在言，早在 19801980 年就已經公佈語言的草稿，年就已經公佈語言的草稿，在在 19861986 年成為年成為 ISOISO 標準的文件描述語言。標準的文件描述語言。

2-1-1 2-1-1 第一份第一份 HTMLHTML 文件文件 -- 說明說明22

Tim Berners-LeeTim Berners-Lee在在 19911991 年建立年建立 HTMLHTML ，在，在19931993年年 HTML1.0HTML1.0 版由版由 Berners-LeeBerners-Lee和和ConnollyConnolly 完成，經過完成，經過 3.23.2 版到目前的最新版版到目前的最新版HTML 4.0xHTML 4.0x 版，版， HTMLHTML 是一種文件的格式編排是一種文件的格式編排語言，並不像語言，並不像 SGMLSGML 允許定義如何標示文件的標允許定義如何標示文件的標籤，籤， HTMLHTML 只是使用只是使用 SGMLSGML 的慣用語法，也就是的慣用語法，也就是標籤和屬性，如下所示：標籤和屬性，如下所示：• 「標籤」（「標籤」（ TagTag）：）： HTMLHTML 標籤是一個字串符號，主標籤是一個字串符號，主

要是標示需要套用編排格式的文字內容，在標籤內的要是標示需要套用編排格式的文字內容，在標籤內的文字是使用預設格式編排。文字是使用預設格式編排。

• 「屬性」（「屬性」（ AttributeAttribute ）：）：每一個標籤可以擁有一些每一個標籤可以擁有一些屬性來定義文字內容的細部編排。屬性來定義文字內容的細部編排。

2-1-1 2-1-1 第一份第一份 HTMLHTML 文件文件 -- 範例範例01: <html>01: <html>02: <head>02: <head>03: <title>Ch2_1_1.htm</title>03: <title>Ch2_1_1.htm</title>04: </head>04: </head>05: <body>05: <body>06: <b>From: </b>[email protected]<br>06: <b>From: </b>[email protected]<br>07: <b>To: </b>[email protected]<br>07: <b>To: </b>[email protected]<br>08: <b>Subject: </b>08: <b>Subject: </b> 測試郵件功能測試郵件功能 <br><br>09: <p>09: <p> 這是第一封郵件這是第一封郵件 </p></p>10: </body>10: </body>11: </html>11: </html>

2-1-1 2-1-1 第一份第一份 HTMLHTML 文件文件 -- 圖例圖例

2-1-2 HTML2-1-2 HTML 文件的基本架構文件的基本架構 -- 架架構構

HTMLHTML 文件是一份文字檔案，內含網頁顯示的內容和標示文件是一份文字檔案，內含網頁顯示的內容和標示編排的標籤指令。現在就讓我們來看看編排的標籤指令。現在就讓我們來看看 HTMLHTML 文件標籤的文件標籤的基本架構，如下所示：基本架構，如下所示：

<html> <html> 標示著一份標示著一份 HTMLHTML 網頁網頁 <head> HTML<head> HTML 網頁的基本定義網頁的基本定義 </head></head> <body> HTML<body> HTML 網頁的內容網頁的內容 </body></body></html></html> 文件架構的文件架構的 HTMLHTML 文件是包含於文件是包含於 <html><html>和和 </html></html>

標籤間的內容和定義，其中標籤間的內容和定義，其中 <head><head>和和 </head></head> 標籤標籤包圍的區塊定義包圍的區塊定義 HTMLHTML 網頁的本身，例如：標題文字，實網頁的本身，例如：標題文字，實際的網頁內容則是定義在際的網頁內容則是定義在 <body><body>和和 </body></body> 標籤間，標籤間，這才是網頁真正的內容。這才是網頁真正的內容。

2-1-2 HTML2-1-2 HTML 文件的基本架構文件的基本架構 -- 注意注意事項事項

HTMLHTML 標籤使用小於標籤使用小於 "<""<" 和大於和大於 ">"">" 符號夾著指令，稱符號夾著指令，稱為標籤，每一個標籤都是成雙成對，例如：為標籤，每一個標籤都是成雙成對，例如： HTMLHTML 文件是文件是以以 <html><html> 開頭，和開頭，和 </html></html> 結尾，在上面的結尾，在上面的 HTMLHTML架構可以看出標籤成雙配對的特性。架構可以看出標籤成雙配對的特性。

HTMLHTML 標籤並不分英文大小寫，例如：標籤並不分英文大小寫，例如：<head><head>、、 <HEAD><HEAD>和和 <Head><Head> 都代表相同的標籤。都代表相同的標籤。

HTMLHTML 文件內容是一般文字檔案，不過文件內容是一般文字檔案，不過 EnterEnter 鍵的換行在鍵的換行在網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果文件內容需要強迫換行，請使用文件內容需要強迫換行，請使用 <br><br> 標籤。標籤。

HTMLHTML 文件的連續空白在瀏覽程式顯示時，會自動簡化成文件的連續空白在瀏覽程式顯示時，會自動簡化成一個空白。一個空白。

HTMLHTML 的註解文字是使用的註解文字是使用 """-->" 為結為結尾所包括的文字內容，瀏覽程式在顯示時會忽略註解文字。尾所包括的文字內容，瀏覽程式在顯示時會忽略註解文字。

2-1-3 Meta2-1-3 Meta 標籤的使用標籤的使用 -- 說明與說明與設定編輯工具設定編輯工具

<meta><meta> 標籤是位在標籤是位在 <head><head> 區塊，可以用來區塊，可以用來定義定義 HTMLHTML 標籤所沒有定義的相關資訊，常用的標籤所沒有定義的相關資訊，常用的應用如下所示：應用如下所示：

設定使用的編輯工具設定使用的編輯工具在在 <meta><meta> 標籤設定標籤設定 HTMLHTML 文件使用的編輯工文件使用的編輯工

具，此時的名稱具，此時的名稱 namename 屬性為屬性為GENERATORGENERATOR，， contentcontent 屬性為屬性為 Microsoft Microsoft NotePadNotePad ，如下所示：，如下所示：<meta name="GENERATOR" content="Microsoft <meta name="GENERATOR" content="Microsoft

NotePad">NotePad">

2-1-3 Meta2-1-3 Meta 標籤的使用標籤的使用 -- 設定網頁設定網頁使用的語系使用的語系

設定網頁使用的語系設定網頁使用的語系對於網頁來說，因為各國文字的內碼不同，對於網頁來說，因為各國文字的內碼不同，

為了讓瀏覽程式能夠顯示正確的網頁內容，為了讓瀏覽程式能夠顯示正確的網頁內容，在在 <meta><meta> 標籤可以設定使用的語系，使標籤可以設定使用的語系，使用用 http-equivhttp-equiv 屬性傳送屬性傳送 HTTPHTTP 通訊協定的通訊協定的標頭，以繁體中文來說是標頭，以繁體中文來說是 big5big5 ，如下所示：，如下所示：

<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; charset=big5">content="text/html; charset=big5">

2-1-3 Meta2-1-3 Meta 標籤的使用標籤的使用 -- 自動更新自動更新網頁內容系網頁內容系

自動更新網頁內容自動更新網頁內容 http-equivhttp-equiv 屬性另一個重要的功能是設定一段時屬性另一個重要的功能是設定一段時

間後，自動轉址到指定的間後，自動轉址到指定的 URLURL 網址，如下所示：網址，如下所示：<meta http-equiv="refresh" <meta http-equiv="refresh"

content="5;URL=showchatmsgs.jsp">content="5;URL=showchatmsgs.jsp"> 標籤使用標籤使用 refreshrefresh 屬性值，在屬性值，在 contentcontent 屬性指定屬性指定

等待的秒數和網址，使用分號分隔，數字等待的秒數和網址，使用分號分隔，數字 55 表示表示55 秒，如果需要馬上的轉向其值是秒，如果需要馬上的轉向其值是 00 ，， urlurl 是指是指定的網址。定的網址。

<mata><mata> 標籤的目的是在等待標籤的目的是在等待 55 秒鐘後，自動轉秒鐘後，自動轉址到址到 showchatmsgs.jspshowchatmsgs.jsp的的 JSPJSP 程式。程式。

2-2 HTML2-2 HTML標籤標籤 2-2-1 HTML2-2-1 HTML 的標頭標籤的標頭標籤 2-2-2 2-2-2 文字格式標籤文字格式標籤 2-2-3 2-2-3 清單項目標籤清單項目標籤 2-2-4 2-2-4 圖片和超連結標籤圖片和超連結標籤 2-2-5 2-2-5 網頁表格標籤網頁表格標籤 2-2-6 2-2-6 網頁表單標籤網頁表單標籤 2-2-7 2-2-7 框架頁標籤框架頁標籤

2-2-1 HTML2-2-1 HTML 的標頭標籤的標頭標籤在在 HTMLHTML的的 <head><head> 區塊屬於標頭標籤，區塊屬於標頭標籤，

我們可以使用下表的標籤來記錄一些網頁我們可以使用下表的標籤來記錄一些網頁資訊，如下表所示：資訊，如下表所示：標籤說明

<title>…</title> 網頁標題，顯示在瀏覽程式的標題列<base> 指定基底的 URL網址<meta> 設定伺服端或客戶端所需的識別資訊<link> 連結其它網頁，例如：CSS外部樣式表檔案

2-2-2 2-2-2 文字格式標籤文字格式標籤 -- 說明說明 11

HTMLHTML 網頁內容主要是文字內容，編排文網頁內容主要是文字內容，編排文字內容的各種格式效果標籤，如下表所示：字內容的各種格式效果標籤，如下表所示：

標籤說明<hn>…</hn> 顯示粗體的標題文字，n的值是 1~6，表示不同

的尺寸，愈小愈大<b>…</b> 粗體字<i>…</i> 斜體字<u>…</u> 底線字<s>…</s> 刪除線，在文字中間有一條線

<strike>…</strike> 刪除線，另一種刪除線<sub>…</sub> 下標字<sup>…</sup> 上標字

2-2-2 2-2-2 文字格式標籤文字格式標籤 -- 說明說明 22

標籤說明<tt>…</tt> 打字機字體

<big>…</big> 放大字體的字型<address>…</address> 使用地址的字體

<small>…</small> 縮小字體的字型<center>…</center> 文字內容是置中對齊<blink>…</blink> 閃爍字<font>…</font> 使用 face、size和 color屬性設定編排使用的字

體、尺寸和色彩<basefont> 指定網頁的基本字型

<br> 強迫文字換行<hr> 插入一條水平線

<p>…</p> 使用文字段落編排

2-2-2 2-2-2 文字格式標籤文字格式標籤 -- 範例範例在在 HTMLHTML 文字格式標籤是用來設定不同文文字格式標籤是用來設定不同文

件內容的格式編排，位在標籤中的文字內件內容的格式編排，位在標籤中的文字內容是需要編排效果的文字內容，如下所示：容是需要編排效果的文字內容，如下所示：<b>JSP 2.0<b>JSP 2.0 網頁製作徹底研究網頁製作徹底研究 </b></b>

<i>JSP 2.0<i>JSP 2.0 網頁製作徹底研究網頁製作徹底研究 </i></i>

<u>JSP 2.0<u>JSP 2.0 網頁製作徹底研究網頁製作徹底研究 <u><u> 上述文字內容分別使用粗體、斜體和底線上述文字內容分別使用粗體、斜體和底線

文字效果。文字效果。

2-2-3 2-2-3 清單項目標籤清單項目標籤 -- 說明說明 HTMLHTML 標籤提供多種清單編排，這是使用標籤提供多種清單編排，這是使用條列方式編排的文字內容，如下表所示：條列方式編排的文字內容，如下表所示：標籤說明

<ul>…</ul> 項目符號<ol>…</ol> 項目編號<dl>…</dl> 定義式清單

<menu>…</menu> 選單式清單<dir>…</dir> 目錄式清單

<lh> 清單標題<li> 清單項目<dt> 定義式的項目名稱<dd> 定義式的項目說明

2-2-3 2-2-3 清單項目標籤清單項目標籤 -- 範例範例在清單項目標籤中最常使用的是在清單項目標籤中最常使用的是 <ol><ol>和和

<ul><ul> 標籤，其中各項目是使用標籤，其中各項目是使用 <li><li> 標籤，標籤，如下所示：如下所示：<ol><ol>

<li>Java Applet<li>Java Applet

<li>JavaScript<li>JavaScript

<li>VBScript<li>VBScript

<li>DHTML <li>DHTML

</ol></ol>

在網頁插入圖片和使用超連結建立多媒體在網頁插入圖片和使用超連結建立多媒體網頁內容的相關標籤，如下表所示：網頁內容的相關標籤，如下表所示：

2-2-4 2-2-4 圖片和超連結標籤圖片和超連結標籤 -- 說明說明

標籤說明<a>…</a> 在網頁插入超連結

<img> 在網頁插入圖片<bgsound> 在網頁插入背景音樂<embed> 在網頁插入MIDI音樂檔

<marquee>…</marquee> 跑馬燈文字

2-2-4 2-2-4 圖片和超連結標籤圖片和超連結標籤 -- 超連結語超連結語法法

在在 HTMLHTML 文件插入超連結是使用文件插入超連結是使用 <a><a> 標標籤，其基本語法如下所示：籤，其基本語法如下所示：<a <a

href="protocol://domain/file#bookmark" href="protocol://domain/file#bookmark" target="frame_name"> … </a>target="frame_name"> … </a>

上述標籤的屬性說明，如下表所示：上述標籤的屬性說明，如下表所示：屬性說明href 設定超連結的目的地

target 指定超連結目的地顯示的框架名稱

2-2-4 2-2-4 圖片和超連結標籤圖片和超連結標籤 -- 圖片語法圖片語法在網頁插入圖片是使用在網頁插入圖片是使用 <img><img> 標籤，其標籤，其

基本語法如下所示：基本語法如下所示：<img src="filename" width=value <img src="filename" width=value

height=value align=left | right>height=value align=left | right> 上述標籤的屬性說明，如下表所示：上述標籤的屬性說明，如下表所示：屬性說明src 圖片檔案名稱和路徑，可以使用 gif、jpg或 png格式的圖片檔案

width 圖片寬度，可以是點數或百分比。height 圖片高度，可以是點數或百分比。align 圖片和文字在同一列顯示的編排位置，left是在文字的左方，right

是在文字的右方

2-2-5 2-2-5 網頁表格標籤網頁表格標籤 -- 說明說明網頁表格標籤是由一組標籤所組成，以便網頁表格標籤是由一組標籤所組成，以便

在網頁建立表格的編排，如下表所示：在網頁建立表格的編排，如下表所示：標籤說明

<table>…</table> 網頁表格<tr>…</tr> 表格中的一列<td>…</td> 表格中的一個儲存格

<caption>…</caption> 表格標題

2-2-5 2-2-5 網頁表格標籤網頁表格標籤 -- 語法語法網頁表格的每一列是使用網頁表格的每一列是使用 <tr><tr>和和 <td><td> 標籤組合出來，標籤組合出來，

一組一組 <tr></tr><tr></tr> 標籤是表格的一列，每一列中使用一組標籤是表格的一列，每一列中使用一組<td></td><td></td> 標籤建立一個儲存格，其基本語法如下所示：標籤建立一個儲存格，其基本語法如下所示：<table border=value><table border=value> <tr><tr> <td>........</td><td>........</td> …… …….. </tr></tr> <tr><tr> <td>.........</td><td>.........</td> …… …….... </tr></tr> …… …… …… ……</table></table>

2-2-6 2-2-6 網頁表單標籤網頁表單標籤 -- 說明說明網頁表單是網頁表單是 WebWeb 應用程式的使用介面，其應用程式的使用介面，其

相關標籤如下表所示：相關標籤如下表所示：標籤說明

<form>…</form> 建立表單<input type=…> 表單輸入或選擇資料的表單欄位，包含按鈕、

文字方塊、選擇鈕和核取方塊欄位，不同 type

屬性表示不同的欄位<select>…</select> 清單方塊或下拉式清單方塊

<option>…</option> 清單方塊的選項<textarea>…</textarea> 文字區域

2-2-6 2-2-6 網頁表單標籤網頁表單標籤 -- 架構架構網頁表單是上述網頁表單是上述 HTMLHTML 標籤的組合，基本表單的架構如下標籤的組合，基本表單的架構如下

所示：所示：<form name="name" method="post | get" action="URL" <form name="name" method="post | get" action="URL"

enctype="MIME">enctype="MIME"> <input type=…><input type=…> <textarea> …. </textarea><textarea> …. </textarea> <select><select> <option> …. </option><option> …. </option> </select></select> <input type="SUBMIT" …><input type="SUBMIT" …></form></form>

上述上述 <form><form> 標籤是一份表單，擁有欄位標籤標籤是一份表單，擁有欄位標籤 <input><input>、、<textarea><textarea>和和 <select><select>，， <select><select> 標籤擁有標籤擁有<option><option> 標籤的選項，一頁標籤的選項，一頁 <form><form> 標籤的表單需要標籤的表單需要一個一個 <input><input> 標籤的按鈕欄位，如下所示：標籤的按鈕欄位，如下所示：<input type="SUBMIT" name="Name" value="Caption"><input type="SUBMIT" name="Name" value="Caption">

2-2-7 2-2-7 框架頁標籤框架頁標籤 -- 說明說明框架頁是一種瀏覽程式視窗的分割方法，框架頁是一種瀏覽程式視窗的分割方法，

其標籤如下表所示：其標籤如下表所示：標籤說明

<frameset>…</frameset> 設定網頁是一頁框架頁<frame> 框架頁的框架分割，可分為上下或左右分割<iframe> 網頁的內置框架，可以直接在網頁插入所需的

框架<noframes>…</noframes> 不支援框架的瀏覽程式顯示的網頁內容

2-2-7 2-2-7 框架頁標籤框架頁標籤 -- 語法語法在瀏覽程式建立視窗左右分割的框架，如果在瀏覽程式建立視窗左右分割的框架，如果

HTMLHTML 文件為框架頁，原來的文件為框架頁，原來的 <body><body> 區塊將以區塊將以<frameset><frameset> 標籤取代，其基本語法如下所示：標籤取代，其基本語法如下所示：<frameset cols="value,value,"><frameset cols="value,value,">

<frame><frame>

<frame><frame>

</frameset></frameset>屬性說明cols 定義左右分割框架的大小，使用","符號分隔的每一個值為各區

域的大小，可以使用百分比或點數，屬性的每一個值對應一個<frame>標籤

<frame> 定義框架內容，主要是是顯示的 HTML文件

2-3 XML2-3 XML與與 XSLTXSLT的基礎的基礎 2-3-1 2-3-1 什麼是什麼是 XMLXML 2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 2-3-3 XSL2-3-3 XSL 的基礎的基礎 2-3-4 XSLT2-3-4 XSLT 是如何運作是如何運作

2-3-1 2-3-1 什麼是什麼是 XML-XML- 說明說明「「 XMLXML 」（」（ eXtensible Markup LanguageeXtensible Markup Language ））

可擴展標示語言屬於一種標籤語言，可擴展標示語言屬於一種標籤語言， XML 1.0XML 1.0 版版規格在規格在 19981998年年 22 月正式推出，月正式推出， XMLXML 的寫法十的寫法十分類似分類似 HTMLHTML ，繼承，繼承 SGMLSGML 自定標籤的優點，並自定標籤的優點，並且刪除一些且刪除一些 SGMLSGML複雜的部分，在功能上能夠補複雜的部分，在功能上能夠補足足 HTMLHTML 標籤的不足，而擁有更多的擴充性。標籤的不足，而擁有更多的擴充性。

不過不過 XMLXML 並不是用來編排內容，而是用來描述資並不是用來編排內容，而是用來描述資料，它並沒有如同料，它並沒有如同 HTMLHTML 一般的預設標籤，事實一般的預設標籤，事實上使用者需要自己定義描述資料所需的各種標籤。上使用者需要自己定義描述資料所需的各種標籤。

2-3-1 2-3-1 什麼是什麼是 XML-XML- 範例範例01: <?xml version="1.0" encoding="Big5"?>01: <?xml version="1.0" encoding="Big5"?>02: -->03: <booklist>03: <booklist>04: <book>04: <book>05: <code>F8920</code>05: <code>F8920</code>06: <title>ASP.NET06: <title>ASP.NET 網頁製作徹底研究網頁製作徹底研究 </title></title>07: <authorlist>07: <authorlist>08: <author>08: <author> 陳會安陳會安 </author></author>09: </authorlist>09: </authorlist>10: <price>650</price>10: <price>650</price>11: </book>11: </book>12: <book>12: <book>13: <code>F8934A</code>13: <code>F8934A</code>14: <title>XML14: <title>XML 網頁製作徹底研究網頁製作徹底研究 </title></title>15: <authorlist>15: <authorlist>16: <author>16: <author> 陳會安陳會安 </author></author>17: </authorlist>17: </authorlist>18: <price>650</price>18: <price>650</price>19: </book>19: </book>20: </booklist>20: </booklist>

2-3-1 2-3-1 什麼是什麼是 XML-XML- 文件架構文件架構 XMLXML 文件基本架構分為幾個部分，如下：文件基本架構分為幾個部分，如下：

•文件宣告：文件宣告：第第 11 列是列是 XMLXML 文件宣告，定義文件宣告，定義XMLXML 文件的版本和使用的子碼集（即編碼），文件的版本和使用的子碼集（即編碼），以此例為以此例為 1.01.0 版，使用中文版，使用中文 Big5Big5 字碼。字碼。

•根標籤：根標籤：第第 33 和和 2020列是列是 XMLXML 文件的根標籤文件的根標籤<booklist><booklist> 和結尾標籤和結尾標籤 </booklist></booklist> ，這是，這是樹狀結構的根元素。樹狀結構的根元素。

•子元素：子元素：在第在第 4~194~19列是根元素的子元素列是根元素的子元素bookbook ，而第，而第 5~105~10列和第列和第 13~1813~18列為列為 bookbook元素的子元素元素的子元素 codecode、、 titletitle、、 authorlistauthorlist和和priceprice 。。

2-3-1 2-3-1 什麼是什麼是 XML-XML- 圖例圖例

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 --元素元素(( 說明說明 ))

XMLXML 文件基本上是由標籤和內容組成，一共六種文件基本上是由標籤和內容組成，一共六種組成的元素可以出現在組成的元素可以出現在 XMLXML 文件。文件。元素（元素（ ElementElement ）） XMLXML 文件是由元素組成，文件是由元素組成， XMLXML 的元素和標籤並的元素和標籤並

不同，其代表的意義，如下所示：不同，其代表的意義，如下所示：• 「標籤」（「標籤」（ TagTag）：）： XMLXML 能夠自己定義標籤，一個能夠自己定義標籤，一個

標籤是標示文件的部分內容，例如：標籤標籤是標示文件的部分內容，例如：標籤<code><code>、、 <title><title>和和 <price><price> 等，標籤分為開頭等，標籤分為開頭標籤標籤 <code><code> 和結尾標籤和結尾標籤 </code></code> 。。

• 「元素」（「元素」（ ElementElement ）：）： XMLXML元素是整個文件的主元素是整個文件的主要架構，元素是標籤加上其中的文字內容，或是在元要架構，元素是標籤加上其中的文字內容，或是在元素內包含其它的元素，元素是一個完整的項目，包含素內包含其它的元素，元素是一個完整的項目，包含標籤、屬性、開始標籤和結尾標籤內的文字內容和結標籤、屬性、開始標籤和結尾標籤內的文字內容和結尾標籤。尾標籤。

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 --元素元素(( 範例範例 ))

XMLXML元素需要由開始和結尾標籤構成，其中包含文字內元素需要由開始和結尾標籤構成，其中包含文字內容，例如：容，例如： XMLXML元素元素 codecode ，內含值，內含值 F8920F8920 ，如下所示：，如下所示：<code>F8920</code><code>F8920</code>

此外此外 XMLXML元素允許包含其它的子元素，例如：在圖書元素允許包含其它的子元素，例如：在圖書bookbook元素擁有元素擁有 codecode、、 titletitle、、 authorlistauthorlist和和 priceprice子元子元素，如下所示：素，如下所示：<book><book> <code>F8920</code><code>F8920</code> <title>ASP.NET<title>ASP.NET 網頁製作徹底研究網頁製作徹底研究 </title></title> <authorlist><authorlist> <author><author> 陳會安陳會安 </author></author> </authorlist></authorlist> <price>650</price><price>650</price></book></book>

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 -- 屬性屬性

屬性（屬性（ AttributeAttribute ））在開始標籤的標籤名稱後，可以替標籤新在開始標籤的標籤名稱後，可以替標籤新增屬性名稱，每一個屬性擁有屬性名稱和增屬性名稱，每一個屬性擁有屬性名稱和值，屬性值需要使用雙引號括起，如下所值，屬性值需要使用雙引號括起，如下所示：示：<book code="F8920"><book code="F8920">

上述上述 <book><book> 標籤擁有標籤擁有 codecode 屬性，其值屬性，其值為為 F8920F8920 。。

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 -- 實體參實體參考考 (( 說明說明 ))

實體參考（實體參考（ Entity ReferenceEntity Reference ）） XMLXML 標籤語言本身擁有一些保留符號，例如：標標籤語言本身擁有一些保留符號，例如：標

籤中的籤中的 "<""<" 符號，如果文件內容需要使用這些符符號，如果文件內容需要使用這些符號時，需要使用實體參考，在號時，需要使用實體參考，在 XMLXML提供提供 55 個預先個預先保留的實體參考，如下表所示：保留的實體參考，如下表所示：實體參考符號

< <> >

& &' '" "

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 -- 實體參實體參考考 (( 範例範例 ))

每一個實體參考都是由每一個實體參考都是由 "&""&" 符號開始，符號開始，以以 ";"";" 結束，例如：結束，例如： XMLXML 文件不可以擁有文件不可以擁有下列文件內容，如下所示：下列文件內容，如下所示：<order><order>書價書價 < 650</order>< 650</order>

上述的標籤內容擁有上述的標籤內容擁有 "<""<" 符號，此時就需符號，此時就需要使用實體參考，如下所示：要使用實體參考，如下所示：<order><order>書價書價 < 650</order>< 650</order>

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 -- 註註解解

註解（註解（ CommentComment ）） XMLXML 的註解文字和的註解文字和 HTMLHTML 一樣都是一樣都是由由 """-->" 符號結尾，如符號結尾，如下所示：下所示：-->

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 --CDATACDATA與與 PCDATAPCDATA

CDATACDATA 區塊（區塊（ CDATA SectionCDATA Section ）與）與 PCDATAPCDATA 在在 XMLXML 文件的文字內容是文件的文字內容是 PCDATAPCDATA ，在處理，在處理

XMLXML元素元素 titletitle 時，標籤文字內容，如下所示：時，標籤文字內容，如下所示：<title>JSP 2.0<title>JSP 2.0 網頁製作徹底研究網頁製作徹底研究 </title></title>

XMLXML 文件在剖析文件時不用處理文件在剖析文件時不用處理 CDATACDATA 區塊的區塊的內容，內容， CDATACDATA 區塊是位在區塊是位在 "<![CDATA[""<![CDATA[" 字串字串和和 "]]>""]]>" 字串間的文字內容，如下所示：字串間的文字內容，如下所示：<script><script><![CDATA[<![CDATA[ function add(a, b) { return a+b }function add(a, b) { return a+b }]]>]]></script></script>

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 -PI-PI

PIPI（（ Processing InstructionsProcessing Instructions ）） PIPI 允許允許 XMLXML 文件包含應用程式的指令，例如：文件包含應用程式的指令，例如：在在 XMLXML 文件的開頭宣告就是一個文件的開頭宣告就是一個 PIPI ，這些資訊，這些資訊是說明如何處理這份是說明如何處理這份 XMLXML 文件，如下所示：文件，如下所示：<?xml version="1.0" encoding="Big5"?><?xml version="1.0" encoding="Big5"?>

上述上述 PIPI 如同註解並不屬於如同註解並不屬於 XMLXML 文件的內容，文件的內容， PIPI的基本格式是以的基本格式是以 "<?name""<?name" 字串開始，字串開始， "?>""?>" 字字串結束，如下所示：串結束，如下所示：<?name pi_data?><?name pi_data?>

上述上述 namename 是「是「 PIPI 目標」（目標」（ PI TargetPI Target ）名稱，）名稱，其中其中 xmlxml和和 XMLXML 是保留給是保留給 XMLXML 使用，這個名稱使用，這個名稱為為 PIPI識別字，應用程式可以依照此名稱處理所需識別字，應用程式可以依照此名稱處理所需的的 PIPI ，而不處理其它的，而不處理其它的 PIPI 。。

2-3-2 XML2-3-2 XML 文件的組成元素文件的組成元素 --DTDDTD

DTDDTD（（ Document Type DeclarationsDocument Type Declarations ）） DTDDTD是是 XMLXML 文件的驗證指令，檢查文件的驗證指令，檢查 XMLXML

文件的元素是否符合標籤的定義，這是文件的元素是否符合標籤的定義，這是SGMLSGML 預設的文件驗證方式，也被預設的文件驗證方式，也被 XMLXML 採採用，在用，在 XMLXML 文件除元素外，就是檢查文件除元素外，就是檢查 XMLXML元素的元素的 DTDDTD 指令。指令。

2-3-3 XSL2-3-3 XSL 的基礎的基礎 -- 說明說明 XMLXML 文件本身只是以標籤來定義不同的資文件本身只是以標籤來定義不同的資料，如果需要顯示料，如果需要顯示 XMLXML 元素的資料，如同元素的資料，如同一個文字檔案的資料庫，查詢資料表的記一個文字檔案的資料庫，查詢資料表的記錄建立所需的報表，我們需要一種機制來錄建立所需的報表，我們需要一種機制來描述描述 XMLXML 元素如何被顯示，這種語言稱為元素如何被顯示，這種語言稱為樣式語言，「樣式語言，「 XSLXSL 」（」（ eXtensible Style eXtensible Style LanguageLanguage ）就是配合）就是配合 XMLXML 的樣式語言。的樣式語言。

2-3-3 XSL2-3-3 XSL 的基礎的基礎 -- 功能說明功能說明 XSLXSL和和 XMLXML 文件一樣源於文件一樣源於 SGMLSGML 的的「「 DSSSLDSSSL 」（」（ Document Style Document Style Semantics and Specification Semantics and Specification LanguageLanguage ），）， XSLXSL 的功能十分強大，屬的功能十分強大，屬於一種真正的於一種真正的 ScriptScript 語言，在功能上主要語言，在功能上主要分為兩個部分，如下所示：分為兩個部分，如下所示：•轉換轉換 XMLXML文件：文件：將將 XMLXML 文件架構轉換成另一文件架構轉換成另一個個 XMLXML 架構的文件，或非架構的文件，或非 XMLXML 文件，例如：文件，例如：HTMLHTML 文件。文件。

•格式化格式化 XMLXML文件：文件：格式化元素內容的樣式，格式化元素內容的樣式，以便顯示出以便顯示出 XMLXML 文件。文件。

2-3-4 XSLT2-3-4 XSLT 是如何運作是如何運作 -- 說明說明 XSLTXSLT 內容本身也是一份內容本身也是一份 XMLXML 文件，文件， XSLTXSLT 工作工作

是將來源的是將來源的 XMLXML元素轉換成元素轉換成 XSLTXSLT元素，元素， XSLTXSLT並不是在顯示並不是在顯示 XMLXML元素內容，只是將元素內容，只是將 XMLXML元素元素轉換成其它文件的格式，所以通常並不稱它為樣轉換成其它文件的格式，所以通常並不稱它為樣式，而稱為式，而稱為 XSLT ScriptXSLT Script 語言。語言。

在作法上「在作法上「 XSLTXSLT處理器」（處理器」（ XSLT ProcessoXSLT Processorr ）是將）是將 XMLXML 文件依照文件依照 XSLT ScriptXSLT Script 的程式碼產的程式碼產生轉換結果，這種程式碼和生轉換結果，這種程式碼和 JavaScriptJavaScript或或VBScriptVBScript 不同，屬於一種「範本驅動」不同，屬於一種「範本驅動」（（ Template-drivenTemplate-driven ）的）的 ScriptScript 語言。語言。

2-3-4 XSLT2-3-4 XSLT 是如何運作是如何運作 -- 圖例說明圖例說明 XSLTXSLT 文件依元素的用途定義許多對應元素的範文件依元素的用途定義許多對應元素的範

本，當本，當 XSLTXSLT處理器在處理器在 XMLXML 文件發現符合條件的文件發現符合條件的元素，就使用範本定義的內容，可能是一些元素，就使用範本定義的內容，可能是一些HTMLHTML 標籤，加上標籤，加上 XMLXML元素取出的內容，在過濾元素取出的內容，在過濾掉掉 XMLXML 文件不需要的部分來產生轉換結果，輸出文件不需要的部分來產生轉換結果，輸出的結果文件可能是另一份完全不同架構的的結果文件可能是另一份完全不同架構的XMLXML、、 HTMLHTML或或 XHTMLXHTML 檔案，如下圖所示：檔案，如下圖所示：

2-4 2-4 建立建立 XHTMLXHTML文件文件 2-4-1 XHTML2-4-1 XHTML 文件基礎文件基礎 2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 2-4-3 XHTML2-4-3 XHTML 文件的文件的 DTDDTD 2-4-4 XHTML2-4-4 XHTML 就是良好格式的就是良好格式的 HTMLHTML

2-4-1 XHTML2-4-1 XHTML 文件基礎文件基礎「「 XHTMLXHTML 」（」（ eXtensible HyperText eXtensible HyperText

Markup LanguageMarkup Language ）規格是在）規格是在 20002000年年 11 月才月才正式通過，雖然規格比正式通過，雖然規格比 XML 1.0XML 1.0 版還晚制定，事版還晚制定，事實上它就是一份標準的實上它就是一份標準的 XMLXML 文件。文件。

XHTMLXHTML 目前最新版本為目前最新版本為 2.02.0 ，不過，不過 XHTMLXHTML仍仍然是使用然是使用 HTML 4.0HTML 4.0 版標籤，它是版標籤，它是 W3CW3C制定用制定用來取代來取代 HTML 4.0HTML 4.0 版的下一個世代版的下一個世代 HTMLHTML 。。

XHTMLXHTML 文件比文件比 HTMLHTML 文件的標籤要求更加嚴格，文件的標籤要求更加嚴格，必須遵循必須遵循 XMLXML 文件的撰寫規則，其注意事項，如文件的撰寫規則，其注意事項，如下所示：下所示：• 不可以省略結尾標籤。不可以省略結尾標籤。• 標籤和屬性都是使用小寫的英文字，例如：標籤和屬性都是使用小寫的英文字，例如： <p><p>、、 <body><body> 等。等。• 屬性值需要使用雙引號括起來。屬性值需要使用雙引號括起來。• namename 屬性使用屬性使用 idid 屬性取代。屬性取代。

2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 -- 說明說明 XHTMLXHTML 文件架構和文件架構和 HTMLHTML 文件十分相似，文件十分相似，

只是在文件開頭使用只是在文件開頭使用 XMLXML和和 DOCTYPEDOCTYPE 的的宣告，其副檔名為宣告，其副檔名為【【 .xhtml.xhtml 】】，或是和，或是和XMLXML 文件一樣使用文件一樣使用【【 .xml.xml 】】。。

編輯編輯 XHTMLXHTML 文件可以使用文件可以使用 WindowsWindows 記事記事本或本或 XMLXML 編輯工具，不過因為使用編輯工具，不過因為使用 W3CW3C網址的網址的 DTDDTD ，所以一定需要建立，所以一定需要建立 InternetInternet連線，否則無法下載連線，否則無法下載 XHTMLXHTML的的 DTDDTD 來驗來驗證文件內容。證文件內容。

2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 -- 範例範例01: <?xml version="1.0" encoding="Big5"?>01: <?xml version="1.0" encoding="Big5"?>02: <!DOCTYPE html 02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"03: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">05: <html xmlns="http://www.w3.org/1999/xhtml">05: <html xmlns="http://www.w3.org/1999/xhtml">06: <head>06: <head>07: <title>07: <title> 這是一個測試網頁這是一個測試網頁 </title></title>08: </head>08: </head>09: <body>09: <body>10: <p>10: <p> 歡迎進入我的網頁歡迎進入我的網頁 </p></p>11: </body>11: </body>12: </html>12: </html>

2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 -- 範例說範例說明明

XMLXML文件：文件：在第在第 11 列宣告此為列宣告此為 XMLXML 文件，如下所示：文件，如下所示：<?xml version="1.0" encoding="Big5"?><?xml version="1.0" encoding="Big5"?>

DOCTYPEDOCTYPE ：：第第 2~42~4列是列是 DTDDTD宣告，指出此文件為宣告，指出此文件為XHTML 1.0XHTML 1.0 版和使用的版和使用的 DTDDTD ，如下所示：，如下所示：<!DOCTYPE html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTMLHTML文件：文件：第第 5~125~12列是一個列是一個 HTMLHTML 文件，在文件，在<html><html> 標籤指定名稱空間標籤指定名稱空間 http://www.w3.org/http://www.w3.org/1999/xhtml1999/xhtml ，這是使用，這是使用 XML 1.0XML 1.0 版的寫法，如下所示：版的寫法，如下所示：<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title><head><title> 這是一個測試網頁這是一個測試網頁 </title></head></title></head> <body><p><body><p> 歡迎進入我的網頁歡迎進入我的網頁 </p></body></p></body></html></html>

2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 -- 圖例圖例 11

2-4-2 XHTML2-4-2 XHTML 文件架構文件架構 -- 圖例圖例 22

如果需要顯示成如果需要顯示成 HTMLHTML 文件內容，請刪除文件內容，請刪除第第 11 列的列的 <?xml … ><?xml … > 宣告，例如：相同宣告，例如：相同內容的內容的 Ch2_4.xhtmlCh2_4.xhtml ，如下圖所示：，如下圖所示：

2-4-3 XHTML2-4-3 XHTML 文件的文件的 DTD-DTD- 說明說明在在 XHTMLXHTML 開頭的開頭的 DOCTYPEDOCTYPE 宣告部分，宣告部分，

最後最後 11 個參數指明使用的個參數指明使用的 DTDDTD ，因為，因為XHTMLXHTML 也支援也支援 DTDDTD 驗證，目前驗證，目前 XHTMLXHTML支援支援 33 種種 HTML 4.0 DTDHTML 4.0 DTD ，那就是，那就是 StrictStrict、、TransitionalTransitional和和 FramesetFrameset 。。

2-4-3 XHTML2-4-3 XHTML 文件的文件的 DTD-Strict DTD-Strict DTDDTD

XHTMLXHTML 使用使用 HTMLHTML 標籤和標籤和 CSSCSS ，請使用，請使用Strict DTDStrict DTD ，此時的宣告如下所示：，此時的宣告如下所示：

<!DOCTYPE html <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">strict.dtd">

2-4-3 XHTML2-4-3 XHTML 文件的文件的 DTD-DTD-Transitional DTDTransitional DTD

如果是不支援如果是不支援 CSSCSS 的瀏覽程式，請使用的瀏覽程式，請使用Transitional DTDTransitional DTD ，此時的宣告如下所示：，此時的宣告如下所示：


PUBLIC "-//W3C//DTD XHTML 1.0 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">transitional.dtd">

2-4-3 XHTML2-4-3 XHTML 文件的文件的 DTD-DTD-Frameset DTDFrameset DTD

如果如果 XHTMLXHTML 使用框架頁，請使用使用框架頁，請使用Frameset DTDFrameset DTD ，此時的宣告如下所示：，此時的宣告如下所示：


PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">frameset.dtd">

2-4-4 XHTML2-4-4 XHTML 就是良好格式的就是良好格式的HTML-1HTML-1

標籤和屬性名稱都需要小寫標籤和屬性名稱都需要小寫 XHTMLXHTML 文件的標籤和屬性都需要小寫的英文字，文件的標籤和屬性都需要小寫的英文字，

例如：例如： XHTMLXHTML 就一定需要小寫的標籤，如下所就一定需要小寫的標籤，如下所示：示：<head><head>

<title><title> 這是一個測試網頁這是一個測試網頁 </title></title>

</head></head>

<body><body>

<p><p> 歡迎進入我的網頁歡迎進入我的網頁 </p></p>

</body></body>


XHTMLXHTML 文件需要根元素文件需要根元素 XHTMLXHTML 文件一定需要文件一定需要 <html><html> 標籤作為文件的標籤作為文件的根元素，例如：根元素，例如： XHTMLXHTML 就一定需要是完整的就一定需要是完整的HTMLHTML 文件，如下所示：文件，如下所示：<html><html> <head><title><head><title> 這是一個測試網頁這是一個測試網頁 </title> </title>

</head></head> <body><p><body><p> 歡迎進入我的網頁歡迎進入我的網頁 </p></body></p></body></html></html>

在在 HTMLHTML 就算沒有就算沒有 <html><html> 標籤也一樣可以在瀏標籤也一樣可以在瀏覽程式正確顯示，但是覽程式正確顯示，但是 XHTMLXHTML 不可以，一定需不可以，一定需要一個要一個 <html><html>根元素。根元素。


標籤需要結尾標籤標籤需要結尾標籤 XHTMLXHTML 一定需要擁有「結尾標籤」（一定需要擁有「結尾標籤」（ End-TaEnd-Tagg ），如下所示：），如下所示：<p><p> 這是一個測試這是一個測試 </p></p>

上述開頭的上述開頭的 <p><p> 標籤，一定需要撰寫標籤，一定需要撰寫 </p></p> ，，因為因為 XHTMLXHTML 標籤一定是成雙成對的，如果標籤標籤一定是成雙成對的，如果標籤是葉節點，例如：是葉節點，例如： <br><br>、、 <hr><hr>、、 <input><input>和和 <img><img> ，這種標籤需要使用，這種標籤需要使用 "/"/＞＞ ""符號替代符號替代結尾標籤，其寫法如下所示：結尾標籤，其寫法如下所示：<img src="sample.jpg" width="20" <img src="sample.jpg" width="20"

height="30" />height="30" /> 上述標籤使用上述標籤使用 "<""<"和和 "/>""/>" 符號標示一個良好格符號標示一個良好格

式的標籤。式的標籤。


巢狀標籤不能重疊巢狀標籤不能重疊 XHTMLXHTML 的標籤不能重疊，例如：的標籤不能重疊，例如： HTMLHTML

可以使用下面的程式碼，如下所示：可以使用下面的程式碼，如下所示：<B><B>陳會安陳會安 <I><I>您好您好 </B></B>嗎嗎 </I></I>

上述上述 <B><B>和和 <I><I> 標籤是重疊的，在瀏覽標籤是重疊的，在瀏覽程式只會顯示不正確的結果，但是程式只會顯示不正確的結果，但是 XHTMLXHTML的標籤不允許重疊，如下所示：的標籤不允許重疊，如下所示：<b><b>陳會安陳會安 <i><i>您好您好 </i></i>嗎嗎 </b></b>


屬性值需要使用雙引號屬性值需要使用雙引號標籤的屬性值需要使用雙引號，如下所示：標籤的屬性值需要使用雙引號，如下所示：

<img src="sample.jpg" width="20" <img src="sample.jpg" width="20" height="30" />height="30" />

屬性一定需要擁有屬性值屬性一定需要擁有屬性值在在 HTMLHTML 文件的標籤，有些屬性並不需要設定屬文件的標籤，有些屬性並不需要設定屬

性值，只需加上屬性名稱即可，但是在性值，只需加上屬性名稱即可，但是在 XHTMLXHTML就一定需要指明屬性名稱，例如：就一定需要指明屬性名稱，例如： XHTMLXHTML 的寫的寫法，如下所示：法，如下所示：<option selected="selected"><option selected="selected"><input type="radio" checked="checked"><input type="radio" checked="checked">


ScriptScript 程式碼需要使用程式碼需要使用 CDATACDATA 在在 XHTMLXHTML的的 ScriptScript 程式碼中，因程式碼中，因為為 "<""<"和和 "&""&" 可能被視為標籤的一部分，為了避可能被視為標籤的一部分，為了避免免 ScriptScript 程式碼或其它元素中有此符號，此時需程式碼或其它元素中有此符號，此時需要在要在 ScriptScript 程式碼使用程式碼使用 CDATACDATA ，如下所示：，如下所示：<script><script>

<![CDATA[<![CDATA[

…… ……....

…… ……....

]]>]]>

</script></script>

第 2 章 HTML、XML和XHTML實務

Documents

Transcript of 第 2 章 HTML、XML和XHTML實務