Web標準中的常見問題

張子陽發表於2007-08-30
Web

Web 標準中的常見問題

引言

大概在2004年的時候，Web標準的概念藉由一本名為《網站重構》的書開始被國內人所瞭解。隨後的幾年中，其更少的程式碼量、更好的搜尋引擎友好性、更好的瀏覽器相容性使得Web標準迅速受到重視並逐漸普及，網易、新浪等各大網站相繼採用Web標準進行網站重構。

在今年，我瀏覽了不少採用Web標準進行重構的網站，並在國內著名設計與製作論壇 藍色理想 瀏覽了很多網頁製作人員發表的言論。發現許多製作人員對Web標準的理解不夠深入，有的地方甚至存在誤區，在這篇文件中，我將就我所瞭解的問題做一點分析，以供參考。

NOTE：很可惜，這個文件中提到的範例頁面全部都失效了，重新制作這些頁面很花時間，缺少範例可能會對某些地方的理解造成影響，我多加了註釋。

以訪客為中心的 可訪問性 和 可使用性

如果有人問我，國外的網頁設計師和國內的最大區別是什麼？我會毫不猶豫的告訴他，國外的設計師最注重的是網頁的可訪問性(Accessibility)和可用性(Usability)。而國內的設計師則很少考慮，甚至不考慮這方面的問題。

什麼是可訪問性(Accessibility)？

可訪問性就是說你的網頁可以在任何情況下、被任何人，特別是一些受到某種限制的訪客所訪問到。受到某種限制的意思是說：視力障礙的訪客、只使用鍵盤不使用滑鼠的訪客。或者在瀏覽器不支援，或僅支援很少的 css 和 javascript的情況下，頁面依然可以訪問。

以頁面一來說，注意到左邊有“相關連結”，你可能會奇怪，在上面的導航中已經可以訪問到“相關連結”裡的全部內容，這裡為什麼還要多此一舉呢？為了好看麼？為了可訪問性！假設你只使用鍵盤會怎樣(只能通過TAB遍歷所有的連結和表單項)？你在這個頁面該如何訪問到Music目錄下的其他頁面？NO WAY！因為根本就沒有滑鼠的onmouseover和onmouseout事件。

NOTE：由於頁面失效，我在這裡多做一點說明：這個頁面在上方有一個很常見的滑鼠懸停顯示二級下拉選單的導航條，而在頁面左邊，我又放置了一些連結，其內容與下拉選單裡的連結相同。

什麼是可用性(Usability)？

舉一個簡單的例子：在我給大家展示的這個頁面裡，如果所有的JavaScript指令碼都失效，頁面會怎樣？如果你想選擇所有的核取方塊，你將不得不一個一個的去點選它，它的可用性降低了，但是可訪問性無損。如果你想按時間長度排序表格，則沒有辦法完成，但是絲毫不影響你瞭解每首歌曲的長度。

看了這個例子，你應該明白可訪問性和可用性的區別：可訪問性關心的是某個頁面是否能被使用者訪問到；可用性關心的是在諸如JavaScript等指令碼失效後，頁面的功能是否依然有效。

NOTE：同樣是由於頁面失效的原因，我想再舉一個可用性的例子，我們在提交表單的時候，很多時候都會加一個 Ctrl + Enter 直接提交的功能。這樣的做法就是提高可用性的一個典型例子，而如果你的表單只能通過Ctrl + Enter 提交，但使用者的瀏覽器不支援 JavaScript，那麼他將無法提交表單，這時對於此使用者，網頁的可用性可以認為是0。

最錯誤的概念：Web標準就是Div + Css

這裡首先要搞懂什麼是Web標準。Web標準不是一個標準，而是一個標準的集合。包括了結構化標記語言XHTML(語義和文件結構)、樣式表CSS(表現)以及Javascript+DOM(行為)。

當我們用Web標準來進行網頁設計的時候，我們首先做什麼？我們首先需要的是一個結構良好的HTML檔案。

那麼什麼叫結構良好的HTML檔案？

結構良好的主要含義就是，每一個標記都是自解釋的，是有語義的，放置的每一個HTML標記都是有確切含義的。比如說：當我寫下<h1>標題文字</h1>的時候，我僅僅告訴瀏覽器，這裡放置的，是一個標題，至於瀏覽器如何顯示它，那就不關我的事了(儘管幾乎所有的瀏覽器都會以很大的黑體加粗超大來顯示)。而當我想告訴瀏覽器這個標題該如何顯示的時候(字型有多大，白色還是黑色)，那麼就到了CSS該出手的時候了。可是，有多少人會這樣去顯示標題呢？<div style=”font-size:30px;font-weight:bold”>標題文字</div>。在藍色理想，對於這類設計者有一個很輕蔑的稱謂，叫做 Div狂人。

