閱讀(2.2k) 書簽贊(1) 我要糾錯(cuò)

給HTML初學(xué)者的30條最佳實(shí)踐

2018-06-16 16:41 更新

Nettuts +運(yùn)營(yíng)最困難的方面是為很多技能水平不同的用戶提供服務(wù)。如果我們發(fā)布太多高級(jí)教程，我的新手用戶將無(wú)法從中受益。相反也是如此。我們盡我們最大的努力，但如果你覺得你被忽略了請(qǐng)聯(lián)系我們。這個(gè)網(wǎng)站是為你服務(wù)的，所以說(shuō)出來(lái)！如此說(shuō)來(lái)，今天的教程是專為那些剛剛進(jìn)入web開發(fā)領(lǐng)域的人準(zhǔn)備的。如果你的經(jīng)驗(yàn)是一年或更少，希望在這里列出的一些技巧將幫助你成為更好、更高效的開發(fā)者!

閑話少說(shuō)，讓我們回顧三十個(gè)創(chuàng)建標(biāo)記的最佳實(shí)踐。

1.保持標(biāo)簽閉合

以前，經(jīng)常見到類似下面的代碼（譯注：這是多久以前啊……）：

<li>Some text here.  
<li>Some new text here.  
<li>You get the idea.

注意外面包裹的UL/OL標(biāo)簽被遺漏了（誰(shuí)知是故意還是無(wú)意的），而且還忘記了關(guān)閉LI標(biāo)簽。按今天的標(biāo)準(zhǔn)來(lái)看，這是很明顯的糟糕做法，應(yīng)該100%避免?？傊?，保持閉合標(biāo)簽。否則，你驗(yàn)證html標(biāo)簽的時(shí)候可能遇到問題。

更好的方式

<ul>  
  <li>Some text here. </li>  
  <li>Some new text here. </li>  
  <li>You get the idea. </li>  
</ul>

2.聲明正確的文檔類型

筆者早先曾加入過(guò)許多CSS論壇，每當(dāng)用戶遇到問題，我們會(huì)建議他首先做兩件事：

驗(yàn)證CSS文件，保證沒有錯(cuò)誤。
確認(rèn)添加了正確的doctype

DOCTYPE 出現(xiàn)在HTML標(biāo)簽之前，它告訴瀏覽器這個(gè)頁(yè)面包含的是HTML，XHTML，還是兩者混合，這樣瀏覽器才能正確解析。

通常有四種文檔類型可供選擇：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

關(guān)于該使用什么樣的文檔類型聲明，一直有不同的說(shuō)法。通常認(rèn)為使用最嚴(yán)格的聲明是最佳選擇，但研究表明，大部分瀏覽器會(huì)使用普通的方式解析這種聲明，所以很多人選擇使用HTML4.01標(biāo)準(zhǔn)。選擇聲明的底線是，它是不是真的適合你，所以你要綜合考慮來(lái)選擇適合你得項(xiàng)目的聲明。

3.永遠(yuǎn)不要使用內(nèi)聯(lián)樣式

當(dāng)你在埋頭寫代碼時(shí)，可能會(huì)經(jīng)常順手或偷懶的加上一點(diǎn)行內(nèi)css代碼，就像這樣：

<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

這樣看起來(lái)即方便又沒有問題。然而，這在你的編碼實(shí)踐中是個(gè)錯(cuò)誤。

在你寫代碼時(shí)，在內(nèi)容結(jié)構(gòu)完成之前最好不要加入樣式代碼。

這樣的編碼方式就像打游擊，是一種很山寨的做法?！狢hris Coyier

更好的做法是，完成標(biāo)簽部分后，再把這個(gè)P的樣式定義在外部樣式表文件里。

建議

#someElement > p {  
  color: red;  
}

4.將所有外部css文件放入head標(biāo)簽內(nèi)

理論上講，你可以在任何位置引入CSS樣式表，但HTML規(guī)范建議在網(wǎng)頁(yè)的head標(biāo)記中引入，這樣可以加快頁(yè)面的渲染速度。

雅虎的開發(fā)過(guò)程中，我們發(fā)現(xiàn)，在head標(biāo)簽中引入樣式表，會(huì)加快網(wǎng)頁(yè)加載速度，因?yàn)檫@樣可以使頁(yè)面逐步渲染。 —— ySlow團(tuán)隊(duì)

<head>  
<title>My Favorites Kinds of Corn</title>  
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />  
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />  
</head>

5.javascript文件放在底部

要記住一個(gè)原則，就是讓頁(yè)面以最快的速度呈現(xiàn)在用戶面前。當(dāng)加載一個(gè)腳本時(shí)，頁(yè)面會(huì)暫停加載，直到腳本完全載入并執(zhí)行完成。因此會(huì)浪費(fèi)用戶更多的時(shí)間。

