給html初學者的30條最佳實踐

網友投稿 692 2025-03-31

如果你想書寫優美的代碼，那最好不要用這種方式。

為什么要用UL布局導航菜單？ ——因為UL生來就是為定義列表準備的

最好這樣定義：

?? ??

15.學習如何應對IE

IE一直以來都是前端開發人員的噩夢！

如果你的CSS樣式表基本定型了，那么可以為IE單獨建立一個樣式表，然后這樣僅對IE生效：

這些代碼的意思是：如果用戶瀏覽器是IE6及以下，那這段代碼才會生效。如果你想把IE7也包含進來，那么就把“[if lt IE 7]”改為“[if lte IE 7]”。

16.選擇合適的IDE

不論你是Windows還是Mac用戶，這里都有很多優秀的編輯器供你選擇：

Mac 用戶

Coda

Espresso

TextMate

Aptana

DreamWeaver CS4 PC 用戶

InType

E-Text Editor

Notepad++

Aptana

Dreamweaver CS4

17.上線前，壓縮代碼

通過壓縮您的CSS和Javascript文件，您可以減少總大小的25%左右，但在開發過程中不必壓縮，然而，一旦網站完成后，利用一些網絡壓縮程序或多或少節省一些帶寬。下面列出一些工具。

Javascript 壓縮服務

Javascript Compressor

JS Compressor

CSS Compression Services

CSS Optimiser

CSS Compressor

Clean CSS

18.精簡，精簡，在精簡

回望我們大多數人寫的第一個頁面，一定會發現嚴重的 “DIV癖”( divitis )，通常初學者的本能就是把一個段落用DIV包起來，然后為了控制定位而套上更多的DIV。—— 其實這是一種低效而有害的做法。

網頁寫完后，一定要多次回頭檢查，盡量的減少元素的數量。 能用UL布局的列表就不要用一個個的DIV去布局。

正如寫文章的關鍵是“縮減，縮減，縮減”一樣，寫頁面也要遵循這個標準。

19.給所有圖片加上“alt”屬性

為圖片加上alt屬性的好處是不言而喻的 —— 這樣可以讓禁用圖片或者使用特殊設備的用戶無障礙得了解你的王爺信息，并且對圖像搜索引擎友好。

糟糕的做法

更好的做法

20.通宵達旦

我經常不知不覺的學習工作到凌晨，我認為這是個很好的狀況。

我的“啊～哈！”時間（ “AH-HA” moments，指柳暗花明或豁然開朗的時刻）通常都發生在深夜，比如我徹底理解JavaScript的“閉包”概念，就是在這樣一種情況下。如果你還沒有感受過這種奇妙的時刻，那就馬上試試吧！

21.查看源代碼

沒有什么比模仿你的偶像能讓你更快的學習HTML。起初，我們都要甘做復印機，然后慢慢得發展自己的風格。研究你喜歡的網站頁面代碼，看看他們是怎么實現的。這是高手的必經之路，你一定要試一下。注意：只是學習和模仿他們的編碼風格，而不是抄襲和照搬！

留意網絡上各種炫酷的JavaScript效果，如果看上去是使用了插件，那根據它源碼中head標簽內的文件名，就可以找到這個插件名稱，然后就可以學習它據為己用。

22.為所有的元素定義樣式

這一條在你制作其他公司企業網站時尤為必要。你自己不使用blockquote標記？那用戶可能會用，你自己不使用OL？用戶也可能會。花時間做一個頁面，顯示出ul, ol, p, h1-h6, blockquotes, 等等元素的樣式，檢查一下是否有遺漏。

23.使用第三方服務

現在互聯網上流行著許多可以免費加在網頁中的API，這些工具非常強大。它可以幫你實現許多巧妙的功能，更重要的是可以幫你宣傳網站。

24.掌握Photoshop

Photoshop是前端工程師的一個重要工具，如果你已經熟練掌握HTML和CSS，那不妨多學習一下Photshop。

觀看Psdtuts+上的視頻課程。

花費每月25$注冊成為Lynda.com的會員，海量精品課程。

推薦“You Suck at Photoshop”系列。

花費幾個小時記住盡可能多的PS快捷鍵。

25.學習每一個HTML標簽

雖然有些HTML標簽很少用到，但你依然應該了解他們。比如“abbr”、“cite”等，你必須學習它們以備不時之需。

順便說下，如果你不熟悉上面兩個標簽，可以看下下面的解釋：

abbr 和你估計的差不多，它是abbreviation的縮寫（英語差的估計不到），“Blvd”能用標簽包裹，因為他是“boulevard”的縮寫。（喜大普奔也可以嘍）。

