Webdevelopmentmistakes-web設(shè)計與開發(fā)常見錯誤_Web標準教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
混淆文檔類型(DOCTYPE)
完全不寫、寫的不正確、或放錯地方。我曾見過HTML 4.0 Transitional被用在XHTML網(wǎng)頁和框架頁中，還看到過在開頭的<html>標簽后寫DOCTYPE聲明和一些不完整的聲明。
為什么？有兩個原因。首先，文檔聲明是必須的，在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有說明。第二，瀏覽器會根據(jù)指定的文檔類型去顯示和渲染網(wǎng)頁。也就是“DOCTYPE切換(DOCTYPE switching)”。為了保持各個瀏覽器顯示網(wǎng)頁的一致性，非凡是你用了CSS，你一定會希望瀏覽器使用它們“Standards compliance mode”。關(guān)于DOCTYPE切換，可以看看使用正確的DOCTYPE!和正確的文檔類型聲明，正確的布局方式。
<span>癖
樣式化的一個常見方法就是把一段東西用<span>標簽圍起來，并且?guī)б粋�class用來設(shè)置樣式。我敢保證你經(jīng)常可以看到諸如<span class="heading">和<span class="bodytext">的代碼。
為什么？ 其實在很多情況下這完全沒必要，這樣做只會混亂標簽并且沒有什么語義。標題就用標題(h1~h6)標簽，段落就用段落(P)標簽，列表就用列表(UL, OL和DL)標簽。然后再用CSS去樣式化，假如需要的話，也可以加class和id屬性。
太多可視化思考
以為web就是WYSIWYG（所見即所得） – 一開始就想著這些東西該怎么表現(xiàn)的，而不是先去考慮邏輯結(jié)構(gòu)上怎么樣。
為什么？ 雖然大部分網(wǎng)民都是視力正常的，但是還是有殘疾人上網(wǎng)的。網(wǎng)民可能使用不同瀏覽器、不同系統(tǒng)、不同尺寸顯示器和分辨率、不同的窗口大小、不同顏色標準和文字大小，所以你不應(yīng)該把你的網(wǎng)頁做成WYSIWYG。網(wǎng)頁不是印刷品或者電視節(jié)目。要讓你的設(shè)計彈性化。
缺乏語義
沒有使用具有語義的標簽。想當然的按照圖形瀏覽器渲染的HTML樣式去寫代碼，而不是參照這些標簽的意義。
為什么？和上文提到的"<span>癖”比較接近，沒有好好的利用現(xiàn)有的HTML標簽來表達它應(yīng)該表達的語義。沒有語義化的HTML，為那些非可視化用戶代理(UA)造成了理解上的困難。而且語義化的HTML很輕易進行CSS樣式化。
編碼不一致
在服務(wù)器發(fā)送的默認編碼是一種而文檔里面又使用另外一種，這可能會造成瀏覽器亂碼（不正常顯示）。
為什么？因為你必須得保證所有你的訪問者都能閱讀你的內(nèi)容。
不正確的alt屬性
沒寫或者寫了沒意義。在網(wǎng)絡(luò)上可以看到非常多沒有alt屬性的<img>標簽。沒意義的alt屬性倒是不如前者常見，比如“spacer GIF used to make the layout look good”，“帶有陰影的藍色原點”, 以及“JPEG圖片，123 KB”。要記住，alt屬性在<img>和<area>里是必須的。
為什么？ 這是必須的，沒有alt，任何圖片中的信息就會被屏幕閱讀器、文本瀏覽器、搜索引擎機器人忽略，或者用戶關(guān)了圖片顯示就會顯示為X。注重圖片的alt的文字是要相關(guān)的，不要給裝飾性的圖片或者用來布局的圖片加alt屬性值，指定一個空值就可以了，如alt=""。
不合法的id和class屬性
在同一頁面里使用了多次同一id，以及在id、class和CSS選擇器中使用了非法字符。
對于CSS來說 (CSS 2.1語法和基本數(shù)據(jù)類型)：
在CSS 2.1里，標示符（包括元素名、class和ID）只能由數(shù)字、字母、ISO 10646通用字符集U 00A1及更高、連接線("-")、下劃線("_")組成，并且不能以數(shù)字開始。
對于HTML (HTML基本數(shù)據(jù)類型)：
ID和NAME必須以大寫或小寫字母開始，隨后可以接任意字母、數(shù)字、連接線("-")和下劃線("_")、冒號(":")和分號(".")。
為什么？遵循以上標準的瀏覽器可能不會按照你預(yù)期的現(xiàn)實。假如一個頁面中有多個重用的id值，那么任何使用了該值的JS就可能會失效或者錯誤。
瀏覽器探測
使用服務(wù)器端或客戶端的腳本測試訪問者的瀏覽器，然后發(fā)送或者執(zhí)行特定瀏覽器的代碼。這對于最新的瀏覽器、更新過的瀏覽器或者具備欺騙功能的UA（比如Opera默認偽裝成IE）。
為什么？增加了不必要的麻煩，并且最終會失效。
CSS缺少單位
長度值（水平和垂直的）需要單位，除非當該值為零時。不像在HTML里面，可以輸入width="10"。在CSS里, 必須寫成width:10px;（或者其他單位）。
為什么？在遵循規(guī)范的瀏覽器中會被忽略。
瀏覽器特定的CSS
樣式化滾動條、表達示和濾鏡等，都只能在IE下工作。這也不合法。
為什么？ 只在特定的瀏覽器里面正常。假如你真的必須使用IE特定的CSS，可以單獨寫一個CSS文件并且使用條件注釋，或者保證只有IE能看到那些不合法的CSS。
JavaScript依靠癥
網(wǎng)站整個依靠JavaScript。很多人都愿意使用不支持JS或者禁用JS的瀏覽器。當前的情況(W3Schools瀏覽器統(tǒng)計, TheCounter.com)表明至少有8%-10%的用戶瀏覽器不支持JS。搜索引擎機器人對待JS也不是非常友好，雖然有報告說Google正在開發(fā)支持JS的機器人。假如你的站點需要開啟JS才能導(dǎo)航，那別指望有一個很高的搜索引擎排名。
為什么？對搜索引擎不友好，難以提高排名。
Flash依靠癥
實際上并不是所有人都裝了Flash Player插件。并且大部分搜索引擎機器人都不支持Flash（Google有報告稱已經(jīng)在嘗試索引Flash文件，但是他們還是要求你的內(nèi)容和導(dǎo)航寫在HTML里），所以假如你整個網(wǎng)站或者導(dǎo)航部分是Flash的，你的網(wǎng)站一般就不會得到很高的PageRank。
為什么？搜索引擎不友好，但這并不是說你應(yīng)該放棄Flash，只是你應(yīng)該使用的比較有技巧。
JunChen注：為Flash建立搜索索引，可以參考flash 8 swf metadate應(yīng)用。
文字做成圖
把文字做成圖，又不提供更多提示信息。這不僅僅增長了訪問者下載時間，也不利于訪問者選擇和復(fù)制文字，又不利于文字放大。
為什么？不親切，增加下載時間，對搜索引擎不友好。
不友好的表單
沒有語義、難以使用的表單。要學會使用<label>標簽，<fieldset>和<legend>標簽，不要使用“Reset”按鈕。
為什么？沒有語義并且難以使用。閱讀設(shè)計易用的表單，優(yōu)秀、易用的表單，和重設(shè)和取消按鈕，看如何設(shè)計友好和易用的標單。（JunChen注：使用Reset按鈕會增加用戶思考的時間，并且誤按情況屢屢發(fā)生）
過時的HTML
多層嵌套的表格，透明的spacer圖片，<font>標簽，表現(xiàn)層的標簽。其實這個大家都已經(jīng)知道了。
為什么？增加復(fù)雜度，讓整個頁面代碼臃腫冗余，不易理解，對搜索引擎不友好。
一切向IE看齊
IE優(yōu)先，做完了再看看其他瀏覽器里如何，有問題再調(diào)整。
為什么？浪費時間，并且這個習慣不好。IE會默認接受很多錯誤的代碼，所謂“容錯性”。而其實IE也接受良好結(jié)構(gòu)的HTML，并且在其他瀏覽器里都正常，這也不會浪費很多時間。更多信息看IE真相。
不合法的HTML屬性
使用不推薦的屬性或者只能在特定瀏覽器里生效的屬性，諸如marginwidth，leftmargin，language，給<table>加height，給<img>加border等等。
為什么？不合法并且沒必要。你可以使用CSS。對于<script>標簽，使用 type，而不是language，來指明腳本語言（一般是JavaScript）。
沒有編碼的“&”
很多URI帶有變量和沒有編碼的“&”符號。這不正確，并且可能會造成很多問題。 “&”符號必須要寫成&。
為什么？在“&”符號和驗證一文中可以找到解釋和一個會引起錯誤的例子。
框架
使用框架來分割瀏覽器窗口并且加載數(shù)個獨立的文件。
為什么？首先我要說的是，框架可能比較實用，前提是你正確的使用了，比如說在內(nèi)聯(lián)網(wǎng)和一些web應(yīng)用程序中。而對于一個網(wǎng)站來說，框架有很多易用性和可用性方面的問題。比如加入收藏夾的問題、打印問題以及鏈接問題，并且對搜索引擎不友好。因為機器人在多個框架頁里面工作比較有問題。
數(shù)據(jù)表格的誤用
Table本來就是用來放置表格狀的數(shù)據(jù)，不能像布局表格一樣去寫，而是可以用很多自帶的標簽和屬性來使表格結(jié)構(gòu)化和語義化。
為什么？屏幕閱讀器和其他輔助技術(shù)在閱讀這些錯誤的數(shù)據(jù)表格時會有問題。很多文章都介紹了如何寫出結(jié)構(gòu)化的數(shù)據(jù)表格，如Web Standards Project的A table, s’il vous pla?t
Divitis和classitis
相對于<span>癖，Divitis和classitis就是用了太多不必要的Div和class。
為什么？參看“<span>癖”和“缺乏語義”部分。
過寬的固定寬度
假如你使用的是固定寬度的布局，請不要設(shè)定的過寬。說明：在這里我并不是說固定布局和浮動布局孰優(yōu)孰劣。
為什么？假如你指定的寬度寬于瀏覽者的屏幕，就等于強迫出現(xiàn)水平滾動條，那極不友好。
含糊不清的和帶表現(xiàn)含義的class、id名
如何給class或id命名，取決于它是干嘛的而不是它看起來像什么、在哪里。
為什么？為了避免你重新設(shè)計時候輕易產(chǎn)生的混淆。比如一個名為largeblue的class，你卻用來用來讓字變得“小”和“紅”，一個名為leftcol的id你卻用來顯示在右邊。
沒有背景色
沒有給body指定背景色。
為什么？很多用戶會把瀏覽器設(shè)置成其他的背景色，假如你不寫明的話。
非良好結(jié)構(gòu)（well-formed）的XHTML
使用非良好結(jié)構(gòu)（well-formed）的XHTML。
為什么？假如XHTML被服務(wù)器伺服為application/xhtml xml，嚴格的瀏覽器，如Mozilla系列，就不會顯示那些非良好結(jié)構(gòu)的XHTML。說明一下，本網(wǎng)站并沒有把所有望也伺服為application/xhtml xml，理由我在另外一篇文章里說明：Content negotiation.
text input顏色設(shè)定遺漏
只給表單區(qū)域指定背景色或者文字顏色，非凡是當行或多行文字域（input type="text"和textarea）。
為什么？ 有些人把他們的瀏覽器或操作系統(tǒng)設(shè)置成反色，默認情況下一個text input就會顯示為黑底白字，而不是你想要的白底黑字。
假如你把文字顏色設(shè)置成深灰色，又不指明背景色，在反轉(zhuǎn)了顏色的瀏覽器中，就會顯示為黑色背景的深灰色字，一團糟。反之同理。
總記住設(shè)定前景和背景色，或者記得要設(shè)定文字輸入域。
這些都是你應(yīng)該要注重的問題，很長？假如你都避免了這些錯誤，那么你已經(jīng)做得很好了。假如你已經(jīng)犯了其中的一個或多個錯誤，嗯，我真覺得有點內(nèi)疚。最后希望本文能夠幫助你在以后的工作中少犯錯誤。
原文：Web development mistakes, redux
http://www.456bereastreet.com/lab/web_development_mistakes/
翻譯：JunChen
完全不寫、寫的不正確、或放錯地方。我曾見過HTML 4.0 Transitional被用在XHTML網(wǎng)頁和框架頁中，還看到過在開頭的<html>標簽后寫DOCTYPE聲明和一些不完整的聲明。
為什么？有兩個原因。首先，文檔聲明是必須的，在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有說明。第二，瀏覽器會根據(jù)指定的文檔類型去顯示和渲染網(wǎng)頁。也就是“DOCTYPE切換(DOCTYPE switching)”。為了保持各個瀏覽器顯示網(wǎng)頁的一致性，非凡是你用了CSS，你一定會希望瀏覽器使用它們“Standards compliance mode”。關(guān)于DOCTYPE切換，可以看看使用正確的DOCTYPE!和正確的文檔類型聲明，正確的布局方式。
<span>癖
樣式化的一個常見方法就是把一段東西用<span>標簽圍起來，并且?guī)б粋�class用來設(shè)置樣式。我敢保證你經(jīng)常可以看到諸如<span class="heading">和<span class="bodytext">的代碼。
為什么？ 其實在很多情況下這完全沒必要，這樣做只會混亂標簽并且沒有什么語義。標題就用標題(h1~h6)標簽，段落就用段落(P)標簽，列表就用列表(UL, OL和DL)標簽。然后再用CSS去樣式化，假如需要的話，也可以加class和id屬性。
太多可視化思考
以為web就是WYSIWYG（所見即所得） – 一開始就想著這些東西該怎么表現(xiàn)的，而不是先去考慮邏輯結(jié)構(gòu)上怎么樣。
為什么？ 雖然大部分網(wǎng)民都是視力正常的，但是還是有殘疾人上網(wǎng)的。網(wǎng)民可能使用不同瀏覽器、不同系統(tǒng)、不同尺寸顯示器和分辨率、不同的窗口大小、不同顏色標準和文字大小，所以你不應(yīng)該把你的網(wǎng)頁做成WYSIWYG。網(wǎng)頁不是印刷品或者電視節(jié)目。要讓你的設(shè)計彈性化。
缺乏語義
沒有使用具有語義的標簽。想當然的按照圖形瀏覽器渲染的HTML樣式去寫代碼，而不是參照這些標簽的意義。
為什么？和上文提到的"<span>癖”比較接近，沒有好好的利用現(xiàn)有的HTML標簽來表達它應(yīng)該表達的語義。沒有語義化的HTML，為那些非可視化用戶代理(UA)造成了理解上的困難。而且語義化的HTML很輕易進行CSS樣式化。
編碼不一致
在服務(wù)器發(fā)送的默認編碼是一種而文檔里面又使用另外一種，這可能會造成瀏覽器亂碼（不正常顯示）。
為什么？因為你必須得保證所有你的訪問者都能閱讀你的內(nèi)容。
不正確的alt屬性
沒寫或者寫了沒意義。在網(wǎng)絡(luò)上可以看到非常多沒有alt屬性的<img>標簽。沒意義的alt屬性倒是不如前者常見，比如“spacer GIF used to make the layout look good”，“帶有陰影的藍色原點”, 以及“JPEG圖片，123 KB”。要記住，alt屬性在<img>和<area>里是必須的。
為什么？ 這是必須的，沒有alt，任何圖片中的信息就會被屏幕閱讀器、文本瀏覽器、搜索引擎機器人忽略，或者用戶關(guān)了圖片顯示就會顯示為X。注重圖片的alt的文字是要相關(guān)的，不要給裝飾性的圖片或者用來布局的圖片加alt屬性值，指定一個空值就可以了，如alt=""。
不合法的id和class屬性
在同一頁面里使用了多次同一id，以及在id、class和CSS選擇器中使用了非法字符。
對于CSS來說 (CSS 2.1語法和基本數(shù)據(jù)類型)：
在CSS 2.1里，標示符（包括元素名、class和ID）只能由數(shù)字、字母、ISO 10646通用字符集U 00A1及更高、連接線("-")、下劃線("_")組成，并且不能以數(shù)字開始。
對于HTML (HTML基本數(shù)據(jù)類型)：
ID和NAME必須以大寫或小寫字母開始，隨后可以接任意字母、數(shù)字、連接線("-")和下劃線("_")、冒號(":")和分號(".")。
為什么？遵循以上標準的瀏覽器可能不會按照你預(yù)期的現(xiàn)實。假如一個頁面中有多個重用的id值，那么任何使用了該值的JS就可能會失效或者錯誤。
瀏覽器探測
使用服務(wù)器端或客戶端的腳本測試訪問者的瀏覽器，然后發(fā)送或者執(zhí)行特定瀏覽器的代碼。這對于最新的瀏覽器、更新過的瀏覽器或者具備欺騙功能的UA（比如Opera默認偽裝成IE）。
為什么？增加了不必要的麻煩，并且最終會失效。
CSS缺少單位
長度值（水平和垂直的）需要單位，除非當該值為零時。不像在HTML里面，可以輸入width="10"。在CSS里, 必須寫成width:10px;（或者其他單位）。
為什么？在遵循規(guī)范的瀏覽器中會被忽略。
瀏覽器特定的CSS
樣式化滾動條、表達示和濾鏡等，都只能在IE下工作。這也不合法。
為什么？ 只在特定的瀏覽器里面正常。假如你真的必須使用IE特定的CSS，可以單獨寫一個CSS文件并且使用條件注釋，或者保證只有IE能看到那些不合法的CSS。
JavaScript依靠癥
網(wǎng)站整個依靠JavaScript。很多人都愿意使用不支持JS或者禁用JS的瀏覽器。當前的情況(W3Schools瀏覽器統(tǒng)計, TheCounter.com)表明至少有8%-10%的用戶瀏覽器不支持JS。搜索引擎機器人對待JS也不是非常友好，雖然有報告說Google正在開發(fā)支持JS的機器人。假如你的站點需要開啟JS才能導(dǎo)航，那別指望有一個很高的搜索引擎排名。
為什么？對搜索引擎不友好，難以提高排名。
Flash依靠癥
實際上并不是所有人都裝了Flash Player插件。并且大部分搜索引擎機器人都不支持Flash（Google有報告稱已經(jīng)在嘗試索引Flash文件，但是他們還是要求你的內(nèi)容和導(dǎo)航寫在HTML里），所以假如你整個網(wǎng)站或者導(dǎo)航部分是Flash的，你的網(wǎng)站一般就不會得到很高的PageRank。
為什么？搜索引擎不友好，但這并不是說你應(yīng)該放棄Flash，只是你應(yīng)該使用的比較有技巧。
JunChen注：為Flash建立搜索索引，可以參考flash 8 swf metadate應(yīng)用。
文字做成圖
把文字做成圖，又不提供更多提示信息。這不僅僅增長了訪問者下載時間，也不利于訪問者選擇和復(fù)制文字，又不利于文字放大。
為什么？不親切，增加下載時間，對搜索引擎不友好。
不友好的表單
沒有語義、難以使用的表單。要學會使用<label>標簽，<fieldset>和<legend>標簽，不要使用“Reset”按鈕。
為什么？沒有語義并且難以使用。閱讀設(shè)計易用的表單，優(yōu)秀、易用的表單，和重設(shè)和取消按鈕，看如何設(shè)計友好和易用的標單。（JunChen注：使用Reset按鈕會增加用戶思考的時間，并且誤按情況屢屢發(fā)生）
過時的HTML
多層嵌套的表格，透明的spacer圖片，<font>標簽，表現(xiàn)層的標簽。其實這個大家都已經(jīng)知道了。
為什么？增加復(fù)雜度，讓整個頁面代碼臃腫冗余，不易理解，對搜索引擎不友好。
一切向IE看齊
IE優(yōu)先，做完了再看看其他瀏覽器里如何，有問題再調(diào)整。
為什么？浪費時間，并且這個習慣不好。IE會默認接受很多錯誤的代碼，所謂“容錯性”。而其實IE也接受良好結(jié)構(gòu)的HTML，并且在其他瀏覽器里都正常，這也不會浪費很多時間。更多信息看IE真相。
不合法的HTML屬性
使用不推薦的屬性或者只能在特定瀏覽器里生效的屬性，諸如marginwidth，leftmargin，language，給<table>加height，給<img>加border等等。
為什么？不合法并且沒必要。你可以使用CSS。對于<script>標簽，使用 type，而不是language，來指明腳本語言（一般是JavaScript）。
沒有編碼的“&”
很多URI帶有變量和沒有編碼的“&”符號。這不正確，并且可能會造成很多問題。 “&”符號必須要寫成&。
為什么？在“&”符號和驗證一文中可以找到解釋和一個會引起錯誤的例子。
框架
使用框架來分割瀏覽器窗口并且加載數(shù)個獨立的文件。
為什么？首先我要說的是，框架可能比較實用，前提是你正確的使用了，比如說在內(nèi)聯(lián)網(wǎng)和一些web應(yīng)用程序中。而對于一個網(wǎng)站來說，框架有很多易用性和可用性方面的問題。比如加入收藏夾的問題、打印問題以及鏈接問題，并且對搜索引擎不友好。因為機器人在多個框架頁里面工作比較有問題。
數(shù)據(jù)表格的誤用
Table本來就是用來放置表格狀的數(shù)據(jù)，不能像布局表格一樣去寫，而是可以用很多自帶的標簽和屬性來使表格結(jié)構(gòu)化和語義化。
為什么？屏幕閱讀器和其他輔助技術(shù)在閱讀這些錯誤的數(shù)據(jù)表格時會有問題。很多文章都介紹了如何寫出結(jié)構(gòu)化的數(shù)據(jù)表格，如Web Standards Project的A table, s’il vous pla?t
Divitis和classitis
相對于<span>癖，Divitis和classitis就是用了太多不必要的Div和class。
為什么？參看“<span>癖”和“缺乏語義”部分。
過寬的固定寬度
假如你使用的是固定寬度的布局，請不要設(shè)定的過寬。說明：在這里我并不是說固定布局和浮動布局孰優(yōu)孰劣。
為什么？假如你指定的寬度寬于瀏覽者的屏幕，就等于強迫出現(xiàn)水平滾動條，那極不友好。
含糊不清的和帶表現(xiàn)含義的class、id名
如何給class或id命名，取決于它是干嘛的而不是它看起來像什么、在哪里。
為什么？為了避免你重新設(shè)計時候輕易產(chǎn)生的混淆。比如一個名為largeblue的class，你卻用來用來讓字變得“小”和“紅”，一個名為leftcol的id你卻用來顯示在右邊。
沒有背景色
沒有給body指定背景色。
為什么？很多用戶會把瀏覽器設(shè)置成其他的背景色，假如你不寫明的話。
非良好結(jié)構(gòu)（well-formed）的XHTML
使用非良好結(jié)構(gòu)（well-formed）的XHTML。
為什么？假如XHTML被服務(wù)器伺服為application/xhtml xml，嚴格的瀏覽器，如Mozilla系列，就不會顯示那些非良好結(jié)構(gòu)的XHTML。說明一下，本網(wǎng)站并沒有把所有望也伺服為application/xhtml xml，理由我在另外一篇文章里說明：Content negotiation.
text input顏色設(shè)定遺漏
只給表單區(qū)域指定背景色或者文字顏色，非凡是當行或多行文字域（input type="text"和textarea）。
為什么？ 有些人把他們的瀏覽器或操作系統(tǒng)設(shè)置成反色，默認情況下一個text input就會顯示為黑底白字，而不是你想要的白底黑字。
假如你把文字顏色設(shè)置成深灰色，又不指明背景色，在反轉(zhuǎn)了顏色的瀏覽器中，就會顯示為黑色背景的深灰色字，一團糟。反之同理。
總記住設(shè)定前景和背景色，或者記得要設(shè)定文字輸入域。
這些都是你應(yīng)該要注重的問題，很長？假如你都避免了這些錯誤，那么你已經(jīng)做得很好了。假如你已經(jīng)犯了其中的一個或多個錯誤，嗯，我真覺得有點內(nèi)疚。最后希望本文能夠幫助你在以后的工作中少犯錯誤。
原文：Web development mistakes, redux
http://www.456bereastreet.com/lab/web_development_mistakes/
翻譯：JunChen
相關(guān)Web標準教程：
- 相關(guān)鏈接：
- 教程說明：
Web標準教程-Webdevelopmentmistakes-web設(shè)計與開發(fā)常見錯誤
。