標準建站之web設計與開發常見錯誤

來源:互聯網
上載者:User
web|標準|錯誤|設計 混淆文件類型(DOCTYPE)

  完全不寫、寫的不正確、或放錯地方。我曾見過HTML 4.0 Transitional被用在XHTML網頁和架構頁中,還看到過在開頭的<html>標籤後寫DOCTYPE聲明和一些不完整的聲明。
為什嗎?有兩個原因。首先,文檔聲明是必須的,在W3C HTML 4.01 spec和W3C XHTML 1.0 spec裡都有說明。第二,瀏覽器會根據指定的文件類型去顯示和渲染網頁。也就是“DOCTYPE切換(DOCTYPE switching)”。為了保持各個瀏覽器顯示網頁的一致性,特別是你用了CSS,你一定會希望瀏覽器使用它們“Standards compliance mode”。關於DOCTYPE切換,可以看看使用正確的DOCTYPE!和正確的文件類型聲明,正確的布局方式。 

<span>癖

  樣式化的一個常見方法就是把一段東西用<span>標籤圍起來,並且帶一個class用來設定樣式。我敢保證你經常可以看到諸如<span class="heading">和<span class="bodytext">的代碼。
  為什嗎? 其實在很多情況下這完全沒必要,這樣做只會混亂標籤並且沒有什麼語義。標題就用標題(h1~h6)標籤,段落就用段落(P)標籤,列表就用列表(UL, OL和DL)標籤。然後再用CSS去樣式化,如果需要的話,也可以加class和id屬性。 

太多可視化思考 

  以為web就是WYSIWYG(所見即所得 (WYSIWYG)) – 一開始就想著這些東西該怎麼表現的,而不是先去考慮邏輯結構上怎麼樣。 
  為什嗎? 雖然大部分網民都是視力正常的,但是還是有殘疾人上網的。網民可能使用不同瀏覽器、不同系統、不同尺寸顯示器和解析度、不同的視窗大小、不同顏色標準和文字大小,所以你不應該把你的網頁做成WYSIWYG。網頁不是印刷品或者電視節目。要讓你的設計彈性化。 

缺乏語義
 
  沒有使用具有語義的標籤。想當然的按照圖形瀏覽器渲染的HTML樣式去寫代碼,而不是參照這些標籤的意義。 
  為什嗎?和上文提到的"<span>癖”比較接近,沒有好好的利用現有的HTML標籤來表達它應該表達的語義。沒有語義化的HTML,為那些非可視化使用者代理程式(UA)造成了理解上的困難。而且語義化的HTML很容易進行CSS樣式化。
 
編碼不一致 

  在伺服器發送的預設編碼是一種而文檔裡面又使用另外一種,這可能會造成瀏覽器亂碼(不正常顯示)。 
  為什嗎?因為你必須得保證所有你的訪問者都能閱讀你的內容。 

不正確的alt屬性 

  沒寫或者寫了沒意義。在網路上可以看到非常多沒有alt屬性的<img>標籤。沒意義的alt屬性倒是不如前者常見,比如“spacer GIF used to make the layout look good”,“帶有陰影的藍色原點”, 以及“JPEG圖片,123 KB”。要記住,alt屬性在<img>和<area>裡是必須的。 
  為什嗎? 這是必須的,沒有alt,任何圖片中的資訊就會被螢幕助讀程式、文本瀏覽器、搜尋引擎機器人忽略,或者使用者關了圖片顯示就會顯示為X。注意圖片的alt的文字是要相關的,不要給裝飾性的圖片或者用來布局的圖片加alt屬性值,指定一個空值就可以了,如alt=""。 