26.參與社區討論

網絡上有許許多多優秀的資源，而社區中也隱藏著許多高手，這里你既可以自學，也能請教經驗豐富的開發者。

27.使用reset.css

Css Reset也就Reset Css ,就是重置一些HTML標簽樣式，或者說默認的樣式。

關于是否應該使用CSS Reset，網上也有激烈的爭論，筆者是建議使用的。你可以先選用一些成熟的CSS Reset，然后慢慢演變成適合自己的。

html,?body,?div,?span,??? h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,?? a,?abbr,?acronym,?address,?big,?cite,?code,?? img,?ins,?kbd,?q,?s,?samp,?? small,?strike,?strong,??? dl,?dt,?dd,?ol,?ul,?li,?? fieldset,?form,?label,?legend,?? table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td?{?? ????margin:?0;?? ????padding:?0;?? ????border:?0;?? ????outline:?0;?? ????font-size:?100%;?? ????vertical-align:?baselinebaseline;?? ????background:?transparent;?? }?? body?{?? ????line-height:?1;?? }?? ol,?ul?{?? ????list-style:?none;?? }?? blockquote,?q?{?? ????quotes:?none;?? }?? blockquote:before,?blockquote:after,?? q:before,?q:after?{?? ????content:?'';?? ????content:?none;?? }?? table?{?? ????border-collapse:?collapse;?? ????border-spacing:?0;?? }

28.對齊元素

簡單來說，你應該盡可能的對齊你的網頁元素。可以觀察一下你喜歡的網站，它們的LOGO、標題、圖表、段落肯定是對得非常整齊的。否則就會顯得混亂和不專業。

29.關于PSD切片

現在你已經掌握了HTML、CSS、Photoshop知識，那么你還需要學習如何把PSD轉換為網頁上的圖片和背景，下面有兩個不錯的教程：

Slice and Dice that PSD

From PSD to HTML/CSS

30.不要隨意使用框架

Javascript和CSS都有許多優秀的框架，但如果你是初學者，不要急于使用它們。如果你還沒能熟練的駕馭CSS，使用框架會混淆你的知識體系。盡管你可能能會說javascript和jQuery是可以同事學習的，但這對css并不適合。我個人提倡960 CSS 網格框架，并且我經常使用它。還是那句話，如果你是css的初學者，學習框架只會讓你更加困惑。

CSS框架是為熟練開發者設計的，這樣會節省它們大量的時間。

譯者注

這篇文章發表于2009年，彈指一揮間，4年時間已悄然溜走，文中有些知識已顯得陳舊過時，但很多規則同樣適用，下面是譯者補充的關于已經過時的建議，如果你覺得哪里需要改進可以參與討論。

#1

html5標準放寬了要求，允許標簽不閉合，而且瀏覽器也能很好的修正這個問題，但這并不是你不閉合標簽的理由，有時不閉合標簽可能帶來無法預知的錯誤。放寬標準其實是降低了開發的門檻，這本是web的真諦，人人可參與，其實xhtml規范要求頁面有錯誤就停止渲染，這本身并不現實，而且瀏覽器也從來沒有這么做過，畢竟用戶寧愿看到有些錯誤的頁面，也不愿看到白板一張。

#8

跨瀏覽器的firebug正在開發當中，然而發布之日卻遙遙無期，chrome，safari，ie和opera都有自己的開發者工具，而且功能也不錯，這里推薦chrome的開發者工具，大有后來者居上之風，其發展可謂一日千里，相信超越firebug指日可待。

#9

Firebug入門指南-阮一峰的博客

#16

sublime

#20

我以前也曾這樣，確實學到不少知識，但自從看了曲黎敏副教授講解的《黃帝內經》后，就不這樣了，我也不建議你這樣，11點是睡覺的最晚時間了

#23

英文原文標題為“使用twitter ”，這個在中國應該是微博么！！！

#25

address標簽也容易被誤用，你不見得知道哦！

#27

上面給出的代碼可能已經更新，下面有地址，建議用normalize.css而非rerset.css

meyer 的 reset.css

html5doctor的 reset.css

normalize.css

#30

現在bootstrap或來著居上，本人提倡這個框架，發展很猛，當然還有好多框架都很不錯哦。

#31

本文為翻譯文章原文 “30 html best practices for beginner“，本文為本人整理，原譯文在此，在原譯文基礎上有所改動。

本系列文章有三篇，另外兩篇如下：

給javascript初學者的24條建議

高效jQuery的奧秘

原文網址：給HTML初學者的30條最佳實踐

Web應用防火墻 WAF 前端開發

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。