web前端開發(fā)何去何從

web前端開發(fā)何去何從

(201*-02-1713:52:08)

老是有人喜歡討論說做前端開發(fā)有前途沒有，說實話我也不知道怎么樣，但是我很喜歡做前端開發(fā)。要說做業(yè)務(wù)是挑戰(zhàn)自己，做前端開發(fā)也是很挑戰(zhàn)自我，因為技術(shù)更新速度很快，要斷地學(xué)習(xí)、研究。下面是我從網(wǎng)上轉(zhuǎn)來的一篇文章，寫的很有道理。希望我們做前端開發(fā)的人心能靜下了，好好的學(xué)習(xí)。因為要學(xué)習(xí)的知識太多了。在這里我說一句，三百六十行，行行出狀元！

關(guān)于一個WEB前端的職業(yè)規(guī)劃，其實是有各種的答案，沒有哪種答案是完全正確的，全憑自己的選擇，只要是自己選定了，堅持做下去就有收獲。有一個觀點想要分享給大家：任何規(guī)劃和目標(biāo)的實現(xiàn)都依賴于知識的積累，而知識的積累來源于學(xué)習(xí)及學(xué)習(xí)后大量的實踐。我提供一個實踐機會，我們可以在工作之余在網(wǎng)上或外包公司那里接一些私單做，因為目標(biāo)不是賺錢，我們可以用最低的價格來提升自身競爭力，獲得大量訂單就意味著獲得大量的實踐機會，同時，還有一些收入作為工作成就感之外的安慰獎，還是不錯的。

一、職業(yè)方向定位

首先，只有確定好自己的職業(yè)方向，才能做好職業(yè)規(guī)劃。在我看來，做WEB前端技術(shù)能夠找到的職業(yè)方向有以下幾種：

（1）資深WEB前端工程師

這個方向算是一個WEB前端最基本的選擇了，在國外，很多老外都能夠把自己的專業(yè)做到極致，能一輩子就在一個專業(yè)領(lǐng)域不斷學(xué)習(xí)和積累。主要在于內(nèi)因和外因兩方面，內(nèi)因是老外通常思想比較簡單直接，容易一直專注于一個領(lǐng)域；外因是國外的環(huán)境很好，有很大的需求。反觀國內(nèi)，從內(nèi)因來講，WEB前端技術(shù)人員還是蠻浮躁的，通常會因為WEB前端知識的更新速度太快而覺得學(xué)習(xí)起來辛苦，最終轉(zhuǎn)向后臺或其他道路。從外因來講，WEB前端人員沒有獲得公平的待遇，可能從HTML頁面制作就開始并沿襲下來的，從來WEB前端人員都比后端人員低一等，貌似前端就是“淺顯”的代名詞、后端就是“深奧”的代名詞，這也直接造就了前端人員的收入無法和后端人員媲美，同時直接影響到前端人才市場的活躍程度。另一方面，前端技術(shù)入門較容易，形成造成另一個極端局面--人員泛濫、人才稀缺。我想對所有的WEB前端工程師說：面包總會有的，要耐得住寂寞！我個人比較推薦這個職業(yè)發(fā)展方向，因為，在這個方向下，只要足夠耐心、厚積薄發(fā)，成功的概率是非常高的。同時，這是一條最單純的路，我們更多精力花費在技術(shù)的鉆研上，而不是辦公室政治等其它瑣事。

（2）資深WEB架構(gòu)師

說功利點兒，我喜歡這個方向，既兼顧了工作的單純性、又能夠減少Coding的工作量，能騰出更多時間鉆研技術(shù)。在國內(nèi)，WEB前端工程師遇到較多的情況是總是反復(fù)編寫著同樣的代碼，總是面對著同樣的技術(shù)和產(chǎn)品，容易感覺枯燥。由于我們擁有最為廣泛的WEB相關(guān)知識沉淀，使得我們更加容易成為一名架構(gòu)師。這個職業(yè)發(fā)展方向不如第一種來得平滑，主要是作為一名架構(gòu)師不得不學(xué)習(xí)后端技術(shù)、DBA、Platform等內(nèi)容，而這種學(xué)習(xí)通常需要項目實踐，不是自己在家里寫兩個Demo就能達到要求了，這就勢必會遭遇一段時間的陣痛期。雖然不是很平滑，但是，對于一個大局觀好、悟性好、知識面廣的前端工程師，我推薦你們努把力，走一條光榮的架構(gòu)師之路。