NOTE：說到這裡的時候希望不要得罪任何人，我只想就事論事的把問題講清楚，以便大家日後的改進。

很多的網頁設計人員對於此問題理解的不夠深入直接導致了頁面的文件結構很差。一個很簡單的例子，所有的頁面都沒有 <h1>，我在這裡可以很鄭重地告訴大家：搜尋引擎對<h1>標籤中文字的重視程度不亞於頁面的Title標記。另外，每一個頁面應該有且只有一個 <h1>，並且<h1>中間的文字應該是在搜尋引擎在正文裡第一個所能找到的文字。你們可能想問，有很多的網站，合適放<h1>的位置現在放置的是一張圖片，這樣該如何做呢？可以這樣寫CSS， h1{text-indent:-2000em}，這個意思相當於說文字跑到螢幕以外，對於使用者不可見，對於搜尋引擎可見。你們可能會產生疑問，這樣會不會受到搜尋引擎懲罰？我曾經花了整整一個下午專門查閱資料以進行考證，結論是不會的，這種方式和設定文字顏色和背景色顏色一致來欺騙搜尋引擎有著本質的區別，而且，國外專業講解Web標準的站點採用的都是這種做法。如果你們還是覺得這樣做有風險，那麼我再告訴一種方法：就是在 <h1> 中新增一張圖片(很多人實際已經在這麼做，只不過是在div裡)，在圖片的 alt 資訊裡寫明網頁的標題。

更進一步地講，良好的XHTML文件結構在脫離CSS的情況下，應該是一個結構良好的類似你現在讀的這篇PDF文件。

在這裡提出幾點建議：

  • 每個頁面都應該有且只有一個 <h1>，且出現在頁面最上方(也可以被包含在一個Div中)。
  • 有了<h1>，自然應該有<h2>、<h3>，用標題去劃分文件結構。
  • 應該是段落的地方使用<p>標記，設定<p>的下間距為一行，而不要使用連續的兩個<br />。
  • 需要縮排段首文字的時候使用 text-indent:2em，而不要簡單地拍兩個中文全形空格，或者乾脆四個&nbsp;
  • 對於有序列表，使用<ol> ，對於無序列表，使用<ul>。對於不是列表，但是長得像列表的頁面表現，不要使用ol 或者 ul。
  • 使用有語義的邏輯元素，而不要使用物理元素。邏輯元素是有語義的，物理元素是無語義的。

NOTE：這裡簡單解釋一下什麼是邏輯元素，什麼是物理元素。大家一定發現這樣一個事實，<b>標籤和<strong>標籤對於文字的效果都是加粗，<i>標籤和<em>標籤對於文字的效果都是斜體，它們之間有什麼區別呢？在這裡，b 代表的意思是 Bold(加粗)，而 Strong 代表著重強調。i代表的意思是 Italic(斜體)，而 em 代表的意思是 emphasize(強調)。看到這裡你應該明白了，物理元素告訴瀏覽器，我希望如何顯示這個文字；邏輯元素告訴瀏覽器，我這裡放置的文字有怎麼樣的重要性。所以，對於搜尋引擎來說，<strong>和<em>之間文字的重要程度要比<b>和<i>大的多。

最普遍的誤解：Web標準就是不使用表格

《PPk on Javascript》一書的作者，Web Standards 組織的成員 Peter-Paul Koch 這樣說道：

You should definitely use table to display tabular data ！

我所知道的Web標準世界級專家，沒有人在任何時間，任何地點提到說“Web標準就是不使用表格”。Web標準只是說：不應該使用表格去佈局，而不是說表格這個標記沒有存在的價值。對於表格狀的頁面，應該毫不猶豫的使用表格去完成它。

我舉個例子，如果讓我做論壇帖子顯示頁的表格，我會這麼寫(做了簡化)：

<table>
<thead>
    <tr><th colspan=”6″>論壇版塊的標題</th></tr>
    <tr>
        <td>表情</td>
        <td>帖子標題</td>
        <td>作者</td>
        <td>回貼數</td>
        <td>瀏覽數</td>
        <td>最後回覆</td>
    </tr>
</thead>

