XHTML 1.0 網頁設計需知

現在已經慢慢步入 XHTML + CSS 的天下了..
Html 已經不敷使用了.. 看了 Yahoo! 的首頁就應該要能夠了解..
CSS 真是太強大了.. 不過看起來還得花不少時間來學~
最少.. 還是先將 XHTML 學起來好了~ :p


以下轉載自: XHTML 1.0 網頁設計需知
並做一些小小的修正.
本篇是翻譯自 Casey Kochmer 的「USING XHTML IN JSP, ASP AND PHP WEB SITES」一文。因該文原網址已遺失,我只貼上我之前看完後稍加整理的部份。
原則:
1. HTML 標籤統一用小寫,千萬別動到大寫英文字母。
ex. 錯誤的示範:

<P>,<TABLE>

(印象中某 M 牌出品的「前頭頁」會犯這種錯誤)
ex. 正確的示範:

<html>,<p>,<div>

(印象中另一個 M 牌出品的「織夢者」會自動用這個正確用法)
2. 別亂擺 HTML 標籤。有的瀏覽器還是可以看到正確內容,但在 XHTML 中可是會出問題的。
ex. 錯誤的示範:

<form action="test.htm">
<table>
<tr><td>hi
</form></td></tr>
</table>

很明顯地,

放錯地方了,但有的瀏覽器還是排除萬難秀出了表單。通常只有手賤的網頁設計者才會犯這種錯誤。
ex. 正確的示範:

<form action="test.htm">
<table>
<tr><td>hi</td></tr>
</table>
</form>

很明顯地,這次都放對了地方,也能確定所有的圖形介面瀏覽器都讀得到正確的表單。用網頁編輯器的,或是細心一點的網頁設計師都辦得到。
3. 所有屬於該標籤的屬性,其指定值一定要加雙引號。
ex. 錯誤的示範:

<form action=test.htm>

action 這個屬性,其指定值 test.htm 應當用雙引號括起來。
ex. 正確的示範:

<form action="test.htm">

看!被雙引號括起來的 test.htm 是符合 XHTML 規定的指定值了,很棒吧!
4. 所有的標籤都是封閉性的。
ex. 錯誤的示範:

<p>這是一段示範
<br>一段錯誤的示範

<p>標籤門戶大開,不合 XHTML 規格;
<br> 雖然看起來合法,但我們還是需要他自閉(?)來滿足 XHTML 規格。
ex. 正確的示範:

<p>這是一段示範<br />一段正確的示範</p>

標籤要有頭有尾,這是一定要的原則。至於像 <br> 啦,<input> 這種本來就是單獨存在的標籤呢?當然你可以再加個 </br> 或 </input> 把內容給關起來,只是有人研究過單獨用 <br /> 跟 <input />會讓網頁處理速度快一點(吧?)
5. 在一個標籤中,同樣的招式不能對聖鬥士使用兩……同樣的屬性不能出現兩次。
寫法:
第一行要是這個標籤(選用, 可不加): (註)
這個標籤將告訴瀏覽器這個網頁是如何描述 XHTML 規格。有下列三種:

(1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
若要寫一個「純」XHTML 的網頁,請用這個。
(2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
若要寫個能與大部份 HTML 4.01 相容(就是一般常見的舊網頁標準)的網頁,請用這個……大概也只會用這個了吧 XD
(3) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
若要寫一個有框頁的網頁,請用這個。

註:
其實第一行應該是 XML 文件宣告。
例子:

<?xml version="1.0" encoding="Big5"?>

「version="1.0"」表示這是依循 XML 1.0 規格,「encoding="Big5"」表示這份文件的文字編碼為大五碼(正體中文)。
2. 第二行一定要用 <html> 這個標籤,並在裡面加上 xmlns 這個屬性。
例子:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8">

上面的 xmlns 是指 XML 文件(以後有空再去了解吧)使用的腳本(大概是這樣解釋的吧…有錯再來改)是 http://www.w3.org/1999/xhtml(別亂改), 而這個 XML 文件(好啦,XHTML 是 XML 的一種)用的語言是萬國碼(utf-8)。
3. 在 XHTML 中一定要加入 <title> 這個標籤。
例子:

<html>
<head>
<title>網頁標題</title>
</head>
<body>

4. <form>標籤一定要有一個 action 屬性,指定接收資料的網頁。
例子:

<form action="test.html"></form>

5. 關於網頁上與樣式∕排版有關的標籤,如 <font>、<center> 等等都不該再使用,改以 CSS 語法設定。
6. 所有文字內容都要包在標籤內。
例子:

<p>我被包圍啦</p>

如上例,「我被包圍啦」被 <p> 與 </p> 包圍,就符合 XHTML 的規格。
7. 所有行內標籤內都不能含有區塊標籤。
例子:

<a href="http://www.w3.org">
<table>
<tr>
<td>這是個完全錯誤的例子</td> </tr>
</table>
</a>

超鏈結標籤<a>是個行內標籤,不能將區塊標籤<table>給包起來。
8. 所有的 <img> 標籤都要有個 title 屬性,作為圖檔的說明。例子:

<img src="http://www.istudio.idv.tw/pic/tux-small.gif"
alt="Tux,電腦界的救星,拯救長年被 M$ 帝國壓榨的可憐電腦使用者" />

這樣一來,使用文字瀏覽器或圖讀不出來時,就會出現打給 title 屬性的內容,最起碼可以讓人知道這張是在這裡是要秀什麼的。
9. 所有的 <style> 標籤都要有 type 屬性。
例子:

<style type="text/css">
body {background-color:yellow;}
</style>

這樣使用 CSS 語法,可以讓整個背景變成黃色,只要不用底圖的話。
10. 以前的 HTML 語法允許屬性的指定值單獨存在,現在不行了。要使用這個指定值,就用同名的指定值當作屬性。
例子:

<input type="checkbox" value="公雞" checked>公雞

在以前(HTML 4.01 規格)中,這樣做時會出現一個已經勾選的 check box(勾選框),但在 XHTML 中我們要改成這樣:

<input type="checkbox" value="公雞" checked="checked" />公雞

11. 使用 <script> 標籤時最好將 script 內容另外以檔案呼叫進來。
例子:

<script type="text/javascript" language="Javascript"
src="javascript.js"></script>

這個例子中,是將 javascript.js 這段 javascript 抓進網頁中。當然,這樣子並非完全符合 XHTML 規格,但你不會想知道合乎規則的寫法的 XD


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 教學文件。將永久鏈結加入書籤。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料