如果你的JS文件只是要實(shí)現(xiàn)某些功能，（比如點(diǎn)擊按鈕事件），那就放心的在body底部引入它，這絕對(duì)是最佳的方法。

建議

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>

6.永遠(yuǎn)不要使用內(nèi)聯(lián)javascript。現(xiàn)在不是1996年了！

許多年以前，還存在一種這樣的方式，就是直接將JS代碼加入到HTML標(biāo)簽中。尤其是在簡(jiǎn)單的圖片相冊(cè)中非常常見。本質(zhì)上講，一個(gè)“onclick”事件是附加在標(biāo)簽上的，其效果等同于一些JS代碼。不需要討論太多，非常不應(yīng)該使用這樣的方式，應(yīng)該把代碼轉(zhuǎn)移到一個(gè)外部JS文件中，然后使用“ addEventListener / attachEvent ”加入事件監(jiān)聽器?；蛘呤褂?a rel="external nofollow" target="_blank" target="_blank">jquery等框架，只需要使用“click”方法。

$('a#moreCornInfoLink').click(function() {  
  alert('Want to learn more about corn?');  
});

7.邊開發(fā)，邊驗(yàn)證

很多人并不真正理解標(biāo)準(zhǔn)驗(yàn)證的意義和價(jià)值，筆者在一篇博客中詳細(xì)分析了這個(gè)問題。一句話，驗(yàn)證是為你服務(wù)的，不是給你找麻煩的。

如果你剛開始從事網(wǎng)頁(yè)制作，那強(qiáng)烈建議你下載Web Developer Toolbar（chrome用戶請(qǐng)自行在應(yīng)用商店搜索，ie用戶可能就杯具了），并在編碼過(guò)程中隨時(shí)使用”HTML標(biāo)準(zhǔn)驗(yàn)證”和“CSS標(biāo)準(zhǔn)驗(yàn)證”。如果你認(rèn)為CSS是一種非常好學(xué)的語(yǔ)言，那么它會(huì)把你整的死去活來(lái)。你不嚴(yán)謹(jǐn)?shù)拇a會(huì)讓你的頁(yè)面漏洞百出，問題不斷，一個(gè)好的方法就是—— 驗(yàn)證，驗(yàn)證，再驗(yàn)證。

8.下載firebug

Firebug是當(dāng)之無(wú)愧的網(wǎng)頁(yè)開發(fā)最佳插件，它不但可以調(diào)試JavaScript，還可以直觀的讓你了解頁(yè)面標(biāo)記的屬性和位置。不用多說(shuō)，下載！

9.使用firebug

據(jù)筆者觀察，大部分的使用者僅僅使用了Firebug 20%的功能，那真是太浪費(fèi)了，你不妨花幾個(gè)小時(shí)的時(shí)間來(lái)系統(tǒng)學(xué)習(xí)這個(gè)工具，相信會(huì)讓你事半功倍。

資源

Overview of Firebug
Debug Javascript With Firebug – video tutorial

10.保持標(biāo)簽名小寫

理論上講，html不區(qū)分大小寫，你可以隨意書寫，例如：

<DIV>  
<P>Here's an interesting fact about corn. </P>  
</DIV>

但最好不要這樣寫，費(fèi)力氣輸入大些字母沒有任何用處，并且會(huì)讓代碼很難看.

建議

<div>  
　　<p>Here's an interesting fact about corn. </p>  
</div>

11.使用H1-H6標(biāo)簽

筆者建議你在網(wǎng)頁(yè)中使用其中全部六種標(biāo)記，雖然大部分人只會(huì)用到前四個(gè)，但使用最多的H會(huì)有很多好處，比如設(shè)備友好、搜索引擎友好等，不妨把你的P標(biāo)簽都替換成H6。

<h1>This is a really important corn fact! </h1>  
<h6>Small, but still significant corn fact goes here. </h6>

12.寫博客時(shí)，請(qǐng)將H1留給文章標(biāo)題

今天筆者在Twitter上發(fā)起一次討論：是該把H1定義到LOGO上還是定義到文章標(biāo)題上，有80%的人選擇了后者。

當(dāng)然具體如何使用要看你的需求，但我建議你在建立博客的時(shí)候，將文章題目定為H1，這對(duì)搜索引擎優(yōu)化(seo)是非常有好處的。

13.下載ySlow

在過(guò)去幾年里，雅虎的團(tuán)隊(duì)在前端開發(fā)領(lǐng)域做了許多偉大的工作。前不久，它們發(fā)布了一個(gè)叫ySlow的Firebug擴(kuò)展，它會(huì)分析你的網(wǎng)頁(yè)，并返回一個(gè)“成績(jī)單”，上面細(xì)致分析了這個(gè)網(wǎng)頁(yè)的方方面面，提出需要改進(jìn)的地方，雖然它有點(diǎn)苛刻，但它絕對(duì)會(huì)對(duì)你有所幫助，強(qiáng)烈推薦—— ySlow！

