關於本報

網頁研習室【網頁製作系列報導】
報主:李文能
創刊日期:2002-06-25
發報頻率:月刊
訂閱人數:6,166
官網:
http://www.webpage.idv.tw/maillist/

近期電子報


訂閱便利貼


將貼紙語法置入您的網站或部落格當中, 訪客可以輸入mail取得認證信,並按下確認連結後, 快速訂閱您的報紙。
預覽圖
訂閱網頁研習室【網頁製作系列報導】報
網頁研習室【網頁製作系列報導】
-----------------------------------------------------------------------------------------------------
Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

網頁研習室【網頁製作系列報導】
發報時間: 2010-06-29 11:00:00 / 報主:李文能
[公益聯播]徵 課輔人員
本期目錄
壹、報導前言:
貳、認識 DOCTYPE 宣告:
參、 宣告種類:
肆、認識 DOCTYPE 製定規則:
伍、HTML 與 XHTML 的區別:
陸、使用 DOCTYPE 注意事項:
柒、國內直得參考資料:
捌、國外值得參考資料:
玖、如何完整取得所有資料:
拾、結論與建議:
壹、報導前言:
記得剛開始學習 HTML 標籤時,任何教材告訴你寫網頁一定是從宣告 <HTML> 開始,到由右往左的斜線 </HTML> 結束為止。
這幾年如果你已養成打開網頁原始碼習慣的話,一定會發現已有許多網頁(站),第一段已改由宣告 <!DOCTYPE ...> 開始。
如果你的英文不錯可直接上 W3C (World Wide Web Consortium) 的網站,查詢 DTD (Document Type Definition) 宣告方式。
當你進一步研究後就會了解,原來在宣告 開始前加入宣告 <!DOCTYPE ...> 這一行,裡面還有非常多的學問喔。
我們知道每一家瀏覽器 (Broswer),對某些 HTML 標籤 (Tag) 會有特殊的解釋,為求統一標準規格,所以 W3C 製定了這項規定。
當所有瀏覽器看到這行 DTD 宣告,就會去此對這份規範,依照此規範去解讀 HTML 標籤,這樣就比較不會有不相容的狀況發生。
本篇特別為初學者,有系統的完整介紹與整理 DOCTYPE 用法,讓你的網頁(站)從今天開始更符合 HTML 製作標準。
注意:初學者在練習基本的 HTML 標籤時(不含 CSS 或 JavaSceipt 語法),是否加入以上宣告,大部份都不會影響顯示結果。
貳、認識 DOCTYPE 宣告:
什麼是 DOCTYPE 呢?其實 DOCTYPE 是 Document Type 的縮寫,在 HTML 4.01 版本時出現的,可譯為文件類型定義。
DOCTYPE 其作用就是用來宣告(定義),該網站網頁編寫的 HTML、XHTML 所用標籤是採用什麼樣的 (X)HTML 版本。
宣告中 DTD 文檔類型定義或聲明,其裡頭包含了 HTML、XHTML 標籤規則,瀏覽器依據這個 DTD 來分析 HTML 的編碼。
DTD 是用來定義標籤的格式,主要是用來驗證這份文件是否正確,DTD 不能用來定義標籤,與相容性是無關係的。
指定 DOCTYPE 好處之一,你可以使用 Markup Validator 等工具來檢查其 (X)HTML 語法的正確性。
最重要的是對大多數的瀏覽器而言,一個簡單的 DOCTYPE 聲明能減少許多不必要的猜測行為與錯誤。
為考量到網頁可及性設計等問題,W3C 在設計 HTML 標準時,會以 W3C 所制定的 HTML 標準為依規作設計。
因此,網頁之起始標題必須註明網頁內容所使用的 HTML 版本,以供不同瀏覽器作識別上的解讀。
簡單的說建立此宣告就是為了讓網頁符合 W3C 的標準化,檢查所編寫 HTML、XHTML 的標籤是採用什麼樣的版本。
參、 宣告種類:
XHTML 1.0 有三種 DTD,一個網頁能使用哪些元素,是由 DTD 定義的。
W3C 提供了以下三種常用的 DTD 的宣告方式給 HTML4.01 使用,包括標籤的名稱、用法以及語法:

