就是我:XHTML 1.0 網頁設計需知

<< lighttpd + cakePHP 使用 $HTTP['host'] 來做 url.rewite | 回blog首頁 | 夏日 Blog 傳說串連組資料統計 - 第一名 -輕羽 >>

August 17,2006

XHTML 1.0 網頁設計需知

本文出自 Jamesz's Blog
授權為姓名標示-相同方式分享 1.0

本篇是翻譯自 Casey Kochmer 的「USING XHTML IN JSP, ASP AND PHP WEB SITES」一文。因該文原網址已遺失，我只貼上我之前看完後稍加整理的部份。

原則：

HTML 標籤統一用小寫，千萬別動到大寫英文字母。

ex. 錯誤的示範：
```
<P>,<TABLE>
```
（印象中某 M 牌出品的「前頭頁」會犯這種錯誤）

ex. 正確的示範：
```
<html>,<p>,<div>
```
（印象中另一個 M 牌出品的「織夢者」會自動用這個正確用法）
別亂擺 HTML 標籤。有的瀏覽器還是可以看到正確內容，但在 XHTML 中可是會出問題的。

ex. 錯誤的示範：
```
<form action="test.htm">
<table>
<tr><td>hi
</form></td></tr>
</table>
```
很明顯地，</form> 放錯地方了，但有的瀏覽器還是排除萬難秀出了表單。通常只有手賤的網頁設計者才會犯這種錯誤。

ex. 正確的示範：
```
<form action="test.htm">
  <table>
    <tr><td>hi</td></tr>
  </table>
</form>
```
很明顯地，這次都放對了地方，也能確定所有的圖形介面瀏覽器都讀得到正確的表單。用網頁編輯器的，或是細心一點的網頁設計師都辦得到。
所有屬於該標籤的屬性，其指定值一定要加雙引號。

ex. 錯誤的示範：
```
<form action=test.htm>
```
action 這個屬性，其指定值 test.htm 應當用雙引號括起來。

ex. 正確的示範：
```
<form action="test.htm">
```
看！被雙引號括起來的 test.htm 是符合 XHTML 規定的指定值了，很棒吧！
所有的標籤都是封閉性的。

ex. 錯誤的示範：
```
<p>這是一段示範
<br>一段錯誤的示範
```
<p>標籤門戶大開，不合 XHTML 規格；<br> 雖然看起來合法，但我們還是需要他自閉（？）來滿足 XHTML 規格。

ex. 正確的示範：
```
<p>這是一段示範<br />一段正確的示範</p>
```
標籤要有頭有尾，這是一定要的原則。至於像 <br> 啦，<input> 這種本來就是單獨存在的標籤呢？當然你可以再加個 </br> 或 </input> 把內容給關起來，只是有人研究過單獨用 <br /> 跟 <input />會讓網頁處理速度快一點（吧？）
在一個標籤中，同樣的招式不能對聖鬥士使用兩……同樣的屬性不能出現兩次。

寫法：

第一行一定要是這個標籤：<!DOCTYPE>！（註）

這個標籤將告訴瀏覽器這個網頁是如何描述 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">
  若要寫一個有框頁的網頁，請用這個。
第二行一定要用 <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）。

在 XHTML 中一定要加入 <title> 這個標籤。

例子：

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

<form>標籤一定要有一個 action 屬性，指定接收資料的網頁。

例子：
```
<form action="test.html"></form>
```
關於網頁上與樣式∕排版有關的標籤，如 <font>、<center> 等等都不該再使用，改以 CSS 語法設定。
所有文字內容都要包在標籤內。

例子：
```
<p>我被包圍啦</p>
```
如上例，「我被包圍啦」被 <p> 與 </p> 包圍，就符合 XHTML 的規格。

所有行內標籤內都不能含有區塊標籤。

例子：

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

超鏈結標籤<a>是個行內標籤，不能將區塊標籤<table>給包起來。

所有的 <img> 標籤都要有個 alt 屬性，作為圖檔的說明。例子：
```
<img src="http://www.istudio.idv.tw/pic/tux-small.gif"
alt="Tux，電腦界的救星，拯救長年被 M$ 帝國壓榨的可憐電腦使用者" />
```
這樣一來，使用文字瀏覽器或圖讀不出來時，就會出現打給 alt 屬性的內容，最起碼可以讓人知道這張是在這裡是要秀什麼的。
所有的 <style> 標籤都要有 type 屬性。

例子：
```
<style type="text/css">
  body {background-color:yellow;}
</style>
```
這樣使用 CSS 語法，可以讓整個背景變成黃色，只要不用底圖的話。
以前的 HTML 語法允許屬性的指定值單獨存在，現在不行了。要使用這個指定值，就用同名的指定值當作屬性。