不合法的id和class屬性 

  在同一頁面裡使用了多次同一id,以及在id、class和CSS選取器中使用了非法字元。
  對於CSS來說 (CSS 2.1文法和基礎資料型別 (Elementary Data Type)):
  在CSS 2.1裡,標示符(包括元素名、class和ID)只能由數字、字母、ISO 10646通用字元集U+00A1及更高、連接線("-")、底線("_")組成,並且不能以數字開始。
  對於HTML (HTML基礎資料型別 (Elementary Data Type)):
  ID和NAME必須以大寫或小寫字母開始,隨後可以接任意字母、數字、連接線("-")和底線("_")、冒號(":")和分號(".")。
  為什嗎?遵循以上標準的瀏覽器可能不會按照你預期的現實。如果一個頁面中有多個重用的id值,那麼任何使用了該值的JS就可能會失效或者錯誤。 

瀏覽器探測 

  使用伺服器端或用戶端的指令碼測試訪問者的瀏覽器,然後發送或者執行特定瀏覽器的代碼。這對於最新的瀏覽器、更新過的瀏覽器或者具備欺騙功能的UA(比如Opera預設偽裝成IE)。 
  為什嗎?增加了不必要的麻煩,並且最終會失效。 

CSS缺少單位 

  長度值(水平和垂直的)需要單位,除非當該值為零時。不像在HTML裡面,可以輸入width="10"。在CSS裡, 必須寫成width:10px;(或者其他單位)。 
  為什嗎?在遵循規範的瀏覽器中會被忽略。 

瀏覽器特定的CSS 

  樣式化捲軸、表達示和濾鏡等,都只能在IE下工作。這也不合法。 
  為什嗎? 只在特定的瀏覽器裡面正常。如果你真的必須使用IE特定的CSS,可以單獨寫一個CSS檔案並且使用條件注釋,或者保證只有IE能看到那些不合法的CSS。
 
JavaScript依賴症 

  網站整個依靠JavaScript。很多人都願意使用不支援JS或者禁用JS的瀏覽器。當前的情況(W3Schools瀏覽器統計, TheCounter.com)表明至少有8%-10%的使用者瀏覽器不支援JS。搜尋引擎機器人對待JS也不是非常友好,雖然有報告說Google正在開發支援JS的機器人。如果你的網站需要開啟JS才能導航,那別指望有一個很高的搜尋引擎排名。 
  為什嗎?對搜尋引擎不友好,難以提高排名。 

Flash依賴症 

  實際上並不是所有人都裝了Flash Player外掛程式。並且大部分搜尋引擎機器人都不支援Flash(Google有報告稱已經在嘗試索引Flash檔案,但是他們還是要求你的內容和導航寫在HTML裡),所以如果你整個網站或者導航部分是Flash的,你的網站一般就不會得到很高的PageRank。 
  為什嗎?搜尋引擎不友好,但這並不是說你應該放棄Flash,只是你應該使用的比較有技巧。 
  JunChen註:為Flash建立搜尋索引,可以參考flash 8 swf metadate應用。 

文字做成圖 

  把文字做成圖,又不提供更多提示資訊。這不僅僅增長了訪問者下載時間,也不利於訪問者選擇和複製文字,又不利於文字放大。 
  為什嗎?不親切,增加下載時間,對搜尋引擎不友好。 

不友好的表單 
  沒有語義、難以使用的表單。要學會使用<label>標籤,<fieldset>和<legend>標籤,不要使用“Reset”按鈕。 
  為什嗎?沒有語義並且難以使用。閱讀設計易用的表單,優秀、易用的表單,和重設和取消按鈕,看如何設計友好和易用的標單。(JunChen註:使用Reset按鈕會增加使用者思考的時間,並且誤按情況屢屢發生) 

過時的HTML 

  多層嵌套的表格,透明的spacer圖片,<font>標籤,表現層的標籤。其實這個大家都已經知道了。 
為什嗎?增加複雜度,讓整個頁面代碼臃腫冗餘,不易理解,對搜尋引擎不友好。 

一切向IE看齊 

  IE優先,做完了再看看其他瀏覽器裡如何,有問題再調整。 
  為什嗎?浪費時間,並且這個習慣不好。IE會預設接受很多錯誤的代碼,所謂“容錯性”。而其實IE也接受良好結構的HTML,並且在其他瀏覽器裡都正常,這也不會浪費很多時間。更多資訊看IE真相。 