第一種、XHTML 1.0 Strict 嚴格型 (Strict DTD)
使用這組 DTD 最為嚴僅,不允許使用非推薦的 HTML 語法、標籤屬性或框架。
可讓所有支援 DOCTYPE 的瀏覽器切成標準模式,但是對 Opera 7.0 之前的版本,或 IE6 之前的版本無效。
語法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

第二種、XHTML 1.0 Transitional 過渡型 (Transitional DTD)
這組 DTD 要求較為寬鬆,充許使用非推薦的 HTML 語法,但此 DTD 不可使用框架。
可讓 IE6+/Win 及 IE5+/Mac 切成標準模式。
使第一代 Gecko 瀏覽器 (Mozilla 1.0,Netscape 6) 切成標準模式。
使第二代 Gecko 瀏覽器 (Mozilla 1.01,Netscape7+,Chimera 0.6+) 切成近乎標準模式。
但對 Opera 7.0 之前的版本,或 IE6 之前的版本無效。
語法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

第三種、XHTML 1.0 Frameset 框架型 (Frameset DTD Frameset)
與上面相同,唯一的差別在於,此 DTD 充許使用框架。
可讓 IE6+/Win 及 IE5+/Mac 切成標準模式。
使第一代 Gecko 瀏覽器 (Mozilla 1.0,Netscape 6) 切成標準模式。
使第二代 Gecko 瀏覽器 (Mozilla 1.01,Netscape7+,Chimera 0.6+) 切成近乎標準模式。
但對 Opera 7.0 之前的版本,或 IE6 之前的版本無效。
語法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

這三種不同的 DOCTYPE 標籤當中,最常使用的是第二種 (Transitional DTD)。
DOCTYPE 網頁語言的宣告方式,你可以在 W3C 的網站上,查詢到各版語言的最新標準寫法。
肆、認識 DOCTYPE 製定規則:
典型 HTML 的 DOCTYPE 聲明準則如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

語法直譯:
<!文件類型定義 超文字標記語言 頂級元素 可用性 "註冊//組織//類型 標籤 定義//語言" "絕對路徑網址">。
語法解釋:
備註:一個雙斜字符 ("//") 是用來作為分隔關鍵字之間的宣告。

頂級元素:指定 DTD 中聲明的頂級元素類型。

可用性:指定正式公開標識符 (FPI) 是可公開訪問的對象還是系統資源。

註冊:指定組織是否由國際標準化組織 (ISO) 註冊。
使用 + 加的符號表示,該組織的名字有在 ISO 組織註冊;若使用 - 減的符號表示,該組織的名稱沒有註冊。

組織:指定表明負責由 !DOCTYPE 聲明引用的 DTD 的創建和維護的團體或組織的名稱,即 OwnderID。

類型:指定公開文本類,即所引用的對象類型,有許多不同的關鍵字可能寫在這裡。

標籤:指定公開文本描述,即對所引用的公開文本的唯一描述性名稱。
如果公眾的文字修改為任何理由,一個新的公共文本描述字符串應該是創造它。

定義:指定文檔類型定義(如下)。
Strict:排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素,因為樣式表已經很完善了。
Transitional:包含除 frameSet 元素的全部內容。
Frameset:框架集文檔。

語言:指定公開文本語言,即用於創建所引用對象的自然語言編碼系統(使用大寫兩個字母)。
備註:HTML / XHTML 的 DTD 的通常是用英文寫的 (EN)。

網址:指定所引用對象的 DTD 絕對或相對路徑位置。

本段文章引用來源:
What is it? Brian Wilson、Google 翻譯 GO
DOCTYPE MSDN - Microsoft Developer Network
關於 DOCTYPE 池水間
伍、HTML 與 XHTML 的區別:
HTML 是超文本鏈接語言的縮寫 (HyperText Markup Language)。
簡單來說 HTML 是一種網頁語言,可用它來製作做網頁,而且非常簡單學習。

