W3C規範學習

時間 2019-11-18

標籤 w3c 規範學習欄目 C&C++ 简体版

原文原文鏈接

w3c：萬維網聯盟（World Wide Web Consortium，W3C），又稱W3C理事會。
W3C組織是對網絡標準制定的一個非贏利組織，W3C是萬維網聯盟的縮寫，像HTML、XHTML、CSS、XML的標準就是由W3C來定製。html

W3C網頁標準不是一個標準，而有W3C萬維網聯盟組織起草和發佈的一系列標準的集合。web

W3C網頁標準主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。瀏覽器

對應的標準也分三方面：服務器

1.結構化標準語言主要包括XHTML和XML；網絡

2.表現標準語言主要包括CSS；框架

3.行爲標準主要包括對象模型（如W3CDOM）、ECMAScript等。ide

出現問題：
1. 網頁代碼的錯亂、網頁頁面顯示誤差；
2. 針對各類瀏覽器的動態JS特效，忽略了部分潛在用戶；
3. 移植性差的代碼，殘障人士沒法順利瀏覽網站內容等。工具

如何符合w3c規範？佈局

一、確保全部的標籤都使用小寫字母學習

二、確保全部的屬性值都放在引號裏

三、確保全部成對標籤出現的順序、不成對的標籤都用/>結束, 」/」和」>」之間不要有空格

如何讓你的站點標準起來,怎麼改善現有網站

咱們大部分的設計師依舊在採用傳統的表格佈局、表現與結構混雜在一塊兒的方式來創建網站。學習使用XHTML+CSS的方法須要一個過程，使現有網站符合網站標準也不可能一步到位。最好的方法是按部就班，分階段來逐步達到徹底符合網站標準的目標。若是你是新手，或者對代碼不是很熟悉，也能夠採用遵循標準的編輯工具，例如Dreamweaver MX 2004，它是目前支持CSS標準最完善的工具。

1．初級改善

* 爲頁面添加正確的DOCTYPE

不少設計師和開發者都不知道什麼是DOCTYPE，DOCTYPE有什麼用。DOCTYPE是document type的簡寫。主要用來講明你用的XHTML或者HTML是什麼版本。瀏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。因此，若是你不注意設置了錯誤的DOCTYPE，結果會讓你大吃一驚。XHTML1.0提供了三種DOCTYPE可選擇：

(1)過渡型（Transitional ）

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

(2)嚴格型（Strict ）

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

(3)框架型（Frameset ）

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

對於咱們初級改善來講，只要選用過渡型的聲明就能夠了。它依然能夠兼容你的表格佈局、表現標識等，不至於讓你以爲變化太大，難以掌握。

Tip:你懶得輸入上面過渡型代碼的話，能夠訪問http://www.macromedia.com/網站的首頁，而後查看源代碼，把head區一樣的代碼拷貝粘貼就能夠了。

* 設定一個名字空間（Namespace）

直接在DOCTYPE聲明後面添加以下代碼：

一個namespace是收集元素類型和屬性名字的一個詳細的DTD，namespace聲明容許你經過一個在線地址指向來識別你的namespace。只要照樣輸入代碼就能夠。

* 聲明你的編碼語言

爲了被瀏覽器正確解釋和經過標識校驗，全部的XHTML文檔都必須聲明它們所使用的編碼語言。代碼以下：

這裏聲明的編碼語言是簡體中文GB2312，你若是須要製做繁體內容，能夠定義爲BIG5。

* 用小寫字母書寫全部的標籤

XML對大小寫是敏感的，因此，XHTML也是大小寫有區別的。全部的XHTML元素和屬性的名字都必須使用小寫。不然你的文檔將被W3C校驗認爲是無效的。例以下面的代碼是不正確的：

正確的寫法是：

<title>公司簡介</title> 一樣的，<P>改爲<p>，<B>改爲<b>等等。這步轉換很簡單。

* 爲圖片添加 alt 屬性

爲全部圖片添加alt屬性。alt屬性指定了當圖片不能顯示的時候就顯示供替換文本，這樣作對正經常使用戶無關緊要，但對純文本瀏覽器和使用屏幕閱讀機的用戶來講是相當重要的。只有添加了alt屬性，代碼纔會被W3C正確性校驗經過。注意的是咱們要添加有意義的alt屬性，象下面這樣的寫法毫無心義：

正確的寫法：

* 給全部屬性值加引號

在HTML中，你能夠不須要給屬性值加引號，可是在XHTML中，它們必須被加引號。

例：height="100"，而不能是height=100。

* 關閉全部的標籤

在XHTML中，每個打開的標籤都必須關閉。就象這樣：