（3）自己創(chuàng)業(yè)

其實，自己創(chuàng)業(yè)是最好的道路、也是成功率最低的道路，挑戰(zhàn)和機遇并存。這里，作為一個前端技術(shù)人員，需要將自己的視野更多放在行業(yè)的動態(tài)、產(chǎn)業(yè)鏈的動態(tài)、相關(guān)產(chǎn)品領(lǐng)域的動態(tài)，把關(guān)注細(xì)節(jié)的優(yōu)勢繼續(xù)保持，同時，增強自己把控一個產(chǎn)品乃至一個公司命運的能力。但是，這條道路和技術(shù)之路稍有分歧，后續(xù)將不再贅述。

（4）轉(zhuǎn)崗管理或其他

由于這條職業(yè)道路和WEB前端技術(shù)之路關(guān)系不大，故而，這里不做過多討論，但是，無論是否走上這條道路，我覺得對于任何技術(shù)之路，更好的大局觀、更廣泛的視野是良好發(fā)展的必備條件，擁有良好的大局觀和更廣泛的視野別無他法，只能不斷的進行知識的橫向拓展和積累，同時，多在橫向拓展知識的時候進行實踐，把知識變成技能。

二、職業(yè)發(fā)展目標(biāo)我都有一個最終的目標(biāo)，在這個目標(biāo)之上，我們需要給自己制定一系列學(xué)習(xí)和成長計劃，制定的方法如下：

第一、梳理知識架構(gòu)；

梳理知識架構(gòu)的目的在于，我們要了解清楚，哪些技術(shù)是前置、哪些技術(shù)是后繼，那些技術(shù)是深度、哪些技術(shù)是廣度，按照這兩個維度梳理好知識架構(gòu)之后，我們才能準(zhǔn)確地制定清晰的成長目標(biāo)、高效的成長計劃。

第二、分解目標(biāo)；

我認(rèn)為，大抵可分解為三個階段，包括：起步階段、提升階段、成型階段。這三個階段分別對應(yīng)著不同的目標(biāo)：

起步階段：

1、基本知識的掌握

在我們梳理的知識架構(gòu)中，按照我們分析的兩個維度里最前置的、最淺顯的部分，作為打基礎(chǔ)的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認(rèn)為這部分知識和內(nèi)容掌握了。

2、常用工具的掌握

對于常用工具的掌握應(yīng)該掌握一些有大公司或?qū)�業(yè)團隊背景的流行工具，這些工具的熟練掌握能夠提升專業(yè)度、職業(yè)度，同時，能提升我們的工作效率。我們只有在檢驗自己對于知識和技能熟練程度的時候，才會自虐式的用Notepad去編寫頁面、css和腳本等內(nèi)容。

3、溝通技巧的掌握

通常做技術(shù)的人會被定位為“不善溝通”的人，這是為什么呢？究其原因，主要是因為多跟程序和代碼打交道，跟人的溝通較少導(dǎo)致。這種時候我們要特別注意增加和人溝通的機會，著重提升這塊兒的能力。另一方面，我們通常被稱為“不懂溝通技巧”的人。作為一個技術(shù)人員，包括我自己，似乎天生就有一些難以接受挑戰(zhàn)的缺陷。在國內(nèi)，我們的技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案，在執(zhí)行過程中又缺乏相關(guān)產(chǎn)品、交互設(shè)計等人員的溝通，大多是在自己的思路貫徹下進行開發(fā)，久而久之，我們習(xí)慣于信任自己的觀點、在自己的視角看問題，對于挑戰(zhàn)總是百般地“據(jù)理”力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在用戶的視角看問題。

4、良好的開發(fā)習(xí)慣

開發(fā)習(xí)慣是養(yǎng)成的，一旦有不好的習(xí)慣，對于將來去修正帶來的將是很大的麻煩，我們在培養(yǎng)良好開發(fā)習(xí)慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文檔、先寫注釋。定義變量最好能用直接可理解的語義，最好是拼音，別整英文，尤其是生僻單詞，將來自己忘了還要開金山詞霸。文件最好有有意義的文件夾命名來管理，文件名最好有意義，需要版本號的最好能和項目版本號一同更新……等等。

