国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

學習WEB標準必備的四項技能

2024-07-11 08:20:58
字體:
來源:轉載
供稿:網友

今天在群里,熊貓君提議整理一個帖子,一方面為初學者提供一個入門指南,另一方面也象借此和已經在從事這個行業進行一點交流。下面是我從事這個行當多年的一些經驗總結,希望拋磚引玉,大家不吝賜教。

1、必備工具

其實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完全不是一個檔次的東西,只能說勉強湊合用。

2、必備的html/xhtml基礎

說到基礎,其實正是我最想談的。從論壇許多的帖子也可以看出來,大多數問題的產生是由于制作者本身基礎的不牢固。而html/xhtml作為基礎中的基礎,更是許多人的薄弱環節。然而很多人還是喜歡一上來就問布局或者hack這些技巧方面的問題,其實很多問題如果本人的基礎牢固了,幾乎不能被稱之為問題。

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屬性等等。

html/xhtml基礎,雖然可以分開成多個方面講,但實際關于它們的知識往往是綜合在一起的,大多數相關的手冊幾乎都有詳盡的介紹。對于這方面知識的學習,除了看相關手冊外,多把自己的網頁拿去w3c做校驗也是不錯的方法。

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、其他

期待大家繼續補充……

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 巴林右旗| 内黄县| 开阳县| 宜城市| 哈密市| 霍州市| 扶风县| 新田县| 岳普湖县| 阳信县| 宝清县| 西昌市| 施秉县| 韩城市| 开远市| 扶沟县| 蕲春县| 龙泉市| 龙陵县| 宁明县| 婺源县| 顺义区| 武宣县| 古交市| 广饶县| 中山市| 漳平市| 阳谷县| 嵊泗县| 隆安县| 临江市| 顺昌县| 固阳县| 图们市| 布尔津县| 偃师市| 阿克苏市| 固安县| 望奎县| 京山县| 连州市|