例子：
```
<input type="checkbox" value="公雞" checked>公雞
```
在以前（HTML 4.01 規格）中，這樣做時會出現一個已經勾選的 check box（勾選框），但在 XHTML 中我們要改成這樣：
```
<input type="checkbox" value="公雞" checked="checked" />公雞
```
使用 <script> 標籤時最好將 script 內容另外以檔案呼叫進來。例子：
```
<script type="text/javascript" language="Javascript" 
src="javascript.js"></script>
```
這個例子中，是將 javascript.js 這段 javascript 抓進網頁中。當然，這樣子並非完全符合 XHTML 規格，但你不會想知道合乎規則的寫法的 XD

以上兩大項目，給大家參考，也給我自己速查 :-)

註：其實第一行應該是 XML 文件宣告。

例子：

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

「version="1.0"」表示這是依循 XML 1.0 規格，「encoding="Big5"」表示這份文件的文字編碼為大五碼（正體中文）。

Posted by thegiive at 樂多Roodo! │11:52 │回應(20) │引用(0) │Web Design

樂多分類：網路/3C 工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/2030204

回應文章

http://wwbrfqgfsrfwa.host.com
desk3
[url=http://wwbsfqgfsrfwa.host.com]desk4[/url]
[link=http://wwbafqgfsrfwa.host.com]desk6[/link]

Posted by Bettynjd at January 1,2008 20:23

Yo! college player of the week dog helper little santas simpsons lopez island bed and breakfast high musical piano piece school the play macbeth by shakespeare high la lafayette northside school india republic day greeting card how to make fake stone enhancer olay regenerist targeted tone expectation grad learning new nurse

Posted by Susandub at January 10,2008 03:34

Hey! phentermine cialis viagra cialis phentermine cialis viagra cialis viagra cialis

Posted by Brentkyl at January 10,2008 21:00

Hi! viagra phentermine levitra phentermine cialis valium xanax viagra phentermine levitra

Posted by Anayfb at January 11,2008 01:09

Yo! CIALIS levitra viagra levitra viagra cialis viagra viagra cialis adipex

Posted by Rongqs at January 11,2008 06:11

Hey! viagra cheap cialis buy ambien buy ultram buy xanax buy viagra buy xanax cheap adipex cialis cheap viagra

Posted by Carlaffn at January 11,2008 16:51

Hey! order levitra cheap phentermine buy vicodin viagra viagra online hydrocodone buy diazepam buy phentermine order cialis cheap cialis

Posted by Jodibfk at January 11,2008 23:19

Hi! cheap phentermine buy phentermine buy cialis

Posted by Bryankev at January 12,2008 01:30

Yo! phentermine

Posted by Stacygav at January 12,2008 05:01

Hey! buy cialis buy phentermine buy phentermine buy cialis buy viagra buy ambien buy ultram buy cialis buy viagra buy viagra

Posted by Evanwrn at January 13,2008 10:23

Hi! buy levitra buy tramadol buy viagra buy soma buy phentermine buy viagra buy cialis buy cialis buy xanax buy diazepam

Posted by Chloesjm at January 13,2008 16:13

Hey! buy phentermine no doctor buy phentermine no script buy adipex online buy phentermine no rx buy levitra no prescription buy levitra from online pharmacy phentermine no prescription purchase viagra online phentermine without prescription best price for generic viagra

Posted by Annaccr at January 15,2008 03:36

Yo! buy viagra no prescription buying viagra online buy adipex no prescription best price for generic viagra buy cialis generic online phentermine no prescription buy phentermine without prescription cialis genuine sales buying generic cialis buy viagra online

Posted by Mollyqai at January 15,2008 09:48

Yo! click here look info here check this here check this here click here check this

Posted by Rogerfzb at January 15,2008 14:55

Hey! buy levitra cheap levitra buy phentermine buy phentermine online buy levitra buy phentermine cheap viagra buy adipex buy tramadol buy xanax

Posted by Amyczj at January 16,2008 21:51

Hey! buy levitra online cheap phentermine buy phentermine online cheap levitra buy phentermine cheap ambien order cialis buy viagra cheap levitra cheap cialis

Posted by Pattywnt at January 17,2008 03:27

Hi! buy cialis buy xanax online cheap phentermine buy tramadol cheap viagra cheap adipex cheap adipex buy ultram buy cialis online cheap cialis

Posted by Wendyjxq at January 17,2008 21:55

Hi! buy viagra click here here info info here look here check this look

Posted by Loganmzi at January 18,2008 03:15

Yo! here here look here click here check this click here check this here info

Posted by Cindyiyn at January 18,2008 05:25

Hi! look

Posted by Allenier at January 18,2008 07:10

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

回最上方