Transcript HTML網頁基礎語言
第2章 HTML、XML和XHTML實務 2-1 2-2 2-3 2-4 HTML的基礎 HTML標籤 XML與XSLT的基礎 建立XHTML文件 2-1 HTML的基礎 2-1-1 第一份HTML文件 2-1-2 HTML文件的基本架構 2-1-3 Meta標籤的使用 2-1-1 第一份HTML文件-說明1 「HTML」（HyperText Markup Language）標記語言屬於一種文件編排語 言，其目的是編排文件的內容，以便顯示 漂亮的文件內容，HTML使用SGML語法， 「SGML」（Standard Generalized Markup Language）屬於一種功能強大的 文件標示、管理和編排語言，早在1980年 就已經公佈語言的草稿，在1986年成為 ISO標準的文件描述語言。 2-1-1 第一份HTML文件-說明2 Tim Berners-Lee在1991年建立HTML，在 1993年HTML1.0版由Berners-Lee和Connolly 完成，經過3.2版到目前的最新版HTML 4.0x版， HTML是一種文件的格式編排語言，並不像SGML 允許定義如何標示文件的標籤，HTML只是使用 SGML的慣用語法，也就是標籤和屬性，如下所 示： • 「標籤」（Tag）：HTML標籤是一個字串符號，主要 是標示需要套用編排格式的文字內容，在標籤內的文 字是使用預設格式編排。 • 「屬性」（Attribute）：每一個標籤可以擁有一些 屬性來定義文字內容的細部編排。 2-1-1 第一份HTML文件-範例 01: 02: 03: 04: 05: 06: 07: 08: 09: 10: 11: <html> <head> <title>Ch2_1_1.htm</title> </head> <body> <b>From: </b>[email protected]<br> <b>To: </b>[email protected]<br> <b>Subject: </b>測試郵件功能<br> <p>這是第一封郵件</p> </body> </html> 2-1-1 第一份HTML文件-圖例 2-1-2 HTML文件的基本架構-架 構 HTML文件是一份文字檔案，內含網頁顯示的內容和標示 編排的標籤指令。現在就讓我們來看看HTML文件標籤的 基本架構，如下所示： <html> 標示著一份HTML網頁 <head> HTML網頁的基本定義 </head> <body> HTML網頁的內容 </body> </html> 文件架構的HTML文件是包含於<html>和</html>標籤 間的內容和定義，其中<head>和</head>標籤包圍的 區塊定義HTML網頁的本身，例如：標題文字，實際的網 頁內容則是定義在<body>和</body>標籤間，這才是 網頁真正的內容。 2-1-2 HTML文件的基本架構-注意事 項 HTML標籤使用小於"<"和大於">"符號夾著指令，稱為標 籤，每一個標籤都是成雙成對，例如：HTML文件是以 <html>開頭，和</html>結尾，在上面的HTML架構可 以看出標籤成雙配對的特性。 HTML標籤並不分英文大小寫，例如：<head>、 <HEAD>和<Head>都代表相同的標籤。 HTML文件內容是一般文字檔案，不過Enter鍵的換行在 網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果 文件內容需要強迫換行，請使用<br>標籤。 HTML文件的連續空白在瀏覽程式顯示時，會自動簡化成 一個空白。 HTML的註解文字是使用"<!--"字串開始和"-->"為結尾 所包括的文字內容，瀏覽程式在顯示時會忽略註解文字。 2-1-3 Meta標籤的使用-說明與設 定編輯工具 <meta>標籤是位在<head>區塊，可以用來定 義HTML標籤所沒有定義的相關資訊，常用的應 用如下所示： 設定使用的編輯工具 在<meta>標籤設定HTML文件使用的編輯工具， 此時的名稱name屬性為GENERATOR， content屬性為Microsoft NotePad，如下所示： <meta name="GENERATOR" content="Microsoft NotePad"> 2-1-3 Meta標籤的使用-設定網頁使 用的語系 設定網頁使用的語系 對於網頁來說，因為各國文字的內碼不同， 為了讓瀏覽程式能夠顯示正確的網頁內容， 在<meta>標籤可以設定使用的語系，使 用http-equiv屬性傳送HTTP通訊協定的標 頭，以繁體中文來說是big5，如下所示： <meta http-equiv="Content-Type" content="text/html; charset=big5"> 2-1-3 Meta標籤的使用-自動更新網 頁內容系 自動更新網頁內容 http-equiv屬性另一個重要的功能是設定一段時 間後，自動轉址到指定的URL網址，如下所示： <meta http-equiv="refresh" content="5;URL=showchatmsgs.jsp"> 標籤使用refresh屬性值，在content屬性指定等 待的秒數和網址，使用分號分隔，數字5表示5秒， 如果需要馬上的轉向其值是0，url是指定的網址。 <mata>標籤的目的是在等待5秒鐘後，自動轉 址到showchatmsgs.jsp的JSP程式。 2-2 HTML標籤 2-2-1 2-2-2 2-2-3 2-2-4 2-2-5 2-2-6 2-2-7 HTML的標頭標籤 文字格式標籤 清單項目標籤 圖片和超連結標籤 網頁表格標籤 網頁表單標籤 框架頁標籤 2-2-1 HTML的標頭標籤 在HTML的<head>區塊屬於標頭標籤，我 們可以使用下表的標籤來記錄一些網頁資 訊，如下表所示： 標籤 <title>…</title> <base> <meta> <link> 說明 網頁標題，顯示在瀏覽程式的標題列 指定基底的 URL 網址 設定伺服端或客戶端所需的識別資訊 連結其它網頁，例如：CSS 外部樣式表檔案 2-2-2 文字格式標籤-說明1 HTML網頁內容主要是文字內容，編排文字 內容的各種格式效果標籤，如下表所示： 標籤 <hn>…</hn> <b>…</b> <i>…</i> <u>…</u> <s>…</s> <strike>…</strike> <sub>…</sub> <sup>…</sup> 說明 顯示粗體的標題文字，n 的值是 1~6，表示不同 的尺寸，愈小愈大 粗體字 斜體字 底線字 刪除線，在文字中間有一條線 刪除線，另一種刪除線 下標字 上標字 2-2-2 文字格式標籤-說明2 標籤 <tt>…</tt> <big>…</big> <address>…</address> <small>…</small> <center>…</center> <blink>…</blink> <font>…</font> <basefont> <br> <hr> <p>…</p> 說明 打字機字體 放大字體的字型 使用地址的字體 縮小字體的字型 文字內容是置中對齊 閃爍字 使用 face、size 和 color 屬性設定編排使用的字 體、尺寸和色彩 指定網頁的基本字型 強迫文字換行 插入一條水平線 使用文字段落編排 2-2-2 文字格式標籤-範例 在HTML文字格式標籤是用來設定不同文件 內容的格式編排，位在標籤中的文字內容 是需要編排效果的文字內容，如下所示： <b>JSP 2.0網頁製作徹底研究</b> <i>JSP 2.0網頁製作徹底研究</i> <u>JSP 2.0網頁製作徹底研究<u> 上述文字內容分別使用粗體、斜體和底線 文字效果。 2-2-3 清單項目標籤-說明 HTML標籤提供多種清單編排，這是使用條 列方式編排的文字內容，如下表所示： 標籤 <ul>…</ul> <ol>…</ol> <dl>…</dl> <menu>…</menu> <dir>…</dir> <lh> <li> <dt> <dd> 說明 項目符號 項目編號 定義式清單 選單式清單 目錄式清單 清單標題 清單項目 定義式的項目名稱 定義式的項目說明 2-2-3 清單項目標籤-範例 在清單項目標籤中最常使用的是<ol>和 <ul>標籤，其中各項目是使用<li>標籤， 如下所示： <ol> <li>Java Applet <li>JavaScript <li>VBScript <li>DHTML </ol> 2-2-4 圖片和超連結標籤-說明 在網頁插入圖片和使用超連結建立多媒體 網頁內容的相關標籤，如下表所示： 標籤 <a>…</a> <img> <bgsound> <embed> <marquee>…</marquee> 說明 在網頁插入超連結 在網頁插入圖片 在網頁插入背景音樂 在網頁插入 MIDI 音樂檔 跑馬燈文字 2-2-4 圖片和超連結標籤-超連結語 法 在HTML文件插入超連結是使用<a>標籤， 其基本語法如下所示： <a href="protocol://domain/file#bookmark " target="frame_name"> … </a> 上述標籤的屬性說明，如下表所示： 屬性 href target 說明 設定超連結的目的地 指定超連結目的地顯示的框架名稱 2-2-4 圖片和超連結標籤-圖片語法 在網頁插入圖片是使用<img>標籤，其基 本語法如下所示： <img src="filename" width=value height=value align=left | right> 上述標籤的屬性說明，如下表所示： 屬性 src width height align 說明 圖片檔案名稱和路徑，可以使用 gif、jpg 或 png 格式的圖片檔案 圖片寬度，可以是點數或百分比。 圖片高度，可以是點數或百分比。 圖片和文字在同一列顯示的編排位置，left 是在文字的左方，right 是在文字的右方 2-2-5 網頁表格標籤-說明 網頁表格標籤是由一組標籤所組成，以便 在網頁建立表格的編排，如下表所示： 標籤 <table>…</table> <tr>…</tr> <td>…</td> <caption>…</caption> 說明 網頁表格 表格中的一列 表格中的一個儲存格 表格標題 2-2-5 網頁表格標籤-語法 網頁表格的每一列是使用<tr>和<td>標籤組合出來，一 組<tr></tr>標籤是表格的一列，每一列中使用一組 <td></td>標籤建立一個儲存格，其基本語法如下所示： <table border=value> <tr> <td>........</td> ……. </tr> <tr> <td>.........</td> …….. </tr> …… …… </table> 2-2-6 網頁表單標籤-說明 網頁表單是Web應用程式的使用介面，其 相關標籤如下表所示： 標籤 <form>…</form> <input type=…> <select>…</select> <option>…</option> <textarea>…</textarea> 說明 建立表單 表單輸入或選擇資料的表單欄位，包含按鈕、 文字方塊、選擇鈕和核取方塊欄位，不同 type 屬性表示不同的欄位 清單方塊或下拉式清單方塊 清單方塊的選項 文字區域 2-2-6 網頁表單標籤-架構 網頁表單是上述HTML標籤的組合，基本表單的架構如下 所示： <form name="name" method="post | get" action="URL" enctype="MIME"> <input type=…> <textarea> …. </textarea> <select> <option> …. </option> </select> <input type="SUBMIT" …> </form> 上述<form>標籤是一份表單，擁有欄位標籤<input>、 <textarea>和<select>，<select>標籤擁有 <option>標籤的選項，一頁<form>標籤的表單需要一 個<input>標籤的按鈕欄位，如下所示： <input type="SUBMIT" name="Name" value="Caption"> 2-2-7 框架頁標籤-說明 框架頁是一種瀏覽程式視窗的分割方法， 其標籤如下表所示： 標籤 說明 <frameset>…</frameset> 設定網頁是一頁框架頁 <frame> 框架頁的框架分割，可分為上下或左右分割 <iframe> 網頁的內置框架，可以直接在網頁插入所需的 框架 <noframes>…</noframes> 不支援框架的瀏覽程式顯示的網頁內容 2-2-7 框架頁標籤-語法 在瀏覽程式建立視窗左右分割的框架，如果 HTML文件為框架頁，原來的<body>區塊將以 <frameset>標籤取代，其基本語法如下所示： <frameset cols="value,value,"> <frame> <frame> </frameset> 屬性 cols 說明 定義左右分割框架的大小，使用","符號分隔的每一個值為各區 域的大小，可以使用百分比或點數，屬性的每一個值對應一個 <frame>標籤 <frame> 定義框架內容，主要是是顯示的 HTML 文件 2-3 XML與XSLT的基礎 2-3-1 2-3-2 2-3-3 2-3-4 什麼是XML XML文件的組成元素 XSL的基礎 XSLT是如何運作 2-3-1 什麼是XML-說明 「XML」（eXtensible Markup Language）可 擴展標示語言屬於一種標籤語言，XML 1.0版規 格在1998年2月正式推出，XML的寫法十分類似 HTML，繼承SGML自定標籤的優點，並且刪除一 些SGML複雜的部分，在功能上能夠補足HTML標 籤的不足，而擁有更多的擴充性。 不過XML並不是用來編排內容，而是用來描述資 料，它並沒有如同HTML一般的預設標籤，事實 上使用者需要自己定義描述資料所需的各種標籤。 2-3-1 什麼是XML-範例 01: 02: 03: 04: 05: 06: 07: 08: 09: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: <?xml version="1.0" encoding="Big5"?> <!--網頁製作徹底研究系列--> <booklist> <book> <code>F8920</code> <title>ASP.NET網頁製作徹底研究</title> <authorlist> <author>陳會安</author> </authorlist> <price>650</price> </book> <book> <code>F8934A</code> <title>XML網頁製作徹底研究</title> <authorlist> <author>陳會安</author> </authorlist> <price>650</price> </book> </booklist> 2-3-1 什麼是XML-文件架構 XML文件基本架構分為幾個部分，如下： • 文件宣告：第1列是XML文件宣告，定義XML 文件的版本和使用的子碼集（即編碼），以此 例為1.0版，使用中文Big5字碼。 • 根標籤：第3和20列是XML文件的根標籤 <booklist>和結尾標籤</booklist>，這是樹 狀結構的根元素。 • 子元素：在第4~19列是根元素的子元素book， 而第5~10列和第13~18列為book元素的子元 素code、title、authorlist和price。 2-3-1 什麼是XML-圖例 2-3-2 XML文件的組成元素-元素(說 明) XML文件基本上是由標籤和內容組成，一共六種 組成的元素可以出現在XML文件。 元素（Element） XML文件是由元素組成，XML的元素和標籤並不 同，其代表的意義，如下所示： • 「標籤」（Tag）：XML能夠自己定義標籤，一個標 籤是標示文件的部分內容，例如：標籤<code>、 <title>和<price>等，標籤分為開頭標籤<code>和 結尾標籤</code>。 • 「元素」（Element）：XML元素是整個文件的主要 架構，元素是標籤加上其中的文字內容，或是在元素 內包含其它的元素，元素是一個完整的項目，包含標 籤、屬性、開始標籤和結尾標籤內的文字內容和結尾 標籤。 2-3-2 XML文件的組成元素-元素(範 例) XML元素需要由開始和結尾標籤構成，其中包含文字內容， 例如：XML元素code，內含值F8920，如下所示： <code>F8920</code> 此外XML元素允許包含其它的子元素，例如：在圖書 book元素擁有code、title、authorlist和price子元素， 如下所示： <book> <code>F8920</code> <title>ASP.NET網頁製作徹底研究</title> <authorlist> <author>陳會安</author> </authorlist> <price>650</price> </book> 2-3-2 XML文件的組成元素-屬性 屬性（Attribute） 在開始標籤的標籤名稱後，可以替標籤新 增屬性名稱，每一個屬性擁有屬性名稱和 值，屬性值需要使用雙引號括起，如下所 示： <book code="F8920"> 上述<book>標籤擁有code屬性，其值為 F8920。 2-3-2 XML文件的組成元素-實體參 考(說明) 實體參考（Entity Reference） XML標籤語言本身擁有一些保留符號，例如：標 籤中的"<"符號，如果文件內容需要使用這些符 號時，需要使用實體參考，在XML提供5個預先 保留的實體參考，如下表所示： 實體參考 < > & ' " 符號 < > & ' " 2-3-2 XML文件的組成元素-實體參 考(範例) 每一個實體參考都是由"&"符號開始，以 ";"結束，例如：XML文件不可以擁有下列 文件內容，如下所示： <order>書價 < 650</order> 上述的標籤內容擁有"<"符號，此時就需要 使用實體參考，如下所示： <order>書價 < 650</order> 2-3-2 XML文件的組成元素-註解 註解（Comment） XML的註解文字和HTML一樣都是由"<!--" 符號開始和"-->"符號結尾，如下所示： <!--網頁製作徹底研究系列--> 2-3-2 XML文件的組成元素-CDATA 與PCDATA CDATA區塊（CDATA Section）與PCDATA 在XML文件的文字內容是PCDATA，在處理XML 元素title時，標籤文字內容，如下所示： <title>JSP 2.0網頁製作徹底研究</title> XML文件在剖析文件時不用處理CDATA區塊的內 容，CDATA區塊是位在"<![CDATA["字串和 "]]>"字串間的文字內容，如下所示： <script> <![CDATA[ function add(a, b) { return a+b } ]]> </script> 2-3-2 XML文件的組成元素-PI PI（Processing Instructions） PI允許XML文件包含應用程式的指令，例如：在 XML文件的開頭宣告就是一個PI，這些資訊是說 明如何處理這份XML文件，如下所示： <?xml version="1.0" encoding="Big5"?> 上述PI如同註解並不屬於XML文件的內容，PI的 基本格式是以"<?name"字串開始，"?>"字串結 束，如下所示： <?name pi_data?> 上述name是「PI目標」（PI Target）名稱，其 中xml和XML是保留給XML使用，這個名稱為PI 識別字，應用程式可以依照此名稱處理所需的PI， 而不處理其它的PI。 2-3-2 XML文件的組成元素-DTD DTD（Document Type Declarations） DTD是XML文件的驗證指令，檢查XML文 件的元素是否符合標籤的定義，這是SGML 預設的文件驗證方式，也被XML採用，在 XML文件除元素外，就是檢查XML元素的 DTD指令。 2-3-3 XSL的基礎-說明 XML文件本身只是以標籤來定義不同的資 料，如果需要顯示XML元素的資料，如同 一個文字檔案的資料庫，查詢資料表的記 錄建立所需的報表，我們需要一種機制來 描述XML元素如何被顯示，這種語言稱為 樣式語言，「XSL」（eXtensible Style Language）就是配合XML的樣式語言。 2-3-3 XSL的基礎-功能說明 XSL和XML文件一樣源於SGML的 「DSSSL」（Document Style Semantics and Specification Language），XSL的功能十分強大，屬於 一種真正的Script語言，在功能上主要分為 兩個部分，如下所示： • 轉換XML文件：將XML文件架構轉換成另一個 XML架構的文件，或非XML文件，例如： HTML文件。 • 格式化XML文件：格式化元素內容的樣式，以 便顯示出XML文件。 2-3-4 XSLT是如何運作-說明 XSLT內容本身也是一份XML文件，XSLT工作是 將來源的XML元素轉換成XSLT元素，XSLT並不 是在顯示XML元素內容，只是將XML元素轉換成 其它文件的格式，所以通常並不稱它為樣式，而 稱為XSLT Script語言。 在作法上「XSLT處理器」（XSLT Processor） 是將XML文件依照XSLT Script的程式碼產生轉 換結果，這種程式碼和JavaScript或VBScript不 同，屬於一種「範本驅動」（Template-driven） 的Script語言。 2-3-4 XSLT是如何運作-圖例說明 XSLT文件依元素的用途定義許多對應元素的範本， 當XSLT處理器在XML文件發現符合條件的元素， 就使用範本定義的內容，可能是一些HTML標籤， 加上XML元素取出的內容，在過濾掉XML文件不 需要的部分來產生轉換結果，輸出的結果文件可 能是另一份完全不同架構的XML、HTML或 XHTML檔案，如下圖所示： 2-4 建立XHTML文件 2-4-1 2-4-2 2-4-3 2-4-4 XHTML文件基礎 XHTML文件架構 XHTML文件的DTD XHTML就是良好格式的HTML 2-4-1 XHTML文件基礎 「XHTML」（eXtensible HyperText Markup Language）規格是在2000年1月才正式通過， 雖然規格比XML 1.0版還晚制定，事實上它就是 一份標準的XML文件。 XHTML目前最新版本為2.0，不過XHTML仍然是 使用HTML 4.0版標籤，它是W3C制定用來取代 HTML 4.0版的下一個世代HTML。 XHTML文件比HTML文件的標籤要求更加嚴格， 必須遵循XML文件的撰寫規則，其注意事項，如 下所示： • • • • 不可以省略結尾標籤。 標籤和屬性都是使用小寫的英文字，例如：<p>、<body>等。 屬性值需要使用雙引號括起來。 name屬性使用id屬性取代。 2-4-2 XHTML文件架構-說明 XHTML文件架構和HTML文件十分相似， 只是在文件開頭使用XML和DOCTYPE的宣 告，其副檔名為【.xhtml】，或是和XML 文件一樣使用【.xml】。 編輯XHTML文件可以使用Windows記事本 或XML編輯工具，不過因為使用W3C網址 的DTD，所以一定需要建立Internet連線， 否則無法下載XHTML的DTD來驗證文件內 容。 2-4-2 XHTML文件架構-範例 01: <?xml version="1.0" encoding="Big5"?> 02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> 05: <html xmlns="http://www.w3.org/1999/xhtml"> 06: <head> 07: <title>這是一個測試網頁</title> 08: </head> 09: <body> 10: <p>歡迎進入我的網頁</p> 11: </body> 12: </html> 2-4-2 XHTML文件架構-範例說明 XML文件：在第1列宣告此為XML文件，如下所示： <?xml version="1.0" encoding="Big5"?> DOCTYPE：第2~4列是DTD宣告，指出此文件為 XHTML 1.0版和使用的DTD，如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> HTML文件：第5~12列是一個HTML文件，在<html> 標籤指定名稱空間http://www.w3.org/1999/xhtml， 這是使用XML 1.0版的寫法，如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>這是一個測試網頁</title></head> <body><p>歡迎進入我的網頁</p></body> </html> 2-4-2 XHTML文件架構-圖例1 2-4-2 XHTML文件架構-圖例2 如果需要顯示成HTML文件內容，請刪除第 1列的<?xml … >宣告，例如：相同內容 的Ch2_4.xhtml，如下圖所示： 2-4-3 XHTML文件的DTD-說明 在XHTML開頭的DOCTYPE宣告部分，最 後1個參數指明使用的DTD，因為XHTML 也支援DTD驗證，目前XHTML支援3種 HTML 4.0 DTD，那就是Strict、 Transitional和Frameset。 2-4-3 XHTML文件的DTD-Strict DTD XHTML使用HTML標籤和CSS，請使用 Strict DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> 2-4-3 XHTML文件的DTDTransitional DTD 如果是不支援CSS的瀏覽程式，請使用 Transitional DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 2-4-3 XHTML文件的DTD-Frameset DTD 如果XHTML使用框架頁，請使用 Frameset DTD，此時的宣告如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> 2-4-4 XHTML就是良好格式的 HTML-1 標籤和屬性名稱都需要小寫 XHTML文件的標籤和屬性都需要小寫的英文字， 例如：XHTML就一定需要小寫的標籤，如下所示： <head> <title>這是一個測試網頁</title> </head> <body> <p>歡迎進入我的網頁</p> </body> 2-4-4 XHTML就是良好格式的 HTML-2 XHTML文件需要根元素 XHTML文件一定需要<html>標籤作為文件的根 元素，例如：XHTML就一定需要是完整的HTML 文件，如下所示： <html> <head><title>這是一個測試網頁</title> </head> <body><p>歡迎進入我的網頁</p></body> </html> 在HTML就算沒有<html>標籤也一樣可以在瀏 覽程式正確顯示，但是XHTML不可以，一定需要 一個<html>根元素。 2-4-4 XHTML就是良好格式的 HTML-3 標籤需要結尾標籤 XHTML一定需要擁有「結尾標籤」（End-Tag）， 如下所示： <p>這是一個測試</p> 上述開頭的<p>標籤，一定需要撰寫</p>，因 為XHTML標籤一定是成雙成對的，如果標籤是葉 節點，例如：<br>、<hr>、<input>和 <img>，這種標籤需要使用"/＞"符號替代結尾 標籤，其寫法如下所示： <img src="sample.jpg" width="20" height="30" /> 上述標籤使用"<"和"/>"符號標示一個良好格式 的標籤。 2-4-4 XHTML就是良好格式的 HTML-4 巢狀標籤不能重疊 XHTML的標籤不能重疊，例如：HTML可 以使用下面的程式碼，如下所示： <B>陳會安<I>您好</B>嗎</I> 上述<B>和<I>標籤是重疊的，在瀏覽程 式只會顯示不正確的結果，但是XHTML的 標籤不允許重疊，如下所示： <b>陳會安<i>您好</i>嗎</b> 2-4-4 XHTML就是良好格式的 HTML-5 屬性值需要使用雙引號 標籤的屬性值需要使用雙引號，如下所示： <img src="sample.jpg" width="20" height="30" /> 屬性一定需要擁有屬性值 在HTML文件的標籤，有些屬性並不需要設定屬 性值，只需加上屬性名稱即可，但是在XHTML就 一定需要指明屬性名稱，例如：XHTML的寫法， 如下所示： <option selected="selected"> <input type="radio" checked="checked"> 2-4-4 XHTML就是良好格式的 HTML-6 Script程式碼需要使用CDATA 在XHTML的Script程式碼中，因為"<"和"&"可 能被視為標籤的一部分，為了避免Script程式碼 或其它元素中有此符號，此時需要在Script程式 碼使用CDATA，如下所示： <script> <![CDATA[ …….. …….. ]]> </script>