不合法的HTML 屬性 

  使用不推薦的屬性或者只能在特定瀏覽器裡生效的屬性,諸如marginwidth,leftmargin,language,給<table>加height,給<img>加border等等。 
  為什嗎?不合法並且沒必要。你可以使用CSS。對於<script>標籤,使用 type,而不是language,來指明指令碼語言(一般是JavaScript)。 

沒有編碼的“&” 

  很多URI帶有變數和沒有編碼的“&”符號。這不正確,並且可能會造成很多問題。 “&”符號必須要寫成&。 
  為什嗎?在“&”符號和驗證一文中可以找到解釋和一個會引起錯誤的例子。 

架構 

  使用架構來分割瀏覽器視窗並且載入數個獨立的檔案。 
  為什嗎?首先我要說的是,架構可能比較實用,前提是你正確的使用了,比如說在內連網和一些web應用程式中。而對於一個網站來說,架構有很多易用性和可用性方面的問題。比如加入收藏夾的問題、列印問題以及連結問題,並且對搜尋引擎不友好。因為機器人在多個架構頁裡面工作比較有問題。 

資料表格的誤用 

  Table本來就是用來放置表格狀的資料,不能像表格版面配置一樣去寫,而是可以用很多內建的標籤和屬性來使表格結構化和語義化。 
  為什嗎?螢幕助讀程式和其他輔助技術在閱讀這些錯誤的資料表格時會有問題。很多文章都介紹了如何寫出結構化的資料表格,如Web Standards Project的A table, s’il vous plaît 

Divitis和classitis 

  相對於<span>癖,Divitis和classitis就是用了太多不必要的Div和class。 
  為什嗎?參看“<span>癖”和“缺乏語義”部分。 

過寬的固定寬度 

  如果你使用的是固定寬度的布局,請不要設定的過寬。說明:在這裡我並不是說固定式配置和浮動布局孰優孰劣。 
  為什嗎?如果你指定的寬度寬於瀏覽者的螢幕,就等於強迫出現水平捲軸,那極不友好。 

含糊不清的和帶表現含義的class、id名 

  如何給class或id命名,取決於它是幹嘛的而不是它看起來像什麼、在哪裡。 
  為什嗎?為了避免你重新設計時候容易產生的混淆。比如一個名為largeblue的class,你卻用來用來讓字變得“小”和“紅”,一個名為leftcol的id你卻用來顯示在右邊。 

沒有背景色 

  沒有給body指定背景色。 
  為什嗎?很多使用者會把瀏覽器設定成其他的背景色,如果你不寫明的話。 

非良好結構(well-formed)的XHTML 

  使用非良好結構(well-formed)的XHTML。
  為什嗎?如果XHTML被伺服器伺服為application/xhtml+xml,嚴格的瀏覽器,如Mozilla系列,就不會顯示那些非良好結構的XHTML。說明一下,本網站並沒有把所有望也伺服為application/xhtml+xml,理由我在另外一篇文章裡說明:Content negotiation. 

text input顏色設定遺漏 

  只給表單區域指定背景色或者文字顏色,特別是當行或多行文字域(input type="text"和textarea)。
為什嗎? 有些人把他們的瀏覽器或作業系統設定成反色,預設情況下一個text input就會顯示為黑底白字,而不是你想要的白底黑字。
  如果你把文字顏色設定成深灰色,又不指明背景色,在反轉了顏色的瀏覽器中,就會顯示為黑色背景的深灰色字,一團糟。反之同理。
  總記住設定前景和背景色,或者記得要設定文字輸入欄位。
  這些都是你應該要注意的問題,很長?如果你都避免了這些錯誤,那麼你已經做得很好了。如果你已經犯了其中的一個或多個錯誤,嗯,我真覺得有點內疚。最後希望本文能夠協助你在以後的工作中少犯錯誤。

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

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。