- 相關(guān)推薦
學(xué)習(xí)web必備的四項(xiàng)技能
１、必備工具
其實(shí)web標(biāo)準(zhǔn)并不是很復(fù)雜的技術(shù)，實(shí)現(xiàn)web標(biāo)準(zhǔn)的工具也很簡單，說白了，只要可以進(jìn)行純文本編輯的軟件，都可以作為代碼編寫的gon工具。例如記事本、UltraEdit甚至CuteFTP的編輯器（象我這種懶人有時(shí)候就用那玩藝兒直接在線編輯，汗）。
而另一些較專業(yè)軟件會(huì)提供高亮顯示代碼（前面提到的UltraEdit也具有此項(xiàng)功能）、代碼提示、自動(dòng)閉合標(biāo)簽等等功能，使用起來會(huì)大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等，這些編輯軟件目前是絕對(duì)的主流，無論是初學(xué)者上手容易還是專業(yè)人士提高效率都是不錯(cuò)的選擇。
再說說瀏覽器環(huán)境，目前一臺(tái)機(jī)器同時(shí)裝IE、Firefox、Opera、Safari已經(jīng)不是難事，而IE7 Standalone和MultipleIE的問世也讓IE7和低版本IE并存成為可能。推薦瀏覽器環(huán)境——本機(jī)安裝IE7、FF、Opera、Safari，同時(shí)安裝MultipleIE。從我個(gè)人的使用經(jīng)驗(yàn)，IE7 Standalone存在一定的缺陷，有可能導(dǎo)致本機(jī)安裝的IE6無法正常使用。
除了編輯器以外，還有就是必不可少的調(diào)試工具啦，首推當(dāng)然是Firefox下的Firebug！IE下目前還沒有與之相當(dāng)?shù)恼{(diào)試工具，比較好的有IE development toobar、IE Debugbar等等，不過和Firebug完全不是一個(gè)檔次的東西，只能說勉強(qiáng)湊合用。
２、必備的HTML/XHTML基礎(chǔ)
說到基礎(chǔ)，其實(shí)正是我最想談的。從論壇許多的帖子也可以看出來，大多數(shù)問題的產(chǎn)生是由于制作者本身基礎(chǔ)的不牢固。而HTML/XHTML作為基礎(chǔ)中的基礎(chǔ)，更是許多人的薄弱環(huán)節(jié)。然而很多人還是喜歡一上來就問布局或者Hack這些技巧方面的問題，其實(shí)很多問題如果本人的基礎(chǔ)牢固了，幾乎不能被稱之為問題。
web標(biāo)準(zhǔn)必備的HTML/XHTML基礎(chǔ)，大致有幾個(gè)方面： 每個(gè)標(biāo)簽的語義，這一點(diǎn)是網(wǎng)頁標(biāo)準(zhǔn)的根本。而整個(gè)網(wǎng)頁標(biāo)準(zhǔn)化幾乎都是圍繞著這一點(diǎn)而來的，明確了語義，才能選擇合適的標(biāo)簽；明確了語義，才能構(gòu)建可讀性良好的結(jié)構(gòu)。例如
就是網(wǎng)站最高等級(jí)的標(biāo)題，它不應(yīng)該放在層級(jí)之下；例如和，主要用于表單元素分組，不應(yīng)該因?yàn)樗莻�(gè)漂亮的邊框就用來表現(xiàn)新聞列表。 每個(gè)標(biāo)簽的初始樣式，現(xiàn)在有很多重置標(biāo)簽樣式就是針對(duì)這一點(diǎn)，因?yàn)槊總�(gè)標(biāo)簽在不同瀏覽器下的初始樣式是不同的，而重置樣式是為了更好地實(shí)現(xiàn)網(wǎng)頁兼容性。從我個(gè)人的角度來說，不推薦初學(xué)者一上來就了解如何重置樣式，而應(yīng)該從了解標(biāo)簽的初始樣式入手，先了解了這些，才能明白每一行重置樣式的代碼的真正含義。 標(biāo)簽的正確嵌套規(guī)則，同時(shí)還必須了解的是哪些標(biāo)簽屬于塊元素，而哪些屬于行內(nèi)元素。這是即使是高手也會(huì)經(jīng)常忽略的方面，例如本人（^_^）。今天看到 這個(gè)帖子 的時(shí)候，才意識(shí)到，原來之前對(duì)dt、dd的嵌套規(guī)則理解有誤，二者不能一視同仁。HTML/XHTML的嵌套規(guī)則并不算簡單，常用的標(biāo)簽不過三十個(gè)上下，就有大約二十種不同的嵌套規(guī)則，稍不留神就會(huì)出錯(cuò)。雖然不嚴(yán)格遵循并不會(huì)影響頁面的表現(xiàn)，但養(yǎng)成一個(gè)良好的習(xí)慣是很重要的，它往往能決定你在這條路上可以走多遠(yuǎn)。 標(biāo)簽的屬性。這個(gè)又要分為兩方面，一是符合標(biāo)準(zhǔn)的常用屬性及對(duì)應(yīng)的值，例如的summary屬性、的scope屬性、的for屬性等等；二是標(biāo)準(zhǔn)強(qiáng)制要求的屬性，例如圖片的alt屬性、form的action屬性、textfield的col屬性和row屬性等等。
３、必須了解的CSS知識(shí)
HTML/XHTML基礎(chǔ)，雖然可以分開成多個(gè)方面講，但實(shí)際關(guān)于它們的知識(shí)往往是綜合在一起的，大多數(shù)相關(guān)的手冊(cè)幾乎都有詳盡的介紹。對(duì)于這方面知識(shí)的學(xué)習(xí)，除了看相關(guān)手冊(cè)外，多把自己的網(wǎng)頁拿去w3c做校驗(yàn)也是不錯(cuò)的方法。
CSS是標(biāo)準(zhǔn)化最吸引人的地方，也是時(shí)下討論最多的話題，市面上的相關(guān)書籍也在web標(biāo)準(zhǔn)類里占據(jù)壓倒性的比重，甚至有些人（包括一些用人單位）認(rèn)為CSS就是網(wǎng)頁標(biāo)準(zhǔn)。這種過于夸大CSS作用的觀點(diǎn)固然是錯(cuò)誤的，但CSS對(duì)于網(wǎng)頁標(biāo)準(zhǔn)的重要性卻也可見一斑。
CSS相關(guān)的知識(shí)、技巧很多，從知識(shí)的必備性方面來講，以下幾個(gè)方面是我認(rèn)為最重要的： 布局。布局是表現(xiàn)層技術(shù)的基礎(chǔ)，任何表現(xiàn)層的東西都是基于布局之上的。利用CSS布局的方法有很多種，例如float、絕對(duì)定位、負(fù)margin等等。每一種布局都有著各自的優(yōu)勢和局限性，從適性最廣來講顯然是float最佳，也最為常用，但清除浮動(dòng)往往是讓人頭疼的問題。絕對(duì)定位的網(wǎng)頁抗壓性好，但自由度低，而且渲染效率最差。負(fù)margin是最不破壞文檔流的辦法，但在對(duì)負(fù)值支持不佳的IE下往往會(huì)有靈異表現(xiàn)。關(guān)于布局方面的知識(shí)，建議看一下webflash的《徹底弄懂CSS盒子模式》系列文章，個(gè)人認(rèn)為相關(guān)知識(shí)的文章尚無出其右者。 IE下的Haslayout渲染模式。其實(shí)hack是許多標(biāo)準(zhǔn)工程師所深惡痛絕的東西，但在瀏覽器兼容性要求越來越高的今天，hack卻往往是一種無奈之舉。而深入了解IE的Haslayout渲染模式，就會(huì)明白許多hack的來由，以及許多兼容性問題的產(chǎn)生之源。推薦閱讀——譯文On having layout。然而HasLayout問題之多，絕非一兩篇文章所能概括，通過閱讀文章，了解其中的原理，再舉一反三，很多問題就會(huì)迎刃而解了。 符合標(biāo)準(zhǔn)的CSS規(guī)則。關(guān)于這一點(diǎn)，我可以不負(fù)責(zé)任地說，數(shù)以千萬計(jì)的網(wǎng)站，其CSS完全符合標(biāo)準(zhǔn)的，所占比重不會(huì)超過1%。這并不是一個(gè)悲觀的估計(jì)，即使是w3c推薦的一些網(wǎng)站，例如ESPN，他們的CSS也時(shí)常會(huì)通不過校驗(yàn)。CSS的許多規(guī)則的確令CSSer們非常不適，例如background和color，這兩個(gè)屬性絕大多數(shù)人都是分開來使用的，而w3c標(biāo)準(zhǔn)卻規(guī)定兩者必須“生則同生，死則同死”。還有就是各個(gè)瀏覽器的專有屬性，在實(shí)現(xiàn)一些效果時(shí)是最簡單有效的。這種時(shí)候我們往往會(huì)選擇放棄標(biāo)準(zhǔn)，但暫時(shí)的放棄不意味著無視。今天知道我們哪些行為是錯(cuò)誤的，以及為什么要用錯(cuò)誤的方法，明天改正起來就不會(huì)太難。 提高網(wǎng)站性能的技巧，如有助于SEO的以圖代字、用盡量少和小容量的圖片實(shí)現(xiàn)圓角表格、用background-position實(shí)現(xiàn)圖片切換以提高渲染效率等等。從對(duì)網(wǎng)站的幫助角度來看，這些技巧遠(yuǎn)比瀏覽器hack更值得掌握。 了解一點(diǎn)js知識(shí)。這個(gè)和CSS關(guān)系不是那么密切，但經(jīng)�？吹胶芏嗳算@牛角尖，用js可以非常簡單實(shí)現(xiàn)的效果，非要用CSS去勉強(qiáng)實(shí)現(xiàn)。例如將子菜單放在鏈接里，通過:hover觸發(fā)。又比如多列等高布局的實(shí)現(xiàn)。這已經(jīng)是行為層的范疇了，為什么還非要用表現(xiàn)層來實(shí)現(xiàn)呢？當(dāng)然這里并不是說所有CSS不容易實(shí)現(xiàn)的都往js里扔，而是要了解一下雙方的技術(shù)特點(diǎn)，合理地選用最佳方案。
４、必備的網(wǎng)站樣式管理技巧
規(guī)范化的命名與合理的代碼重用性，也就是ID和class。對(duì)不起，這里又要老生常談一下，因?yàn)樽蛱靹倓傆挚吹揭粋�(gè)通篇沒有用一個(gè)ID的網(wǎng)站。ID和class是屬于結(jié)構(gòu)層的，不過CSS的調(diào)用卻幾乎都要通過ID和class來實(shí)現(xiàn)。但是，ID和class不僅僅是為了調(diào)用CSS樣式而存在的。恰恰相反，是良好的ID和class構(gòu)建的結(jié)構(gòu)給了CSS大展身手的舞臺(tái)。搞反了彼此關(guān)系，其實(shí)還是表現(xiàn)主導(dǎo)結(jié)構(gòu)的思路，也就和滿屏幕的table沒有本質(zhì)區(qū)別。理清了ID、class和CSS的關(guān)系，再來談命名，命名其實(shí)只有一個(gè)基本原則，就是結(jié)構(gòu)化。當(dāng)然，在結(jié)構(gòu)化之余，body、框架、模塊之間的命名如能以某種形式加以區(qū)別（我個(gè)人習(xí)慣是加不同前綴），會(huì)讓代碼更加清晰。 樣式文件的管理，也就是如何存儲(chǔ)網(wǎng)站的樣式文件。如果是一個(gè)很小的網(wǎng)站，把所有樣式存在一個(gè)文件中也是沒有問題的。但大網(wǎng)站的CSS往往幾十上百k，全部存在一個(gè)文件里不但影響網(wǎng)頁加載，也不利于修改維護(hù)。如何分割CSS，需要事先做好規(guī)劃，無論是按欄目按功能還是按層級(jí)，要根據(jù)自己網(wǎng)站的特點(diǎn)。
【學(xué)習(xí)web的四項(xiàng)技能】相關(guān)文章：
雅思提分手段：雅思閱讀中如何實(shí)踐四項(xiàng)技能03-09
Web Workers加速移動(dòng)Web應(yīng)用03-30
web前端學(xué)習(xí)心得體會(huì)范文01-09
web瀏覽創(chuàng)作效果精選03-29
樂理知識(shí)之學(xué)習(xí)聲樂的技能素質(zhì)01-06
Web開發(fā)的教程圖解03-30