給HTML初學者的三十條最佳實踐

時間 2019-11-09

標籤 html 初學者三十最佳實踐欄目 HTML 简体版

原文原文鏈接

Nettuts +運營最困難的方面是爲不少技能水平不一樣的用戶提供服務。若是咱們發佈太多高級教程，個人新手用戶將沒法從中受益。相反也是如此。咱們盡咱們最大的努力，但若是你以爲你被忽略了請聯繫咱們。這個網站是爲你服務的，因此說出來！如此說來，今天的教程是專爲那些剛剛進入web開發領域的人準備的。若是你的經驗是一年或更少，但願在這裏列出的一些技巧將幫助你成爲更好、更高效的開發者!javascript

閒話少說，讓咱們回顧三十個建立標記的最佳實踐。php

1.保持標籤閉合

之前，常常見到相似下面的代碼（譯註：這是多久之前啊……）：css

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

注意外面包裹的UL/OL標籤被遺漏了（誰知是故意仍是無心的），並且還忘記了關閉LI標籤。按今天的標準來看，這是很明顯的糟糕作法，應該100%避免。總之，保持閉合標籤。不然，你驗證html標籤的時候可能遇到問題。html

更好的方式前端

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

2.聲明正確的文檔類型

筆者早先曾加入過許多CSS論壇，每當用戶遇到問題，咱們會建議他首先作兩件事：html5

1. 驗證CSS文件，保證沒有錯誤。java

2. 確認添加了正確的doctypejquery

DOCTYPE 出如今HTML標籤以前，它告訴瀏覽器這個頁面包含的是HTML，XHTML，仍是二者混合，這樣瀏覽器才能正確解析。git

一般有四種文檔類型可供選擇：github

<!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」>

關於該使用什麼樣的文檔類型聲明，一直有不一樣的說法。一般認爲使用最嚴格的聲明是最佳選擇，但研究代表，大部分瀏覽器會使用普通的方式解析這種聲明，因此不少人選擇使用HTML4.01標準。選擇聲明的底線是，它是否是真的適合你，因此你要綜合考慮來選擇適合你得項目的聲明。

3.永遠不要使用內聯樣式

當你在埋頭寫代碼時，可能會常常順手或偷懶的加上一點行內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>

這樣看起來即方便又沒有問題。然而，這在你的編碼實踐中是個錯誤。

在你寫代碼時，在內容結構完成以前最好不要加入樣式代碼。

這樣的編碼方式就像打游擊，是一種很山寨的作法。——Chris Coyier

更好的作法是，完成標籤部分後，再把這個P的樣式定義在外部樣式表文件裏。

建議

#someElement > p {  
  color: red;  
}

4.將全部外部css文件放入head標籤內

理論上講，你能夠在任何位置引入CSS樣式表，但HTML規範建議在網頁的head標記中引入，這樣能夠加快頁面的渲染速度。

雅虎的開發過程當中，咱們發現，在head標籤中引入樣式表，會加快網頁加載速度，由於這樣可使頁面逐步渲染。 —— ySlow團隊

<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文件放在底部

要記住一個原則，就是讓頁面以最快的速度呈如今用戶面前。當加載一個腳本時，頁面會暫停加載，直到腳本徹底載入並執行完成。所以會浪費用戶更多的時間。

若是你的JS文件只是要實現某些功能，（好比點擊按鈕事件），那就放心的在body底部引入它，這絕對是最佳的方法。

建議

<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.永遠不要使用內聯javascript。如今不是1996年了！

許多年之前，還存在一種這樣的方式，就是直接將JS代碼加入到HTML標籤中。尤爲是在簡單的圖片相冊中很是常見。本質上講，一個「onclick」事件是附加在標籤上的，其效果等同於一些JS代碼。不須要討論太多，很是不該該使用這樣的方式，應該把代碼轉移到一個外部JS文件中，而後使用「 addEventListener / attachEvent 」加入事件監聽器。或者使用jquery等框架，只須要使用「click」方法。

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

7.邊開發，邊驗證

不少人並不真正理解標準驗證的意義和價值，筆者在一篇博客中詳細分析了這個問題。一句話，驗證是爲你服務的，不是給你找麻煩的。

若是你剛開始從事網頁製做，那強烈建議你下載Web Developer Toolbar（chrome用戶請自行在應用商店搜索，ie用戶可能就杯具了），並在編碼過程當中隨時使用」HTML標準驗證」和「CSS標準驗證」。若是你認爲CSS是一種很是好學的語言，那麼它會把你整的死去活來。你不嚴謹的代碼會讓你的頁面漏洞百出，問題不斷，一個好的方法就是—— 驗證，驗證，再驗證。