提升階段：

1、高級技術(shù)的掌握

在提升階段對于知識和技能掌握，我們需要從梳理好的知識架構(gòu)中選擇更深一層次的技術(shù)進行學(xué)習(xí)，選擇之前，我們先通過類比或預(yù)估的方法，衡量自身學(xué)習(xí)的難點，以學(xué)習(xí)難點和自己最不感興趣的部分為主。這樣推薦大家的原因是：這個階段我們興趣正濃，已經(jīng)度過了苦澀的起步階段，到達了興奮的提升階段，我們要用興趣和興奮去挑戰(zhàn)最困難的部分，在我們信心受挫和興趣濃厚之中找到平衡。同時，輔以其他的深層次知識一起學(xué)習(xí)和研究。

2、產(chǎn)品思想的學(xué)習(xí)

沒有正確的產(chǎn)品思想，很難設(shè)計出良好的程序，無論從界面、交互，還是接口、邏輯，不能夠理解產(chǎn)品、理解用戶需求，我們會給自己造成很大的麻煩，例如：我們千辛萬苦用最新技術(shù)、最復(fù)雜的實現(xiàn)做出的功能，卻得不到使用者或領(lǐng)導(dǎo)、同事的認(rèn)可。為了使我們的工作和學(xué)習(xí)更加有效率、避免無用功，我們需要不斷的學(xué)習(xí)產(chǎn)品的思想，只有理解了產(chǎn)品的思路，我們才知道用我們的技術(shù)去輸出什么。

3、各種框架的學(xué)習(xí)框架是我們提高工作效率的優(yōu)秀手段，對于框架的學(xué)習(xí)是成長必經(jīng)之路。我們學(xué)習(xí)框架的路線通常應(yīng)該是：使用》分析》個性化定制》模仿編寫自己的框架。只有大量的使用，才能明白設(shè)計框架者在設(shè)計背后的思路，只有了解到設(shè)計的思路，才能做正確全面的分析，只有正確全面的分析才能支撐我們?nèi)�對其裁剪或擴展，只有經(jīng)過實際分析、修改別人的框架，才有可能寫出優(yōu)秀的、自己的框架。學(xué)習(xí)通常的路線是：學(xué)習(xí)、理解、模仿、創(chuàng)造。

4、富客戶端應(yīng)用的學(xué)習(xí)

隨著帶寬和計算機性能的提升，以及WEB2.0的如火如荼，富客戶端應(yīng)用充斥著互聯(lián)網(wǎng)，如果你不懂得富客戶端應(yīng)用，你就不能稱之為一個合格的前端技術(shù)人員。可以按照：Flash動畫》Flash編程》Flex》》Air》Silverlight動畫》Silverlight編程的步驟學(xué)習(xí)，先學(xué)Flash后學(xué)Siverlight的原因，一來Silverlight還不太成熟，二來，實際Silverlight借鑒了很多Flash的思想，最好在學(xué)習(xí)的時候不要本末倒置。5、各種網(wǎng)絡(luò)協(xié)議的學(xué)習(xí)

WEB前端技術(shù)就是云上的技術(shù)，云的協(xié)議有N種，我們應(yīng)該著重學(xué)習(xí)：TCP/IP，UDP，HTTP，POP3，SMTP這幾種協(xié)議，在開發(fā)WEB前端應(yīng)用過程中，這些協(xié)議是我們的技術(shù)的載體，有時候決定了我們的應(yīng)用是否能實現(xiàn)、有時候決定了我們的應(yīng)用是否高性能，同時，這些協(xié)議還是我們和后端技術(shù)交互的重要手段，這些協(xié)議就像是密碼字典，幫助我們把后端傳輸過來的密文解釋成我們前端技術(shù)能夠理解的明文。

6、程序設(shè)計

這個階段我們需要學(xué)習(xí)OO、UML、設(shè)計模式、設(shè)計方法……，我們要讓技術(shù)開發(fā)工作變成有目的性、有計劃性，并且，這些目的和計劃必須有理論的支持，這樣，我們設(shè)計出來的程序才能夠更優(yōu)秀、我們的開發(fā)才更有效率，這樣，我們的技術(shù)才能有所提升。為什么要學(xué)習(xí)程序設(shè)計呢？主要是，就算我們不用Flash的ActionScript編寫程序的前端邏輯，我們至少要把我們自己的JavaScript函數(shù)、包的定義規(guī)劃起來，避免將來自己或他人維護代碼的時候出現(xiàn)問題。程序設(shè)計能力，在技術(shù)人員仍然被看作是程序員的這個年代，是灰常、灰常重要滴。三、成型階段：

