Webdevelopmentmistakes-web設(shè)計(jì)與開發(fā)常見錯(cuò)誤_Web標(biāo)準(zhǔn)教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

混淆文檔類型(DOCTYPE)

　　完全不寫、寫的不正確、或放錯(cuò)地方。我曾見過HTML 4.0 Transitional被用在XHTML網(wǎng)頁和框架頁中，還看到過在開頭的<html>標(biāo)簽后寫DOCTYPE聲明和一些不完整的聲明。
為什么？有兩個(gè)原因。首先，文檔聲明是必須的，在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有說明。第二，瀏覽器會(huì)根據(jù)指定的文檔類型去顯示和渲染網(wǎng)頁。也就是“DOCTYPE切換(DOCTYPE switching)”。為了保持各個(gè)瀏覽器顯示網(wǎng)頁的一致性，非凡是你用了CSS，你一定會(huì)希望瀏覽器使用它們“Standards compliance mode”。關(guān)于DOCTYPE切換，可以看看使用正確的DOCTYPE!和正確的文檔類型聲明，正確的布局方式。

<span>癖

　　樣式化的一個(gè)常見方法就是把一段東西用<span>標(biāo)簽圍起來，并且?guī)б粋€(gè)class用來設(shè)置樣式。我敢保證你經(jīng)常可以看到諸如<span class="heading">和<span class="bodytext">的代碼。
　　為什么？其實(shí)在很多情況下這完全沒必要，這樣做只會(huì)混亂標(biāo)簽并且沒有什么語義。標(biāo)題就用標(biāo)題(h1~h6)標(biāo)簽，段落就用段落(P)標(biāo)簽，列表就用列表(UL, OL和DL)標(biāo)簽。然后再用CSS去樣式化，假如需要的話，也可以加class和id屬性。

太多可視化思考

　　以為web就是WYSIWYG（所見即所得） – 一開始就想著這些東西該怎么表現(xiàn)的，而不是先去考慮邏輯結(jié)構(gòu)上怎么樣。
　　為什么？雖然大部分網(wǎng)民都是視力正常的，但是還是有殘疾人上網(wǎng)的。網(wǎng)民可能使用不同瀏覽器、不同系統(tǒng)、不同尺寸顯示器和分辨率、不同的窗口大小、不同顏色標(biāo)準(zhǔn)和文字大小，所以你不應(yīng)該把你的網(wǎng)頁做成WYSIWYG。網(wǎng)頁不是印刷品或者電視節(jié)目。要讓你的設(shè)計(jì)彈性化。

缺乏語義

　　沒有使用具有語義的標(biāo)簽。想當(dāng)然的按照?qǐng)D形瀏覽器渲染的HTML樣式去寫代碼，而不是參照這些標(biāo)簽的意義。
　　為什么？和上文提到的"<span>癖”比較接近，沒有好好的利用現(xiàn)有的HTML標(biāo)簽來表達(dá)它應(yīng)該表達(dá)的語義。沒有語義化的HTML，為那些非可視化用戶代理(UA)造成了理解上的困難。而且語義化的HTML很輕易進(jìn)行CSS樣式化。

編碼不一致

　　在服務(wù)器發(fā)送的默認(rèn)編碼是一種而文檔里面又使用另外一種，這可能會(huì)造成瀏覽器亂碼（不正常顯示）。
　　為什么？因?yàn)槟惚仨毜帽ＷC所有你的訪問者都能閱讀你的內(nèi)容。

不正確的alt屬性

　　沒寫或者寫了沒意義。在網(wǎng)絡(luò)上可以看到非常多沒有alt屬性的<img>標(biāo)簽。沒意義的alt屬性倒是不如前者常見，比如“spacer GIF used to make the layout look good”，“帶有陰影的藍(lán)色原點(diǎn)”, 以及“JPEG圖片，123 KB”。要記住，alt屬性在<img>和<area>里是必須的。
　　為什么？這是必須的，沒有alt，任何圖片中的信息就會(huì)被屏幕閱讀器、文本瀏覽器、搜索引擎機(jī)器人忽略，或者用戶關(guān)了圖片顯示就會(huì)顯示為X。注重圖片的alt的文字是要相關(guān)的，不要給裝飾性的圖片或者用來布局的圖片加alt屬性值，指定一個(gè)空值就可以了，如alt=""。

不合法的id和class屬性

　　在同一頁面里使用了多次同一id，以及在id、class和CSS選擇器中使用了非法字符。
　　對(duì)于CSS來說 (CSS 2.1語法和基本數(shù)據(jù)類型)：
　　在CSS 2.1里，標(biāo)示符（包括元素名、class和ID）只能由數(shù)字、字母、ISO 10646通用字符集U 00A1及更高、連接線("-")、下劃線("_")組成，并且不能以數(shù)字開始。
　　對(duì)于HTML (HTML基本數(shù)據(jù)類型)：
　　ID和NAME必須以大寫或小寫字母開始，隨后可以接任意字母、數(shù)字、連接線("-")和下劃線("_")、冒號(hào)(":")和分號(hào)(".")。
　　為什么？遵循以上標(biāo)準(zhǔn)的瀏覽器可能不會(huì)按照你預(yù)期的現(xiàn)實(shí)。假如一個(gè)頁面中有多個(gè)重用的id值，那么任何使用了該值的JS就可能會(huì)失效或者錯(cuò)誤。

