XHTML (Extensible HyperText Markup Language)
XHTML 教學

作者：Linux0911
發表日期：2007-08-07
最後修正：2007-08-07
文章回顧：CSS (Cascading Style Sheet) 教學
轉載請註明來源：http://linux0911.no-ip.info/my_style/doc/xhtml/ 


常常聽別人問，你會不會 HTML，CSS，網頁設計等，是否聽得一頭霧水快昏倒了 ?_?

HTML 是甚麼?

XHTML 又是甚麼? 可以吃嗎??

XHTML, HTML 傻傻分不清?_?

來檢測一下你的網頁是否符合 XHTML (網頁品質保證)
http://validator.w3.org/

HTML 怎麼寫?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標準 HTML 4.01 格式.html</title>
<meta name="keywords" content="關鍵字放置處">
<meta name="description" content="描述簡介放置處">
<meta name="Author" content="Linux0911">
<meta http-equiv="MSThemeCompatible" content="Yes">
<meta name="MSSmartTagsPreventParsing" content="TRUE">

<style type="text/css">
CSS 內容
</style> 

<script type="text/javascript">
<!--
javascript 內容
//-->
</script>

</head>

<body>

</body>

</html>



XHTML 怎麼寫?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標準 XHTML 1.0 格式.html</title>
<meta name="keywords" content="關鍵字放置處" />
<meta name="description" content="描述簡介放置處" />
<meta name="Author" content="Linux0911" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<link type="text/css" rel="stylesheet" href="CSS 放置處.css" />
<script type="text/javascript" src="JavaScript 放置處.js"></script>
</head>

<body>

</body>

</html>


看出哪裡不一樣了嗎??


其實很簡單，我們現在不看 HTML 怎麼寫，因為不是重點

重點是放在如何在你的網頁維護上做最速的修改

XHTML 是現今的趨勢，學 HTML 是基本功

而 XHTML 才是最快速，相容於各大瀏覽器，語法效果看起來都會相同
(Internet Explorer IE, Firefox, Opera... 等)

那 HTML 到底是甚麼東東?

HTML (HyperText Markup Language)
超文字標記語言?

好怪的翻譯，連作者都不知道在講蝦米= =



XHTML (Extensible HyperText Markup Language)
可延伸的超文字標記語言

更怪的翻譯

相信很多人聽到都快發瘋了



其實最不一樣的地方簡單來講

就是其格式的標準化 (standardize)

為什麼要標準化

筆者猜測

因為學網頁的人太多，加上軟體界的瀏覽器牌子也很多

沒有一套標準應該是會世界大亂

只有單一瀏覽器可以看到這個效果

其他的瀏覽器則沒辦法看到

那你做得再美的網頁還是沒辦法給人欣賞!


集中精神看完!!


在我們上面兩個 HTML, XHTML 寫法的不同

我來做最簡單的說明以及寫 XHTML 應注意的事項


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標準 HTML 4.01 格式.html</title>
<meta name="keywords" content="關鍵字放置處">
<meta name="description" content="描述簡介放置處">
<meta name="Author" content="Linux0911">
<meta http-equiv="MSThemeCompatible" content="Yes">
<meta name="MSSmartTagsPreventParsing" content="TRUE">

<style type="text/css">
CSS 內容
</style> 

<script type="text/javascript">
<!--
javascript 內容
//-->
</script>

</head>

<body>

</body>

</html>



基本上它的寫法很直接，直接的寫在 HTML 檔案上面

CSS 跟 Javascript 都是直接寫在模板上面

常常會有 <font> <b> <i> <u> 等標籤都直接寫在上面

你會想這很正常，用 Frontpage or Dreamweaver 設計介面

選取要的文字，按按上方的鈕，為自己的網頁上色!

那你有沒有想過，當你的網頁數量到達 10 頁以上甚至 20 頁呢？

你還要每頁都在上色嗎？

如果時間很多的話沒關係

可是也沒必要浪費在這個上面

如果現在有一個系統很規格化的

可以直接在上面做修改

而不用每一頁都去上色

那是不是很心動呢？

這就是我們接下來的主題


XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標準 XHTML 1.0 格式.html</title>
<meta name="keywords" content="關鍵字放置處" />
<meta name="description" content="描述簡介放置處" />
<meta name="Author" content="Linux0911" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<link type="text/css" rel="stylesheet" href="CSS 放置處.css" />
<script type="text/javascript" src="JavaScript 放置處.js"></script>
</head>

<body>

</body>

</html>

我們可以最先觀察到不一樣的地方

就是每個獨立標籤都必須加上 /> 結尾，意思是關閉標籤的意思，這標籤到這裡為止

以前在 HTML，可以你會用 <img> <font size> 等標籤

在 XHTML 裡

我們必須在 <img> 標籤裡加上 alt="" 和 /

變成

<img src="" alt="" />
這才是我們要的標準化格式

那你會問字體格式怎格式化

很簡單，不用太擔心


如果你是新來的


可以先寫在模板上面

在 HTML 用的

<font color="#000000">內容</font>

在 XHTML 裡必須改為

<span style="color: #000000">內容</span>
要記住

屬性名稱必須是小寫英文字母。 

<span> ok
<SPAN> X

<div> ok
<DIV> X

<table> ok
<TABLE> X

屬性的值前後皆必須加上引號（""）

<span style="">
<span class="">
<div style="">
<div class="">



屬性寫法的縮減是不被允許的。

在 HTML 中是可以的
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize> 

在 XHTML 中應改為：
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

XHTML 使用 id 來取代原有 HTML 中的 name 屬性。 

下例在 HTML 中是被允許的。

<span name="">
<a name="">

XHTML 中應修正為：

<span id="">
<a id="">


<font> <b> <i> <u> <iframe> 等標籤都不能再使用了

看到 XHTML 就別再用以往 HTML 的觀念來思考這篇文章!

別再想 font 來 font 去的

必須使用 <table> <tr> <td> <tbody> <div> <span> <fieldset> <legend> 等標籤來帶著他跑

然後加上格式 style="格式"

變成

<table style="">

<tr style="">

<td style="">

<tbody style="">

<div style="">

<span style="">

<fieldset style="">

<legend style="">

如果你瞭解 CSS 的呼叫，可改用 class="格式"

變成

<table class="">

<tr class="">

<td class="">

<tbody class="">

<div class="">

<span class="">

<fieldset class="">

<legend class="">



還有在 XHTML 裡面

<table> 的用法

是最好包在 <div> 標籤裡面

因為這樣才符合 XHTML Strict 的寫法

比較不會出錯

換行的 <br> 變為 <br />

等小地方都要注意到


但最必須注意的地方就是

標籤都必須由內到外寫 (阿! 甚麼意思)

才不會出錯


簡單講就是標籤要排列的整齊，一個對一個

別這個標籤還沒結束就跨到另一個標籤

例如

<div>
	<span>
	</span>
</div>

這樣 XHTML 是 OK 的

但如果這樣寫

<div>
	<span>
</div>
	</span>

一定被打 0 分


這樣雖然可能在 HTML 是可以正常顯示的

但在 XHTML 是不允許的地方



ok! 看完了這篇文章是否功力又加深了一成!

恭喜你!

作者強調的是要實做，多用記事本寫，或是 UltraEdit 文字編輯工具

盡量不使用圖形介面，相信這樣會讓你功力大增！








還不動手寫看看!!








基本的 HTML 格式要先學會，接下來我們要為您的網頁開始上色了!

系列文章：CSS (Cascading Style Sheet) 教學

 free counters