到了這個階段，我也沒什么好說的了，如果能達到這個階段，就證明后續(xù)的成長之路是異彩紛呈的，是成為一個資深WEB前端工程師，還是成為一個資深WEB架構(gòu)師，亦或其他，都要具體分析自身的特點和興趣所在。如果是資深的前端工程師，我覺得更重要的是去作新技術(shù)的研究，互聯(lián)網(wǎng)技術(shù)發(fā)展速度日新月異，不斷學(xué)習(xí)新技術(shù)，否則就被淘汰。此外，我建議在知識的廣度、深度方面最好能挑選一個自己最擅長和最感興趣的一兩個領(lǐng)域深入鉆研，不要挑太多，多而不精。如果是資深的WEB架構(gòu)師之路，我建議要深入了解后臺技術(shù)，這種深入了解一定要伴隨著實際的項目開發(fā)，基本方法是：按照別人設(shè)計的架構(gòu)實現(xiàn)幾個Server》自己設(shè)計并實現(xiàn)幾個Server。

擴展閱讀：WEB前端開發(fā)經(jīng)驗總結(jié)

WEB前端開發(fā)經(jīng)驗總結(jié)

發(fā)布時間：201*-04-201*:05:33來源：作者：shengman點擊：21015

這里跟大家談?wù)剛�人對WEB前端開發(fā)的一些經(jīng)驗（當(dāng)然都是個人的一些理解，有什么地方說的欠妥或不對的地方還請包含和指正），這里我就從WEB標(biāo)準(zhǔn)開始吧。WEB標(biāo)準(zhǔn)是什么？

說是WEB標(biāo)準(zhǔn)，不過我這里主要是對XHTML1.1和CSS2.1的一些經(jīng)驗總結(jié)。因為WEB含蓋的內(nèi)容實在是太多了，“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了——DIV+CSS，這里要說明下，這樣說其實是不正確的。DIV+CSS準(zhǔn)確的說法（個人的理解）應(yīng)該是：采用W3C推薦的WEB標(biāo)準(zhǔn)中的XHTML1.1結(jié)合CSS2.0樣式表制作頁面的方法，DIV應(yīng)該指的是XHTML標(biāo)簽，而CSS顯示是指的CSS樣式表了。采用WEB標(biāo)準(zhǔn)開發(fā)的好處

那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標(biāo)準(zhǔn)開發(fā)（個人理解的）相對以前TABLE布局的優(yōu)勢有哪些？1、節(jié)約運營成本

看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的？

采用WEB標(biāo)準(zhǔn)制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數(shù)據(jù)），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費用就會大家降低了，這個怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。

而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個CSS文件，就可以輕松搞定了。維護的成本也下來了，省了不少錢了吧？還有，你開這個頁面的速度會快很多啊，一個讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時間去用來等待的。

2、對用戶友好更友好，且有機會獲得更多的用戶現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個訪問我們網(wǎng)站的人）；第二類：搜索引擎；

采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，結(jié)構(gòu)清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽到。

而對搜索引擎來說，一個好的采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標(biāo)題（H1~H6標(biāo)簽），哪里是段落（p標(biāo)簽），哪里是段落里要強調(diào)的內(nèi)容（strong標(biāo)簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網(wǎng)站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。

一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術(shù)。你說你會不會去使用它？這個也正式我們的W3C推薦使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的原因啊。而這個技術(shù)也得到了我們廣大用戶的認(rèn)可，所以您現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。溫習(xí)完了基礎(chǔ)課程，現(xiàn)在正式開始講XHTML和CSS的技巧了。合理的布局

有朋友會開始問了，怎么一開始就開始講合理的布局了呢?前面我們提到了一些知識點——“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西，都是我們做了合理布局的結(jié)果。而且我個人覺得，我們采用WEB標(biāo)準(zhǔn)制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。