<tbody>
    <tr><td>與上面想對應的內容區域，這裡是迴圈顯示的</td></tr>
</tbody>

<tfoot>
    <tr><td>這裡是分頁資訊，比如當前是多少到到多少貼，總共多少貼等</td></tr>
</tfoot>
</table>

當你要對 版塊名稱 進行樣式的時候：

thead tr th{樣式}

當你要對 每一列的說明(就是表情、作者什麼的) 樣式的時候：

thead tr td{樣式}

當你要對 迴圈顯示的內容樣式的時候：

tbody tr td{樣式}

當你要對 帖子數目 及分頁 樣式的時候：

tfoot tr td{樣式}

貌似正確的錯誤：結構與顯示分離就是隻使用外聯式樣式表

很多人都簡單的認為既然要結構與顯示分離，那麼就應該絕對的把樣式存成css檔案，而在頁面頂部link進來。實際上，這種做法是相當錯誤的，當你這樣做了的時候，你不可避免的要使用大量的ID和Class，對日後的維護產生巨大的困難(甚至只有你才願意去維護這個頁面)。

《CSS權威指南》的作者Eric A. Meyer這樣說：In some situations, we should probably use inline style.

以頁面三為例：在<head>部分我使用了內聯式樣式表：，為什麼這麼做呢？為了覆蓋！因為在“/music/inc/main.css”裡，我已經定義了頁面左下角顯示的背景。但是我又不想每個頁面左下角的圖案都相同，所以，我把想要在此頁顯示的背景寫在這裡。而如果我這裡什麼也不寫會怎麼樣呢？不用慌張，頁面仍然會呈現我定義在/music/inc/main.css檔案中的背景。

再舉個使用在行級的樣式的例子，大家看“歌曲名歌曲型別 歌曲長度 人氣 下載”的表格標題，除了第一個歌曲名是靠左對齊的，其他都是居中對齊的。這個時候，換做你會怎麼做呢？很多人毫不猶豫地給“歌曲名”加個ID或者Class，然後定義在外聯式樣式表裡，你有沒有想過，如果你做的是一個非常複雜的頁面，你需要定義多少個ID和Class？是50個還是100個？

所以，以我的看法，合理的樣式表應該是90%外聯+5%內聯+5%內嵌。

檔案該如何組織？是否一個頁面對應一個Css檔案

首先，我想說明，對於檔案的組織，每個人都會有不同的做法，我這裡只是提出我的做法，給大家參考。

很多站點的根目錄都會有這樣的目錄：[images]、[style]、[js]、[include]、[pic]、[flash]等，本人所在公司的網站 www.travelchinaguide.com，它就有以上幾個目錄，可是，把所有的.css，.js，.swf加起來，不足30個，所以，有必要把這麼零散的頁面分放不同資料夾麼？

我的做法是這樣的：

根目錄下放置一個 [inc]，將所有的.css，.js，.ascx都放進去，而把.swf都放到[images]，取消[pic]目錄，僅留[images]目錄，因為這兩個目錄功能太相似。好了，現在我們僅就.css檔案來說，根目錄的[inc]下的css檔案應該有兩個，一個叫main.css，這個是全站使用的樣式，主要包括連結樣式、字型大小，還有最重要的網頁構架的樣式(就是組成頁面佈局的div的樣式)。另一個叫index.css，這個主要包括了index頁所獨有的樣式。

接下來我們考慮 /music/o2jam.aspx 這個頁面的樣式檔案該如何存放。首先要注意到，o2jam.aspx與其他同在music目錄下的其他頁面的顯示方式是類似的；其次注意到，各個欄目之間的風格又可能是迥異的(比如“訪客留言”和“音樂精選”)，所以，我在[music]目錄下也建立[inc]目錄，同時，我將o2jam.aspx用到的樣式，同時也是music目錄其他頁所用到的樣式，存成main.css，放在/music/inc/目錄下。此時，如果要針對[music]目錄下的頁面應用它所獨有的樣式時，呵呵，相信你已經知道了，直接寫在head裡，而沒有必要再存成o2jam.css，audition.css等等，只有在行數特別多時(超過100行)再考慮為每個頁面建立單獨的css檔案。

按照Web標準制作頁面時需注意的兩點

不要為了標準而去標準

很多人在對Web標準過了入門期以後，進入了一種對標準狂熱推崇的狀態，他們對自己的要求可以用苛刻來形容，用盡一切辦法使出渾身解數保證自己製作出來的頁面100%的符合Web標準，並以頁面通過W3C XHTML 和 CSS 驗證為己任。

