如何設計出優(yōu)美良好結構的網(wǎng)頁前端

凡是從事互聯(lián)網(wǎng)的人根本都會寫幾行html，用過Word的人用Dreamweaver也能做出規(guī)整的頁面，所以大多數(shù)人會很自然地認為“頁面的開發(fā)沒啥技能含量，很簡單”。不只有這種遍及的認知，對從業(yè)者來說也有許多疑問：做頁面前端完成，沒疑問；兼容性，小case；圖像集成，一直都在用……還能有啥疑問？瓶頸啊、天花板啊、轉型啊、未來啊就在從業(yè)者中廣泛評論。是不是真的沒啥疑問了呢？網(wǎng)易郵箱前端技能基地也設立好幾年了，好像有著評論不完的論題，也常常會有一些新的主意讓咱們?yōu)橹徽?。那么頁面開發(fā)還有哪些需求，還要做些啥，這兒面的水有多深，讓咱們舀舀看。
在不一樣的時期對頁面前端的觀點好像是多變的。在互聯(lián)網(wǎng)前期的時分，小車仍是比房子貴的，燒餅和粉絲還只是用來吃的，菊花還只是用來泡茶的。那時的頁面計劃個性相對單一，對應的頁面需求對比簡單，而且其時的瀏覽器也根本是IE6的全國，javascript也只是網(wǎng)頁特效的代名詞，HTML頁面網(wǎng)站建設自身沒有致使太多人的注重，好像只需能用div甚至table加css輔佐把圖像定好位，把頁面內(nèi)容預留好就OK了，而且這種觀念存在了很長一段時間。跟著頁面內(nèi)容的豐厚，計劃個性的開展，交互雜亂性的添加，AJAX的運用，瀏覽器的更新?lián)Q代，又讓咱們從頭對最根本的頁面自身注重起來。然后熱議的即是瀏覽器的兼容性，碰到疑問最熱心的即是滿網(wǎng)絡查找hack，趁便再罵罵IE6、7……當這些都做一遍后，好像又遇到了瓶頸，又開端尋找未來。咱們就從這個期間開端說起。
完成作用圖是最根本的作業(yè)
把視覺稿經(jīng)過頁面代碼的方式表現(xiàn)出來包含了兩個根本訴求：1.能夠實在反映視覺稿；2.能夠經(jīng)過瀏覽器的兼容。這兩個訴求的到達需求咱們有追求細節(jié)的情緒和必定的頁面功底，能完成這兩個內(nèi)容就能夠開端進入頁面前端的從業(yè)者行列了，但這就代表著咱們能夠擔任頁面開發(fā)的作業(yè)了？不，才剛剛開端！
與計劃師的交流和項目的參加
交流很重要。先拋出幾個疑問：咱們有網(wǎng)站建設沒有和計劃師討論過某些作用對低端瀏覽器烘托功率影響對比大？有沒有討論過有些作用能夠用CSS3完成然后使得構造愈加簡練明晰？有沒有在代碼和視覺中尋追求過平衡？頁面前端的開發(fā)向根本用戶，編寫的代碼也直接作用在瀏覽器上，咱們有義務對頁面的穩(wěn)定性和烘托功率擔任。咱們也常常碰到項目在全體進展壓力下致使的計劃與頁面前端開發(fā)同步進行，這時更有必要盡量多地獲取項目信息，了解咱們還要做些啥，這些能夠協(xié)助咱們充分思考重用和構造拓寬。
杰出的頁面構造
頁面構造的編寫比方蓋房的地基建造，其好壞會直接影響到CSS代碼的質(zhì)量、js開發(fā)、后臺開發(fā)還會影響到今后的頁面拓寬、迭代和頁面調(diào)整。拿到視覺稿后，不要忙著著手開端，多觀察思考。先剖析計劃，區(qū)分構造，然后計劃構造，編寫代碼。特別在大型項目中，合理運用模塊化的開發(fā)不管從全體進行仍是拓寬保護都有相當大的優(yōu)點。
對于hack
許多同學在頁面開發(fā)時上網(wǎng)查找最多的即是hack了，是不是咱們完全要依靠hack來完成頁面兼容性，答案是不是定的。咱們常常比方IE6向咱們?nèi)隽艘粋€謊，成果咱們要再撒一百個謊來圓這個謊。不否定IE6常常讓咱們口吐鮮血，但不代表咱們用更多的“謊話”來彌補就能夠心安理得。大多數(shù)情況下能夠經(jīng)過變換思路調(diào)整HTML構造，或運用一些盡管無法解釋但相對安全的css來干掉hack。誰都無法估計運用hack啥時分會讓咱們栽一個大跟頭。比方觸發(fā)layout或position:relative就能夠協(xié)助處理許多IE6的疑問。
美麗的代碼
如今許多web項目功能雜亂，代碼規(guī)劃也會成都做網(wǎng)站變得很無窮，怎么十分好地進行協(xié)同開發(fā)和保護是咱們面對的一個疑問。需求思考完善一致的計劃，還有要養(yǎng)成杰出的代碼開發(fā)習氣才會在面對各種情況時揮灑自如。翻閱頁面代碼，看到合理的標簽運用、杰出的注釋、明晰的代碼構造、意圖精確的css不只猶如賞識一個藝術品，更為下流開發(fā)和協(xié)同開發(fā)降低了不小的交流本錢，咱們有啥理由不去這么做呢？舉個不和比方：div濫用是如今對比典型的一個疑問。數(shù)數(shù)看自個運用的標簽有多少個呢？不一樣的語義都該運用對應的標簽代碼，特別是HTML5供給了更豐厚的語義化標簽，它們都苦苦地在等候戰(zhàn)場上的沖鋒號，讓咱們?nèi)ソ夥潘鼈儼桑?
無障礙頁面開發(fā)
可拜訪性與易用性是十分片面且人性化的東西。普通人看上去上完滿出現(xiàn)的頁面在特別群體中不必定顯得那么交心。當瞎子用讀屏軟件在頁面某個區(qū)域內(nèi)墮入循環(huán)時，咱們應當感到愧疚。只能說目前國內(nèi)的網(wǎng)站對此的注重程度還遠遠不夠，這就需求咱們共同盡力，讓更多的人感受到咱們的熱心。>
保障功率
作為項目開發(fā)中對比靠前的一環(huán)，頁面開發(fā)也許需求盡早完成為項目爭取時間，這就需求咱們盡也許地進步功率?！肮び破涫?，必先利其器”，除了實戰(zhàn)經(jīng)驗和代碼習氣的構成能夠協(xié)助咱們進步功率外，想要進步對自個開發(fā)的進展掌控才干，還有許多輔佐東西能夠協(xié)助咱們進行頁面開發(fā)。比方運用Less或Sass能夠協(xié)助咱們拓寬和組織CSS，大大進步CSS的編寫功率添加了可保護性。比方能夠經(jīng)過zen coding的自動自動完成和自定義代碼塊讓你能夠劍指如飛。甚至還見過經(jīng)過自定義輸入法的代碼塊關鍵詞來進步開發(fā)速度的。多多開掘必定會找到最合適自個運用的東西。
對于服務器的優(yōu)化
頁面開發(fā)也需求了解服務器的優(yōu)化，盡量減小服務器負擔。比方css sprite即是一個典型減小服務器懇求數(shù)的比方。在網(wǎng)易郵箱的頁面前端開發(fā)中咱們不停地在做著各種優(yōu)化，成都做網(wǎng)站比方一直在尋求文件巨細與服務器懇求數(shù)的平衡；為了盡也許進步緩存利用率采用了補丁晉級；對class名進行了混雜緊縮防止命名過長的冗余；運用base64減少懇求數(shù)量等等措施。這些都是歸納權衡的成果，需求思考各個方面全體優(yōu)化。因為當頁面拜訪量到達必定的數(shù)量級時，再小的一點優(yōu)化都會到達可觀的作用，再小的疑問都也許會構成無窮的災難。
擁抱HTML5
這是一個充溢時機的年代，HTML5年代的降臨伴跟著移動互聯(lián)網(wǎng)的鼓起發(fā)明了更大的時機，還有太多的東西值得咱們?nèi)W習去發(fā)現(xiàn)。 HTML5供給了豐厚的JS API接口，需求咱們?nèi)パ杏?；CSS3的艷麗招引了足夠多的眼球，需求咱們?nèi)パ杏?；移動設備上怎么開發(fā)愈加適配的頁面，需求咱們?nèi)パ杏憽?
Stay Hungry, Stay Foolish
水是越舀越多了，卻發(fā)現(xiàn)本來下面還深不見底，上面的內(nèi)容越是深入研討就越會發(fā)現(xiàn)更多山川需求翻越。堅持饑餓狀態(tài)，用雙眼去盡力發(fā)現(xiàn)開掘，不斷豐厚技能才干找到定位，打破瓶頸，正所謂“唯有建瓴高屋方可瓜熟蒂落”。形本錢文是因為之前和同行評論到瓶頸的疑問，想給自個，給頁面前端的同學一同找找定位，整理一下思路。拿蘋果CEO在斯坦福演講的一句話“Stay Hungry, Stay Foolish”和咱們共勉。

本文標題：如何設計出優(yōu)美良好結構的網(wǎng)頁前端
網(wǎng)頁路徑：http://www.muchs.cn/news48/171498.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、關鍵詞優(yōu)化、手機網(wǎng)站建設、服務器托管、ChatGPT、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)