那么大家又會開始問，怎樣的一個頁面，才算是合理的布局的呢？這個問題問題問得好，也是我們大家剛開始學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一，我也曾經(jīng)常被這個問題所困擾，這里就說說我對合理布局的一些理解。

在開始講合理布局的頁面要達到的要素前，我們還是用個實例來講解會更直觀些。先來看看這個圖片：不錯，這個是一個文章詳細(xì)頁，沒有左右兩欄布局，不過這里我重點要講的是合理的布局，在稍后的文章中我會詳細(xì)的介紹浮動元素。好，回到剛才的話題，大家看到了這個頁面了。

我這里先把代碼寫給大家看看（省略了部分代碼）：

Ajax標(biāo)簽導(dǎo)航實例詳解

海嘯的地盤--享受生活，享受每一天！

站內(nèi)搜索：

全部主題(X)HTMLCSSJavascriptXML

ASP/ASP.NET

ARTICLESTOPICSABOUTCONTACTGESTBOOKFEED

Ajax標(biāo)簽導(dǎo)航實例詳解作者/程序設(shè)計：domain來源：domain.com發(fā)布時間：201*年4月28日代碼篇

之前整理發(fā)表了《XMLHTTPRequest的屬性和方法簡介》,它Ajax要使用的核心的技術(shù)之一，現(xiàn)在就來實際運用它。這個Ajax標(biāo)簽導(dǎo)航，是我很久前就寫的一個腳本，很實用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來做實例講解吧！當(dāng)然個人能力有限，有什么不對的地方還請多包含!

效果大家看到了，核心功能有：1、將當(dāng)前選中標(biāo)簽以特殊的樣式顯示

2、將異步加載的頁面信息顯示到指定的DOM節(jié)點中

我們來看看處理腳本的代碼吧：

程序代碼：ajaxtab.js*使用方法：$("frmSearch")

============================================================*/function$(i){

if(!document.getElementById)returnfalse;if(typeofi==="string"){

if(document.getElementById&&document.getElementById(i)){//W3CDOM

returndocument.getElementById(i);}

elseif(document.all&&document.all(i)){//MSIE4DOMreturndocument.all(i);}

elseif(document.layers&&document.layers[i]){//NN4DOM..note:thiswon"tfindnestedlayersreturndocument.layers[i];}else{

returnfalse;}}

else{returni;}}//-->

id="news"-news就是我們的導(dǎo)航標(biāo)簽的ID；

id="newsCnt"-newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點；class="first"-first當(dāng)前(第一個)標(biāo)簽的樣式；

id="news-0"-news-0通過”-“分開，我們就分別可以得到news(導(dǎo)航標(biāo)簽ID)，0（標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值）

網(wǎng)站重構(gòu)-超鏈接-標(biāo)簽間的分割線

我羅列的這些東西，相信大家開始看出了些頭緒了，呵呵，不過別急！在我們看處理的腳本之前，先讓我們來看看導(dǎo)航標(biāo)簽的樣式，主要是看看我們對分割線的處理(一點CSS處理的技巧)。

本來想偷個懶，讓大家看我上邊說的那篇文章，想想也就是Ctrl+C&Ctrl+V,都貼出來吧！呵呵�。�！

不過還沒有完，最后要說的就是innerHTML這個特性，這里我們還要感謝微軟啊，innerHTML就是它的專利，我們就是用它來改變指定DOM內(nèi)的HTML字符串的，而不用刷新頁面。詳細(xì)的信息大家還是google一下吧，我也要休息下�。�！喝口茶先�。�^-^！

以上講了這么多，我們最后來看看，我們這個ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧：XHTMLCSSJavascriptDOM

XMLHttpRequest對象innerHTML

還有XML，我們這個例子沒有涉及到。東西雖小，包含的（web前端開發(fā)）知識可是都用到了啊，我把我會的點東西都端出來了（要失業(yè)了），呵呵！

當(dāng)然我很喜歡跟大家多交流，以后有時間，我們在來談?wù)凜SS的HACKS技巧，JavascriptDOM編程等等的，今天就收工了，謝謝捧場先！��！

Copyright©201*-201*domain.com,Allrightsreserved.PoweredBy:domain