<p>每個打開的標籤都必須關閉。</p> <b>HTML能夠接受不關閉的標，XHTML就不能夠。</b>這個規則能夠避免HTML的混亂和麻煩。舉例來講：若是你不關閉圖像標籤，在一些瀏覽器中就可能出現CSS顯示問題。用這種方法能確保頁面和你設計的同樣顯示。須要說明的是：空標籤也要關閉，在標籤尾部使用一個正斜槓"/"來關閉它們本身。例如：<br /> <img src="webstandards.gif" />

通過上述七個規則處理後，頁面就基本符合XHTML1.0的要求。但咱們還須要校驗一下是否真的符合標準了。咱們能夠利用W3C提供免費校驗服務（http://validator.w3.org/）。發現錯誤後逐個修改。在後面的資源列表中咱們也提供了其餘校驗服務和對校驗進行指導的網址，能夠做爲W3C校驗的補充。當最後經過了XHTML驗證，恭喜你已經向網站標準邁出了一大步。不是想象中的那麼難吧！

2．中級改善

接下來咱們的改善主要在結構和表現相分離上，這一步不象第一步那麼容易實現，咱們須要觀念上的轉變，以及對CSS2技術的學習和運用。但學習任何新知識都須要花點時間的，不是嗎？訣竅在於邊作邊學。假如你一直採用表格佈局，根本沒用過 CSS，也沒必要急於跟表格佈局說再見，你能夠先用樣式表代替 font 標籤。隨着你學到的越多，你能作的就越多。好，一塊兒來看看咱們須要作哪些事：

* 用CSS定義元素外觀

咱們在寫標識時已經養成習慣，當但願字體大點就用<h1>，但願在前面加個點符號就用<li>。咱們老是想< h1>的意思是大的，<li>的意思是圓點，<b>的意思是「加粗文本」。而實際上， <h1>能變成你想要的任何樣子，經過CSS，<h1>能變成小的字體，<p>文本可以變成巨大的、粗體的， <li>可以變成一張圖片等等。咱們不能強迫用結構元素實現表現效果，咱們應該使用CSS來肯定那些元素的外觀。例如，咱們可使原來默認的 6級標題能夠看起來大小同樣：

h1, h2, h3, h4, h5, h6{ font-family: 宋體, serif; font-size: 12px; }

* 用結構化元素代替無心義的垃圾

許多人可能歷來都不知道HTML和XHTML元素設計本意是用來表達結構的。咱們不少人已經習慣用元素來控制表現，而不是結構。例如，一段列表內容可能會使用下面這樣的標識：

句子一<br /> 句子二<br /> 句子三<br />

若是咱們採用一個無序列表代替會更好：

你或許會說「可是<li>顯示的是一個圓點，我不想用圓點」。事實上，CSS沒有設定元素看起來是什麼樣子，你徹底能夠用CSS關掉圓點。

* 給每一個表格和表單加上id

給表格或表單賦予一個惟一的、結構的標記，例如

接下來，在書寫樣式表的時候，你就能夠建立一個「menu」的選擇器，而且關聯一個CSS規則，用來告訴表格單元、文本標籤和全部其餘元素怎麼去顯示。這樣，不須要對每一個<td>標籤附帶一些多餘的、佔用帶寬的表現層的高、寬、對齊和背景顏色等等屬性。只須要一個附着的標記（標記「menu」的id標記），你就能夠在一個分離的樣式表內爲乾淨的、緊湊的代碼標記進行特別的表現層處理。

中級改善咱們這裏先列主要的三點，但其中包含的內容和知識點很是多，須要咱們逐步學習和掌握，直到最後實現徹底採用CSS而不才用任何表格實現佈局。

創建網站標準的目的就是：
1. 簡化HTML代碼，下降網站建設的成本；
2. 保證網站在長期互聯網環境中能有效；
3. 增強網站的兼容性，能適應不一樣的網絡設備和網絡終端。
而後，咱們看看遵循標準對瀏覽者的好處：
1. 瀏覽者能夠根據需求定製本身想要的表現形式；
2. 網頁內容能夠被更多的特殊人羣所瀏覽（包括色盲、視弱等）；
3. 網頁的加載速度會明顯提高；
4. 瀏覽者沒必要專門爲一個網頁去下載另外一個瀏覽器瀏覽，保持了網頁在各類瀏覽器中的兼容性；
5. 網頁有適用於打印的版本。

最後，來討論一下對站長和企業的好處：1. 容易被搜索引擎所抓取；2. 網絡帶寬要求降低，節省服務器成本；3. 提升網站的可移植性，可擴展性，可塑性；4. 客戶體驗上升，從而吸引更多用戶駐足您的網站，給您帶來更多的效益。