瀏覽器探測

　　使用服務(wù)器端或客戶端的腳本測試訪問者的瀏覽器，然后發(fā)送或者執(zhí)行特定瀏覽器的代碼。這對(duì)于最新的瀏覽器、更新過的瀏覽器或者具備欺騙功能的UA（比如Opera默認(rèn)偽裝成IE）。
　　為什么？增加了不必要的麻煩，并且最終會(huì)失效。

CSS缺少單位

　　長度值（水平和垂直的）需要單位，除非當(dāng)該值為零時(shí)。不像在HTML里面，可以輸入width="10"。在CSS里, 必須寫成width:10px;（或者其他單位）。
　　為什么？在遵循規(guī)范的瀏覽器中會(huì)被忽略。

瀏覽器特定的CSS

　　樣式化滾動(dòng)條、表達(dá)示和濾鏡等，都只能在IE下工作。這也不合法。
　　為什么？只在特定的瀏覽器里面正常。假如你真的必須使用IE特定的CSS，可以單獨(dú)寫一個(gè)CSS文件并且使用條件注釋，或者保證只有IE能看到那些不合法的CSS。

JavaScript依靠癥

　　網(wǎng)站整個(gè)依靠JavaScript。很多人都愿意使用不支持JS或者禁用JS的瀏覽器。當(dāng)前的情況(W3Schools瀏覽器統(tǒng)計(jì), TheCounter.com)表明至少有8%-10%的用戶瀏覽器不支持JS。搜索引擎機(jī)器人對(duì)待JS也不是非常友好，雖然有報(bào)告說Google正在開發(fā)支持JS的機(jī)器人。假如你的站點(diǎn)需要開啟JS才能導(dǎo)航，那別指望有一個(gè)很高的搜索引擎排名。
　　為什么？對(duì)搜索引擎不友好，難以提高排名。

Flash依靠癥

　　實(shí)際上并不是所有人都裝了Flash Player插件。并且大部分搜索引擎機(jī)器人都不支持Flash（Google有報(bào)告稱已經(jīng)在嘗試索引Flash文件，但是他們還是要求你的內(nèi)容和導(dǎo)航寫在HTML里），所以假如你整個(gè)網(wǎng)站或者導(dǎo)航部分是Flash的，你的網(wǎng)站一般就不會(huì)得到很高的PageRank。
　　為什么？搜索引擎不友好，但這并不是說你應(yīng)該放棄Flash，只是你應(yīng)該使用的比較有技巧。
　　JunChen注：為Flash建立搜索索引，可以參考flash 8 swf metadate應(yīng)用。

文字做成圖

　　把文字做成圖，又不提供更多提示信息。這不僅僅增長了訪問者下載時(shí)間，也不利于訪問者選擇和復(fù)制文字，又不利于文字放大。
　　為什么？不親切，增加下載時(shí)間，對(duì)搜索引擎不友好。

不友好的表單
　　沒有語義、難以使用的表單。要學(xué)會(huì)使用<label>標(biāo)簽，<fieldset>和<legend>標(biāo)簽，不要使用“Reset”按鈕。
　　為什么？沒有語義并且難以使用。閱讀設(shè)計(jì)易用的表單，優(yōu)秀、易用的表單，和重設(shè)和取消按鈕，看如何設(shè)計(jì)友好和易用的標(biāo)單。（JunChen注：使用Reset按鈕會(huì)增加用戶思考的時(shí)間，并且誤按情況屢屢發(fā)生）

過時(shí)的HTML

　　多層嵌套的表格，透明的spacer圖片，<font>標(biāo)簽，表現(xiàn)層的標(biāo)簽。其實(shí)這個(gè)大家都已經(jīng)知道了。
為什么？增加復(fù)雜度，讓整個(gè)頁面代碼臃腫冗余，不易理解，對(duì)搜索引擎不友好。

一切向IE看齊

　　IE優(yōu)先，做完了再看看其他瀏覽器里如何，有問題再調(diào)整。
　　為什么？浪費(fèi)時(shí)間，并且這個(gè)習(xí)慣不好。IE會(huì)默認(rèn)接受很多錯(cuò)誤的代碼，所謂“容錯(cuò)性”。而其實(shí)IE也接受良好結(jié)構(gòu)的HTML，并且在其他瀏覽器里都正常，這也不會(huì)浪費(fèi)很多時(shí)間。更多信息看IE真相。

不合法的HTML屬性