看出來什么沒有？（代碼是很多）可能大家已經(jīng)發(fā)現(xiàn)，整個頁面里基本上都是用戶要看的數(shù)據(jù)，其中只包含了很少（必要）的布局(XHTML)標(biāo)簽（請允許我這么說）。整個頁面基本都是由最基礎(chǔ)的h1~h6、p、ul、ol、li、form、div標(biāo)簽來實現(xiàn)的。

說到這里就要講到我在前面提到的“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”，看看我的這個例子做到了沒有？

結(jié)構(gòu)清晰--也就是我們常說的，XHTML標(biāo)簽要結(jié)構(gòu)化（語意化）。什么叫結(jié)構(gòu)化？

由于個人認(rèn)為這個知識點是十分重要的，所以請允許我在這里多羅嗦幾句，我們采用WEB標(biāo)準(zhǔn)的方法制作頁面的優(yōu)勢就體現(xiàn)在頁面結(jié)構(gòu)清晰。我們以前用table布局的時候，我們的表現(xiàn)（數(shù)據(jù)）和形式（布局樣式）是混在一起的，有很多冗余的數(shù)據(jù)混雜在一起，而大家再看看我上面給大家展示的代碼，很明顯，結(jié)構(gòu)十分清晰。

說了半天，還是沒有說什么是結(jié)構(gòu)化，什么才是結(jié)構(gòu)清晰��？不要急。還記得我剛才提到的那幾個標(biāo)簽嗎？h1~h6--如果你要顯示的數(shù)據(jù)是作為標(biāo)題顯示的時候，就用這些標(biāo)簽，因為這個標(biāo)簽的意思就是說，這個是一個標(biāo)題，不僅我們的用戶很容易理解h-head的英文字母縮寫，我們的另外一個用戶搜索引擎也可以很容易理解它。呵呵，看到了吧，一個充分結(jié)構(gòu)化的頁面，對用戶是十分友好的。p--Paragraph（段落）ul--unorglizedlist(無序的列表)ol--orglizedlist(有序的列表)li--listitem(列表項)form--表單div--division(區(qū)域)

我這么一寫，大家估計開始明白了，原來XHTML標(biāo)簽是有著自己的意義的（至于其他的標(biāo)簽的語意義，大家可以自己到W3C看看它的解釋，也可以查看語義化你的HTML標(biāo)簽和屬性），所以我們講要語意化的意思，就是用合理的標(biāo)簽來顯示數(shù)據(jù)，比如前面提到的，是標(biāo)題，就應(yīng)該用h1~h6標(biāo)簽，如果是一個段落的介紹文字，那么就應(yīng)該使用p標(biāo)簽，如果是顯示的一個沒有順序的列表，就應(yīng)該用ul標(biāo)簽，如此...所以看這個例子里

Ajax標(biāo)簽導(dǎo)航實例詳解

這么寫就是很合理的，h2標(biāo)簽就說明這里是個標(biāo)題。而這么寫：復(fù)制內(nèi)容到剪貼板代碼:.title{

font-size:18px;...}

Ajax標(biāo)簽導(dǎo)航實例詳解

雖然你用了strong來強調(diào)說明這部分文字，但是還是沒有h2標(biāo)簽來的直接明了。還有這么寫

Ajax標(biāo)簽導(dǎo)航實例詳解

也不是我們推薦的，可以不用嵌套層的地方，我們盡量不要去過多的嵌套層，減少嵌套會讓我們的瀏覽器解析起來會更容易，速度更快。

所我們使用WEB標(biāo)準(zhǔn)開發(fā)頁面，絕對不是單純的把以前的table換成DIV就OK了。而采用標(biāo)準(zhǔn)制作頁面，也不意味著我們就不使用table。只要把握我剛才說的原則，使用合理的標(biāo)簽顯示相應(yīng)特征的數(shù)據(jù)。其實我們的table標(biāo)簽是一個很好的用來顯示二維數(shù)據(jù)的標(biāo)簽，而table標(biāo)簽也確實是設(shè)計出來用來顯示數(shù)據(jù)的，而不是用來布局的，只是我們當(dāng)時的設(shè)計師們都用table標(biāo)簽來布局了。。

友情提示：本文中關(guān)于《web前端開發(fā)何去何從》給出的范例僅供您參考拓展思維使用，web前端開發(fā)何去何從：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《web前端開發(fā)何去何從》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/626204.html

• 上一篇：前端開發(fā)的流程與規(guī)范
• 下一篇：前端開發(fā)