web標準必備的HTML/XHTML基礎

  1. 每個標籤的語義,這一點是網頁標準的根本。而整個網頁標 準化幾乎都是圍繞着這一點而來的,明確了語義,才能選擇合適的標籤;明確了語義,才能構建可讀性良好的結構。例如<h1>就是網站最高等級的 標題,它不應該放在<h2>層級之下;例如<fieldset>和<legend>,主要用於表單元素分組,不應該 因爲它那個漂亮的邊框就用來表現新聞列表。
  2. 每個標籤的初始樣式,現在有很多重置標籤樣式就是針對這一點,因爲每個標籤在不 同瀏覽器下的初始樣式是不同的,而重置樣式是爲了更好地實現網頁兼容性。從我個人的角度來說,不推薦初學者一上來就瞭解如何重置樣式,而應該從瞭解標籤的 初始樣式入手,先了解了這些,才能明白每一行重置樣式的代碼的真正含義。
  3. 標籤的正確嵌套規則,同時還必須瞭解的是哪些標籤屬於塊元素,而哪些屬於行內元素。這是即使是高手也會經常忽略的方面,例如本人(^_^)。今天看到 這個帖子 的時候,才意識到,原來之前對dt、dd的嵌套規則理解有誤,二者不能一視同仁。HTML/XHTML的嵌套規則並不算簡單,常用的標籤不過三十個上下, 就有大約二十種不同的嵌套規則,稍不留神就會出錯。雖然不嚴格遵循並不會影響頁面的表現,但養成一個良好的習慣是很重要的,它往往能決定你在這條路上可以 走多遠。
  4. 標籤的屬性。這個又要分爲兩方面,一是符合標準的常用屬性及對應的值,例如<table>的 summary屬性、<th><td>的scope屬性、<label>的for屬性等等;二是標準強制要求的屬 性,例如圖片的alt屬性、form的action屬性、textfield的col屬性和row屬性等等。

3、必須瞭解的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裏扔,而是要了解一下雙方的技術特點,合理地選用最佳方案。

4、必備的網站樣式管理技巧

  1. 規範化的命名與合理的代碼重用性,也就是ID和class。對不起,這裏又要老生常談一下,因爲昨天剛剛又看到一個通篇沒有 用一個ID的網站。ID和class是屬於結構層的,不過CSS的調用卻幾乎都要通過ID和class來實現。但是,ID和class不僅僅是爲了調用 CSS樣式而存在的。恰恰相反,是良好的ID和class構建的結構給了CSS大展身手的舞臺。搞反了彼此關係,其實還是表現主導結構的思路,也就和滿屏 幕的table沒有本質區別。理清了ID、class和CSS的關係,再來談命名,命名其實只有一個基本原則,就是結構化。當然,在結構化之餘, body、框架、模塊之間的命名如能以某種形式加以區別(我個人習慣是加不同前綴),會讓代碼更加清晰。
  2. 樣式文件的管理, 也就是如何存儲網站的樣式文件。如果是一個很小的網站,把所有樣式存在一個文件中也是沒有問題的。但大網站的CSS往往幾十上百k,全部存在一個文件裏不 但影響網頁加載,也不利於修改維護。如何分割CSS,需要事先做好規劃,無論是按欄目按功能還是按層級,要根據自己網站的特點。

5、其他

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章