14.使用無(wú)序列表（UL）包裹導(dǎo)航菜單

通常網(wǎng)站都會(huì)有導(dǎo)航菜單，你可以用這樣的方式定義：

<div id="nav">  
 <a href="#">Home </a>  
  <a href="#">About </a>  
  <a href="#">Contact </a>  
</div>

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

為什么要用UL布局導(dǎo)航菜單？ ——因?yàn)閁L生來(lái)就是為定義列表準(zhǔn)備的

最好這樣定義：

<ul id="nav">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">About</a></li>  
  <li><a href="#">Contact</a></li>  
</ul>

15.學(xué)習(xí)如何應(yīng)對(duì)IE

IE一直以來(lái)都是前端開發(fā)人員的噩夢(mèng)！

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

<!--[if lt IE 7]>  
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />  
<![endif]-->

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

16.選擇合適的IDE

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

Mac 用戶

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4 PC 用戶
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

17.上線前，壓縮代碼

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

Javascript 壓縮服務(wù)

Javascript Compressor
JS Compressor

CSS Compression Services

CSS Optimiser
CSS Compressor
Clean CSS

18.精簡(jiǎn)，精簡(jiǎn)，在精簡(jiǎn)

回望我們大多數(shù)人寫的第一個(gè)頁(yè)面，一定會(huì)發(fā)現(xiàn)嚴(yán)重的 “DIV癖”( divitis )，通常初學(xué)者的本能就是把一個(gè)段落用DIV包起來(lái)，然后為了控制定位而套上更多的DIV?！?其實(shí)這是一種低效而有害的做法。

網(wǎng)頁(yè)寫完后，一定要多次回頭檢查，盡量的減少元素的數(shù)量。能用UL布局的列表就不要用一個(gè)個(gè)的DIV去布局。

正如寫文章的關(guān)鍵是“縮減，縮減，縮減”一樣，寫頁(yè)面也要遵循這個(gè)標(biāo)準(zhǔn)。

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

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

糟糕的做法

<IMG SRC="cornImage.jpg" />

更好的做法

<img src="cornImage.jpg" alt="A corn field I visited." />

20.通宵達(dá)旦

我經(jīng)常不知不覺的學(xué)習(xí)工作到凌晨，我認(rèn)為這是個(gè)很好的狀況。

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

21.查看源代碼

沒有什么比模仿你的偶像能讓你更快的學(xué)習(xí)HTML。起初，我們都要甘做復(fù)印機(jī)，然后慢慢得發(fā)展自己的風(fēng)格。研究你喜歡的網(wǎng)站頁(yè)面代碼，看看他們是怎么實(shí)現(xiàn)的。這是高手的必經(jīng)之路，你一定要試一下。注意：只是學(xué)習(xí)和模仿他們的編碼風(fēng)格，而不是抄襲和照搬！

留意網(wǎng)絡(luò)上各種炫酷的JavaScript效果，如果看上去是使用了插件，那根據(jù)它源碼中head標(biāo)簽內(nèi)的文件名，就可以找到這個(gè)插件名稱，然后就可以學(xué)習(xí)它據(jù)為己用。

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

這一條在你制作其他公司企業(yè)網(wǎng)站時(shí)尤為必要。你自己不使用blockquote標(biāo)記？那用戶可能會(huì)用，你自己不使用OL？用戶也可能會(huì)?；〞r(shí)間做一個(gè)頁(yè)面，顯示出ul, ol, p, h1-h6, blockquotes, 等等元素的樣式，檢查一下是否有遺漏。

23.使用第三方服務(wù)

現(xiàn)在互聯(lián)網(wǎng)上流行著許多可以免費(fèi)加在網(wǎng)頁(yè)中的API，這些工具非常強(qiáng)大。它可以幫你實(shí)現(xiàn)許多巧妙的功能，更重要的是可以幫你宣傳網(wǎng)站。

24.掌握Photoshop

Photoshop是前端工程師的一個(gè)重要工具，如果你已經(jīng)熟練掌握HTML和CSS，那不妨多學(xué)習(xí)一下Photshop。

觀看Psdtuts+上的視頻課程。
花費(fèi)每月25$注冊(cè)成為Lynda.com的會(huì)員，海量精品課程。
推薦“You Suck at Photoshop”系列
花費(fèi)幾個(gè)小時(shí)記住盡可能多的PS快捷鍵。

25.學(xué)習(xí)每一個(gè)HTML標(biāo)簽

雖然有些HTML標(biāo)簽很少用到，但你依然應(yīng)該了解他們。比如“abbr”、“cite”等，你必須學(xué)習(xí)它們以備不時(shí)之需。