8.下載firebug

Firebug是當之無愧的網頁開發最佳插件，它不但能夠調試JavaScript，還能夠直觀的讓你瞭解頁面標記的屬性和位置。不用多說，下載！

9.使用firebug

據筆者觀察，大部分的使用者僅僅使用了Firebug 20%的功能，那真是太浪費了，你不妨花幾個小時的時間來系統學習這個工具，相信會讓你事半功倍。

資源

10.保持標籤名小寫

理論上講，html不區分大小寫，你能夠隨意書寫，例如：

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

但最好不要這樣寫，費力氣輸入大些字母沒有任何用處，而且會讓代碼很難看.

建議

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

11.使用H1-H6標籤

筆者建議你在網頁中使用其中所有六種標記，雖然大部分人只會用到前四個，但使用最多的H會有不少好處，好比設備友好、搜索引擎友好等，不妨把你的P標籤都替換成H6。

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

12.寫博客時，請將H1留給文章標題

今天筆者在Twitter上發起一次討論：是該把H1定義到LOGO上仍是定義到文章標題上，有80%的人選擇了後者。

固然具體如何使用要看你的需求，但我建議你在創建博客的時候，將文章題目定爲H1，這對搜索引擎優化(seo)是很是有好處的。

13.下載ySlow

在過去幾年裏，雅虎的團隊在前端開發領域作了許多偉大的工做。前不久，它們發佈了一個叫ySlow的Firebug擴展，它會分析你的網頁，並返回一個「成績單」，上面細緻分析了這個網頁的方方面面，提出須要改進的地方，雖然它有點苛刻，但它絕對會對你有所幫助，強烈推薦—— ySlow！

14.使用無序列表（UL）包裹導航菜單

一般網站都會有導航菜單，你能夠用這樣的方式定義：

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

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

爲何要用UL佈局導航菜單？ ——由於UL生來就是爲定義列表準備的

最好這樣定義：

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

15.學習如何應對IE

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

若是你的CSS樣式表基本定型了，那麼能夠爲IE單獨創建一個樣式表，而後這樣僅對IE生效：

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

這些代碼的意思是：若是用戶瀏覽器是IE6及如下，那這段代碼纔會生效。若是你想把IE7也包含進來，那麼就把「[if lt IE 7]」改成「[if lte IE 7]」。

16.選擇合適的IDE

不論你是Windows仍是Mac用戶，這裏都有不少優秀的編輯器供你選擇：

Mac 用戶

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC 用戶

17.上線前，壓縮代碼

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

Javascript 壓縮服務

CSS Compression Services

18.精簡，精簡，在精簡

回望咱們大多數人寫的第一個頁面，必定會發現嚴重的「DIV癖」( divitis )，一般初學者的本能就是把一個段落用DIV包起來，而後爲了控制定位而套上更多的DIV。—— 其實這是一種低效而有害的作法。

網頁寫完後，必定要屢次回頭檢查，儘可能的減小元素的數量。能用UL佈局的列表就不要用一個個的DIV去佈局。

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

19.給全部圖片加上「alt」屬性

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

糟糕的作法

<IMG SRC="cornImage.jpg" />

更好的作法

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

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」能用<abbr>標籤包裹，由於他是「boulevard」的縮寫。（喜大普奔也能夠嘍）。
cite 被用來做爲引用內容的標題（blockquote）。例如，若是你在你的博客中引用本篇文章，你能夠將「給HTML初學者的三十條最佳實踐」用<cite>包裹，注意它不該該被用來包裹引用的做者，這是常見的誤區。

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轉換爲網頁上的圖片和背景，下面有兩個不錯的教程：

30.不要隨意使用框架

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

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

譯者注

這篇文章發表於2009年，彈指一揮間，4年時間已悄然溜走，文中有些知識已顯得陳舊過期，但不少規則一樣適用，下面是譯者補充的關於已通過時的建議，若是你以爲哪裏須要改進能夠參與討論。

html5標準放寬了要求，容許標籤不閉合，並且瀏覽器也能很好的修正這個問題，但這並非你不閉合標籤的理由，有時不閉合標籤可能帶來沒法預知的錯誤。放寬標準實際上是下降了開發的門檻，這本是web的真諦，人人可參與，其實xhtml規範要求頁面有錯誤就中止渲染，這自己並不現實，並且瀏覽器也歷來沒有這麼作過，畢竟用戶寧願看到有些錯誤的頁面，也不肯看到白板一張。

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