XHTML 的 X 代表擴展的 (eXtensible),XHTML 可說是改良過的 HTML 語言。
他比 HTML 更加嚴謹(格),正式稱呼為擴展超文本鏈接語言 (EXtensible HyperText Markup Language)。
XHTML 把許多樣式的體現方式交給了 CSS 處理,擁有模組化及可擴展化,讓更多的瀏覽器正確的接受並準確顯示出來。
XHTML 1.0 在 2000 年 1 月 26 日成為 W3C 的推薦標準。
從繼承關係而言 HTML 是一種基於標準通用置標語言 (SGML) 的應用,而 XHTML 則是 SGML 的一個子集。

如果你學過 HTML 標籤,你一定會覺得奇怪,為什麼在基本排版中所介紹的換行是 <br/>,而不是

因為本文件介紹的是 XHTML 1.0,它是繼 HTML 4.01 之後的新標準。
簡單來說,將 HTML 4.01 套上 XML 1.0 的規則,就是 XHTML 1.0。
由於 XML 1.0 規定所有不成對的標籤(也就是空元素),必須在符號 ">" 之前加上符號 "/"。
所以原本在 HTML 4.01 的 <br> 就必須換成 <br/>,這樣才符合 XHTML 1.0。

XML 1.0 規定屬性值前後要以符號 " 或 ' 夾住,HTML 4.01 沒有規定屬性值一定要用符號 " 或 ' 夾住,甚至也可以不用。
XML 1.0 規定大小寫不同的標籤就是不一樣的標籤,如 <br/> 和 <BR/> 是會被認為不同的標籤。
所以 XHTML 1.0 規定標籤和屬性都必須是小寫的英文字母,不再像 HTML 4.01 不分大小寫。
陸、使用 DOCTYPE 注意事項:
本語法無需關閉標籤,但一定要將 DOCTYPE 聲明放在 HTML 或 XHTML 文檔的頂部,否則會被視為錯誤。
這三種不同的 DOCTYPE 標籤當中,最常使用的是 XHTML 1.0 Transitional 過渡型 (Transitional DTD)。
如果 HTML 缺少第一行的 DOCTYPE 設定,瀏覽器會變成 Quirks (舊版相容)模式。
如果一個網頁沒有聲明 DOCTYPE,它就會以默認的 DOCTYPE 解釋該頁的 HTML。
在 CSS 中第一行的 DOCTYPE 是必要的,否則將會使得瀏覽器無法在標準模式下顯示 CSS 效果。
只有一個正確的 DOCTYPE,XHTML 裏的標籤和 CSS 才能正常生效。
宣告 DOCTYPE 語法時,如果非要要斷行使用,請自 Strict//EN" 後開始斷行,以免產生錯誤。
你可以將定義語言設成中文 (zh),當然也可以視需要設別國語言:日文(ja)、英文(en)、法文(fr) 等其他語言。
或者把 lang="zh" 和 xml:lang="zh" 中的 zh 改成適當的 ISO Language Code。
這些代表語言的編碼,請參考 W3School 的 HTML ISO Language Code Reference 網頁說明。
柒、國內直得參考資料:
GO
捌、國外值得參考資料:
GO
玖、如何完整取得所有資料:
您需要這份完整報導資料嗎?學習上有困難嗎?您想永久長期取得網頁研習室有關網頁製作教材嗎?
如果您想完整取得電子報等所有檔案資料,我們提供燒錄光碟片給您 Go
凡加入教學會員者,就有機會獲得半年期線上指導、所有報導完整的資料光碟乙片及 10 MB 主機空間。
教材詳細內容:語法教學第一電子報第二電子報第三期電子報第四電子報網頁圖窟
為讓您學習不終斷,即日起推出凡參加教學會員或購買教材會員,可加選第四期電子報報導畢後補送完整教材一片!
凡參加教學會員 + 第四期電子報者,即日起贈送無廣告快速 10 MB 主機空間,讓您更輕鬆學習網頁製作。
特別聲明:本站教學使用軟體或檔案,著作權與版權均屬原創公司所有,屬完全免費性質,不含於教學 (材) 費用內。
拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。
推薦訂閱
第 八十九 期 2013.09.06 2013 年 CC 全球會速記@【創用CC電子報】
<數位之牆>國際化,是台灣網際網路產業的最後活路@【數位之牆】
轉寄『認識 HTML 標準驗證 DOCTYPE 宣告』這期電子報

寄信人暱稱  寄信人email
收信人暱稱  收信人email

  • 社群留言
  • 留言報主