順便說(shuō)下，如果你不熟悉上面兩個(gè)標(biāo)簽，可以看下下面的解釋：

abbr 和你估計(jì)的差不多，它是abbreviation的縮寫（英語(yǔ)差的估計(jì)不到），“Blvd”能用<abbr>標(biāo)簽包裹，因?yàn)樗恰癰oulevard”的縮寫。（喜大普奔也可以嘍）。
cite 被用來(lái)作為引用內(nèi)容的標(biāo)題（blockquote）。例如，如果你在你的博客中引用本篇文章，你可以將“給HTML初學(xué)者的三十條最佳實(shí)踐”用<cite>包裹，注意它不應(yīng)該被用來(lái)包裹引用的作者，這是常見的誤區(qū)。

26.參與社區(qū)討論

網(wǎng)絡(luò)上有許許多多優(yōu)秀的資源，而社區(qū)中也隱藏著許多高手，這里你既可以自學(xué)，也能請(qǐng)教經(jīng)驗(yàn)豐富的開發(fā)者。

27.使用reset.css

Css Reset也就Reset Css ,就是重置一些HTML標(biāo)簽樣式，或者說(shuō)默認(rèn)的樣式。

關(guān)于是否應(yīng)該使用CSS Reset，網(wǎng)上也有激烈的爭(zhēng)論，筆者是建議使用的。你可以先選用一些成熟的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.對(duì)齊元素

簡(jiǎn)單來(lái)說(shuō)，你應(yīng)該盡可能的對(duì)齊你的網(wǎng)頁(yè)元素?？梢杂^察一下你喜歡的網(wǎng)站，它們的LOGO、標(biāo)題、圖表、段落肯定是對(duì)得非常整齊的。否則就會(huì)顯得混亂和不專業(yè)。

29.關(guān)于PSD切片

現(xiàn)在你已經(jīng)掌握了HTML、CSS、Photoshop知識(shí)，那么你還需要學(xué)習(xí)如何把PSD轉(zhuǎn)換為網(wǎng)頁(yè)上的圖片和背景，下面有兩個(gè)不錯(cuò)的教程：

Slice and Dice that PSD
From PSD to HTML/CSS

30.不要隨意使用框架

Javascript和CSS都有許多優(yōu)秀的框架，但如果你是初學(xué)者，不要急于使用它們。如果你還沒能熟練的駕馭CSS，使用框架會(huì)混淆你的知識(shí)體系。盡管你可能能會(huì)說(shuō)javascript和jQuery是可以同事學(xué)習(xí)的，但這對(duì)css并不適合。我個(gè)人提倡960 CSS 網(wǎng)格框架，并且我經(jīng)常使用它。還是那句話，如果你是css的初學(xué)者，學(xué)習(xí)框架只會(huì)讓你更加困惑。

CSS框架是為熟練開發(fā)者設(shè)計(jì)的，這樣會(huì)節(jié)省它們大量的時(shí)間。

譯者注

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

html5標(biāo)準(zhǔn)放寬了要求，允許標(biāo)簽不閉合，而且瀏覽器也能很好的修正這個(gè)問題，但這并不是你不閉合標(biāo)簽的理由，有時(shí)不閉合標(biāo)簽可能帶來(lái)無(wú)法預(yù)知的錯(cuò)誤。放寬標(biāo)準(zhǔn)其實(shí)是降低了開發(fā)的門檻，這本是web的真諦，人人可參與，其實(shí)xhtml規(guī)范要求頁(yè)面有錯(cuò)誤就停止渲染，這本身并不現(xiàn)實(shí)，而且瀏覽器也從來(lái)沒有這么做過(guò)，畢竟用戶寧愿看到有些錯(cuò)誤的頁(yè)面，也不愿看到白板一張。

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

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

#16

sublime

#20

我以前也曾這樣，確實(shí)學(xué)到不少知識(shí)，但自從看了曲黎敏副教授講解的《黃帝內(nèi)經(jīng)》后，就不這樣了，我也不建議你這樣，11點(diǎn)是睡覺的最晚時(shí)間了

#23

英文原文標(biāo)題為“使用twitter ”，這個(gè)在中國(guó)應(yīng)該是微博么！??！

#25

address標(biāo)簽也容易被誤用，你不見得知道哦！

#27

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

meyer 的 reset.css
html5doctor的 reset.css
normalize.css

#30

現(xiàn)在bootstrap或來(lái)著居上，本人提倡這個(gè)框架，發(fā)展很猛，當(dāng)然還有好多框架都很不錯(cuò)哦。

#31

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

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

給javascript初學(xué)者的24條建議
高效jQuery的奧秘

以上內(nèi)容是否對(duì)您有幫助：

正確使用HTML title屬性 →

寫筆記

我要補(bǔ)充