　　使用不推薦的屬性或者只能在特定瀏覽器里生效的屬性，諸如marginwidth，leftmargin，language，給<table>加height，給<img>加border等等。
　　為什么？不合法并且沒必要。你可以使用CSS。對(duì)于<script>標(biāo)簽，使用 type，而不是language，來指明腳本語言（一般是JavaScript）。

沒有編碼的“&”

　　很多URI帶有變量和沒有編碼的“&”符號(hào)。這不正確，并且可能會(huì)造成很多問題。 “&”符號(hào)必須要寫成&。
　　為什么？在“&”符號(hào)和驗(yàn)證一文中可以找到解釋和一個(gè)會(huì)引起錯(cuò)誤的例子。

框架

　　使用框架來分割瀏覽器窗口并且加載數(shù)個(gè)獨(dú)立的文件。
　　為什么？首先我要說的是，框架可能比較實(shí)用，前提是你正確的使用了，比如說在內(nèi)聯(lián)網(wǎng)和一些web應(yīng)用程序中。而對(duì)于一個(gè)網(wǎng)站來說，框架有很多易用性和可用性方面的問題。比如加入收藏夾的問題、打印問題以及鏈接問題，并且對(duì)搜索引擎不友好。因?yàn)闄C(jī)器人在多個(gè)框架頁里面工作比較有問題。

數(shù)據(jù)表格的誤用

　　Table本來就是用來放置表格狀的數(shù)據(jù)，不能像布局表格一樣去寫，而是可以用很多自帶的標(biāo)簽和屬性來使表格結(jié)構(gòu)化和語義化。
　　為什么？屏幕閱讀器和其他輔助技術(shù)在閱讀這些錯(cuò)誤的數(shù)據(jù)表格時(shí)會(huì)有問題。很多文章都介紹了如何寫出結(jié)構(gòu)化的數(shù)據(jù)表格，如Web Standards Project的A table, s’il vous pla?t

Divitis和classitis

　　相對(duì)于<span>癖，Divitis和classitis就是用了太多不必要的Div和class。
　　為什么？參看“<span>癖”和“缺乏語義”部分。

過寬的固定寬度

　　假如你使用的是固定寬度的布局，請(qǐng)不要設(shè)定的過寬。說明：在這里我并不是說固定布局和浮動(dòng)布局孰優(yōu)孰劣。
　　為什么？假如你指定的寬度寬于瀏覽者的屏幕，就等于強(qiáng)迫出現(xiàn)水平滾動(dòng)條，那極不友好。

含糊不清的和帶表現(xiàn)含義的class、id名

　　如何給class或id命名，取決于它是干嘛的而不是它看起來像什么、在哪里。
　　為什么？為了避免你重新設(shè)計(jì)時(shí)候輕易產(chǎn)生的混淆。比如一個(gè)名為largeblue的class，你卻用來用來讓字變得“小”和“紅”，一個(gè)名為leftcol的id你卻用來顯示在右邊。

沒有背景色

　　沒有給body指定背景色。
　　為什么？很多用戶會(huì)把瀏覽器設(shè)置成其他的背景色，假如你不寫明的話。

非良好結(jié)構(gòu)（well-formed）的XHTML

　　使用非良好結(jié)構(gòu)（well-formed）的XHTML。
　　為什么？假如XHTML被服務(wù)器伺服為application/xhtml xml，嚴(yán)格的瀏覽器，如Mozilla系列，就不會(huì)顯示那些非良好結(jié)構(gòu)的XHTML。說明一下，本網(wǎng)站并沒有把所有望也伺服為application/xhtml xml，理由我在另外一篇文章里說明：Content negotiation.

text input顏色設(shè)定遺漏

　　只給表單區(qū)域指定背景色或者文字顏色，非凡是當(dāng)行或多行文字域（input type="text"和textarea）。
為什么？有些人把他們的瀏覽器或操作系統(tǒng)設(shè)置成反色，默認(rèn)情況下一個(gè)text input就會(huì)顯示為黑底白字，而不是你想要的白底黑字。
　　假如你把文字顏色設(shè)置成深灰色，又不指明背景色，在反轉(zhuǎn)了顏色的瀏覽器中，就會(huì)顯示為黑色背景的深灰色字，一團(tuán)糟。反之同理。
　　總記住設(shè)定前景和背景色，或者記得要設(shè)定文字輸入域。
　　這些都是你應(yīng)該要注重的問題，很長？假如你都避免了這些錯(cuò)誤，那么你已經(jīng)做得很好了。假如你已經(jīng)犯了其中的一個(gè)或多個(gè)錯(cuò)誤，嗯，我真覺得有點(diǎn)內(nèi)疚。最后希望本文能夠幫助你在以后的工作中少犯錯(cuò)誤。

　　原文：Web development mistakes, redux
　　http://www.456bereastreet.com/lab/web_development_mistakes/
　　翻譯：JunChen