web标準頁面開發必備系列

試總結：web标準頁面必備系列 　　今天在群裡，熊貓君提議整理一個文章，一方面為初學者提供一個入門指南，另一方面也象借此和已經在從事這個行業進行一點交流。下面是我從事這個行當多年的一些經驗總結，希望抛磚引玉，大家不吝賜教。 １、必備工具 　　其實web标準并不是很複雜的技術，實作web标準的工具也很簡單，說白了，隻要可以進行純文字編輯的軟體，都可以作為代碼編寫的gon工具。例如記事本、UltraEdit甚至CuteFTP的編輯器（象我這種懶人有時候就用那玩藝兒直接線上編輯，汗）。 　　而另一些較專業軟體會提供高亮顯示代碼（前面提到的UltraEdit也具有此項功能）、代碼提示、自動閉合标簽等等功能，使用起來會大大提高工作效 率。如DreamWeaver、MS Expression、EditPlus等等，這些編輯軟體目前是絕對的主流，無論是初學者上手容易還是專業人士提高效率都是不錯的選擇。 　　再說說浏覽器環境，目前一台機器同時裝IE、Firefox、Opera、Safari已經不是難事，而IE7 Standalone和MultipleIE的問世也讓IE7和低版本IE并存成為可能。推薦浏覽器環境——本機安裝IE7、FF、Opera、 Safari，同時安裝MultipleIE。從我個人的使用經驗，IE7 Standalone存在一定的缺陷，有可能導緻本機安裝的IE6無法正常使用。 　　除了編輯器以外，還有就是必不可少的調試工具啦，首推當然是Firefox下的Firebug！IE下目前還沒有與之相當的調試工具，比較好的有IE development toobar、IE Debugbar等等，不過和Firebug完全不是一個檔次的東西，隻能說勉強湊合用。 ２、必備的HTML/XHTML基礎 　　說到基礎，其實正是我最想談的。從論壇許多的文章也可以看出來，大多數問題的産生是由于制作者本身基礎的不牢固。而HTML/XHTML作為基礎中的 基礎，更是許多人的薄弱環節。然而很多人還是喜歡一上來就問布局或者Hack這些技巧方面的問題，其實很多問題如果本人的基礎牢固了，幾乎不能被稱之為問 題。 　　web标準必備的HTML/XHTML基礎，大緻有幾個方面： 　　1、每個标簽的語義，這一點是網頁标準的根本。而整個網頁标準化幾乎都是圍繞着這一點而來的，明确了語義，才能選擇合适的标簽；明确了語義，才能建構 可讀性良好的結構。例如<h1>就是網站最高等級的标題，它不應該放在<h2>層級之下；例如<fieldset> 和<legend>，主要用于表單元素分組，不應該因為它那個漂亮的邊框就用來表現新聞清單。 　　2、每個标簽的初始樣式，現在有很多重置标簽樣式就是針對這一點，因為每個标簽在不同浏覽器下的初始樣式是不同的，而重置樣式是為了更好地實作網頁兼 容性。從我個人的角度來說，不推薦初學者一上來就了解如何重置樣式，而應該從了解标簽的初始樣式入手，先了解了這些，才能明白每一行重置樣式的代碼的真正 含義。 　　3、标簽的正确嵌套規則，同時還必須了解的是哪些标簽屬于塊元素，而哪些屬于行内元素。這是即使是高手也會經常忽略的方面，例如本人（^_^）。今天看到 http://bbs.blueidea.com/thread-2834342-1-1.html這 個文章的時候，才意識到，原來之前對dt、dd的嵌套規則了解有誤，二者不能一視同仁。HTML/XHTML的嵌套規則并不算簡單，常用的标簽不過三十個 上下，就有大約二十種不同的嵌套規則，稍不留神就會出錯。雖然不嚴格遵循并不會影響頁面的表現，但養成一個良好的習慣是很重要的，它往往能決定你在這條路 上可以走多遠。 　　4、标簽的屬性。這個又要分為兩方面，一是符合标準的常用屬性及對應的值，例如<table>的summary屬性、< th><td>的scope屬性、<label>的for屬性等等；二是标準強制要求的屬性，例如圖檔的alt屬性、 form的action屬性、textfield的col屬性和row屬性等等。 　　HTML/XHTML基礎，雖然可以分開成多個方面講，但實際關于它們的知識往往是綜合在一起的，大多數相關的手冊幾乎都有詳盡的介紹。對于這方面知識的學習，除了看相關手冊外，多把自己的網頁拿去w3c做校驗也是不錯的方法。 ３、必須了解的CSS知識 　　CSS是标準化最吸引人的地方，也是時下讨論最多的話題，市面上的相關書籍也在web标準類裡占據壓倒性的比重，甚至有些人（包括一些用人機關）認為CSS就是網頁标準。這種過于誇大CSS作用的觀點固然是錯誤的，但CSS對于網頁标準的重要性卻也可見一斑。 　　CSS相關的知識、技巧很多，從知識的必備性方面來講，以下幾個方面是我認為最重要的： 　　1、布局。布局是表現層技術的基礎，任何表現層的東西都是基于布局之上的。利用CSS布局的方法有很多種，例如float、絕對定位、負margin 等等。每一種布局都有着各自的優勢和局限性，從适性最廣來講顯然是float最佳，也最為常用，但清除浮動往往是讓人頭疼的問題。絕對定位的網頁抗壓性 好，但自由度低，而且渲染效率最差。負margin是最不破壞文檔流的辦法，但在對負值支援不佳的IE下往往會有靈異表現。關于布局方面的知識，建議看一 下webflash的《徹底弄懂CSS盒子模式》系列文章，個人認為相關知識的文章尚無出其右者。 　　2、IE下的Haslayout渲染模式。其實hack是許多标準工程師所深惡痛絕的東西，但在浏覽器相容性要求越來越高的今天，hack卻往往是一 種無奈之舉。而深入了解IE的Haslayout渲染模式，就會明白許多hack的來由，以及許多相容性問題的産生之源。推薦閱讀——譯文On having layout。然而HasLayout問題之多，絕非一兩篇文章所能概括，通過閱讀文章，了解其中的原理，再舉一反三，很多問題就會迎刃而解了。 　　3、符合标準的CSS規則。關于這一點，我可以不負責任地說，數以千萬計的網站，其CSS完全符合标準的，所占比重不會超過1%。這并不是一個悲觀的 估計，即使是w3c推薦的一些網站，例如ESPN，他們的CSS也時常會通不過校驗。CSS的許多規則的确令CSSer們非常不适，例如 background和color，這兩個屬性絕大多數人都是分開來使用的，而w3c标準卻規定兩者必須“生則同生，死則同死”。還有就是各個浏覽器的專 有屬性，在實作一些效果時是最簡單有效的。這種時候我們往往會選擇放棄标準，但暫時的放棄不意味着無視。今天知道我們哪些行為是錯誤的，以及為什麼要用錯 誤的方法，明天改正起來就不會太難。 　　4、提高網站性能的技巧，如有助于SEO的以圖代字、用盡量少和小容量的圖檔實作圓角表格、用background-position實作圖檔切換以提高渲染效率等等。從對網站的幫助角度來看，這些技巧遠比浏覽器hack更值得掌握。 　　5、了解一點js知識。這個和CSS關系不是那麼密切，但經常看到很多人鑽牛角尖，用js可以非常簡單實作的效果，非要用CSS去勉強實作。例如将子 菜單放在連結裡，通過:hover觸發。又比如多列等高布局的實作。這已經是行為層的範疇了，為什麼還非要用表現層來實作呢？當然這裡并不是說所有CSS 不容易實作的都往js裡扔，而是要了解一下雙方的技術特點，合理地選用最佳方案。 ４、必備的網站樣式管理技巧 　　1、規範化的命名與合理的代碼重用性，也就是ID和class。對不起，這裡又要老生常談一下，因為昨天剛剛又看到一個通篇沒有用一個ID的網站。 ID和class是屬于結構層的，不過CSS的調用卻幾乎都要通過ID和class來實作。但是，ID和class不僅僅是為了調用CSS樣式而存在的。 恰恰相反，是良好的ID和class建構的結構給了CSS大展身手的舞台。搞反了彼此關系，其實還是表現主導結構的思路，也就和滿螢幕的table沒有本 質差別。理清了ID、class和CSS的關系，再來談命名，命名其實隻有一個基本原則，就是結構化。當然，在結構化之餘，body、架構、子產品之間的命 名如能以某種形式加以差別（我個人習慣是加不同字首），會讓代碼更加清晰。 　　2、樣式檔案的管理，也就是如何存儲網站的樣式檔案。如果是一個很小的網站，把所有樣式存在一個檔案中也是沒有問題的。但大網站的CSS往往幾十上百 k，全部存在一個檔案裡不但影響網頁加載，也不利于修改維護。如何分割CSS，需要事先做好規劃，無論是按欄目按功能還是按層級，要根據自己網站的特點。 對必備工具的補充 最重要的工具Firebug，我隻能說他是一個很優秀的WEB開發調試工具。 https://addons.mozilla.org/en-US/firefox/addon/1843 1.httpwatch 抓包工具，用來分析網站打開速度優化的工具 YSlow yahoo性能分析工具，對于新手還是有效的，不過如果了解了他的優化條目，剩下的就要交給httpwatch的分析和資料統計了 https://addons.mozilla.org/en-US/firefox/addon/5369 http://www.httpwatch.com/ 2.Firefox插件webdeveloper toolbar 用來分析優秀站點的工具 http://chrispederick.com/work/web-developer/ 3.Multiple_IE http://tredosoft.com/Multiple_IE 4.Html Validator Firefox驗證工具 做标準，不看驗證有點說不過去，雖然很多情況讓你不得不使用不能通過驗證的标記，但是也是很友善的 https://addons.mozilla.org/en-US/firefox/addon/249