儘管這種對於Web標準的態度值得敬佩，但卻有些得不償失。我們有沒有思考過為什麼要使用Web標準？我想可能主要有這麼幾個原因：1、瀏覽器相容性。2、搜尋引擎友好型。3、降低頁面檔案大小。4、更好的使用者體驗。當你為Web標準付出50%的努力，以上4點的完成度差不多就已經達到了90%的時候，為什麼要再花出剩餘50%的精力去追求餘下的10%呢？

儘可能少用或者不用Hacks

IE6 有個很有名的BUG，就是對於類似於：

* html div#container{樣式}

這樣的樣式IE6也可以解析通過，而 FireFox 則對這個樣式視而不見。

而 IE6 對CSS的支援又不及 FireFox 多，對於類似於

html>body div#container{樣式}

這樣的樣式，IE6 忽略不計，而FireFox卻可以正確解析。

很多人瞭解了這個特性之後彷彿抓住了一根救命稻草，只要一出現瀏覽器不相容的情況，甚至不經過思考，就使用這個Hacks。

實際上，同一種樣式的頁面表現往往有很多種實現方式，當一種方式行不通的時候，應該嘗試換一個思路去實現它，而不是簡單的用Hacks去解決，這樣會給程式碼的維護帶來很大的不便。

最後，請記住《網站重構》的作者說過的一句話：

想讓Web頁面在所有的瀏覽器中都一摸一樣是不可能的，既然這點差異對人們的瀏覽和使用不會產生影響，那麼就讓它差異去吧！

不要只知道結構與表現分離，結構與行為也需要分離

我們知道，Web 標準共分為三個部分：1，XHTML 控制文件框架，屬於結構;2，CSS控制頁面顯示，屬於表現；3，JavaScript+DOM控制使用者互動，屬於行為。我們一直在強調結構與表現分離，對於結構與行為的分離就考慮的非常少了，這樣的結果就是我們的Web頁面充斥著大量的JavaScript程式碼，既增大了頁面體積、佔用了頻寬，對於搜尋引擎也不夠友好。

我們現在看下頁面一，看下這個頁面裡的JavaScript都做了些什麼：

  • 表格的就地排序，當你點表格的標題“歌曲型別”，“歌曲長度”，“人氣”，會進行自動排序。
  • 歌曲名稱列的onmouseover、onmouseout切換效果。
  • 歌曲長度列的顏色效果。
  • 對核取方塊的 “全選”、“反選”、“清除”。
  • 所有<input type=”text” />和<textarea />在onfoucs和onblue時的樣式，(在“首頁上頁 下頁 末頁”旁邊)。
  • 輸入頁數的input只接受數字，且長度不能超過2。

下面是我的幾點建議和想法：

  1. 我們經常強調“結構與顯示”分離，可曾想過“結構與行為”分離？你可曾想過你的站點在訪客禁用掉JavaScript之後是什麼樣子？
  2. 避免過多的在HTML標籤內部使用 onclick、onmouseover、onmouseout 等行為，而應該在頁面首部寫成函式，在window.onload事件中載入它，這樣你的程式碼會清晰很多，同時也做到了行為與結構的分離。
  3. 在IE7還沒有大範圍普及之前，:first-child及a標記以外的:hover 還是沒有實際的使用價值，與其給額外的標籤加class屬性，我寧可在css裡使用現在不被IE6所支援的偽類， 再使用js來達到相同的效果，等到將來IE7大面積普及的時候，只要簡單的去掉這些JS程式碼就好了。
  4. 當你使用結構與行為分離的時候，帶給你的最大好處可能就是程式碼的維護性和可移植性，當你需要給你的頁面新增我這個頁面的textbox顯示效果時，你只需要簡單的prepareForm()函式拷過去，就OK了，對於HTML檔案，不需要做任何改動。

總結

在本文中，我首先介紹了什麼是網頁的可訪問性和可用性。

隨後說明了很多人對於Web標準就是DIV+CSS的一個普遍誤解，以及這樣做對搜尋引擎的不友好性。

接下來，我討論了另外一個對WEB標準的普遍誤解：應用Web標準就是不使用表格。

對於樣式表的實現方式和 檔案的組織我也做了細緻的探討。

最後，我以一個高階話題，即表現與行為分離，作為結尾。由於這個太前衛了，可以暫時不考慮實現它。

希望這篇文章能給你帶來幫助。


相關文章