給前端開發初學者的30條最佳實踐
本篇文章是專為那些剛剛進入web前端開發領域的人準備的。如果你的經驗是一年或更少，希望在這裡列出的一些技巧將幫助你成為更好、更高效的開發者!
1.保持標籤閉合
以前，經常見到類似下面的程式碼（注：很久以前）：
<li>Some text here.<li>Some new text here.<li>You get the idea.
注意外面包裹的UL/OL標籤被遺漏了（誰知是故意還是無意的），而且還忘記了關閉LI標籤。按今天的標準來看，這是很明顯的糟糕做法，應該100%避免。總之，保持閉合標籤。否則，你驗證html標籤的時候可能遇到問題。
更好的方式
<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>
2.宣告正確的文件型別
筆者早先曾加入過許多CSS論壇，每當使用者遇到問題，我們會建議他首先做兩件事：
-
驗證CSS檔案，保證沒有錯誤。
-
確認添加了正確的doctype
DOCTYPE 出現在HTML標籤之前，它告訴瀏覽器這個頁面包含的是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”>
關於該使用什麼樣的文件型別宣告，一直有不同的說法。通常認為使用最嚴格的宣告是最佳選擇，但研究表明，大部分瀏覽器會使用普通的方式解析這種宣告，所以很多人選擇使用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檔案放在底部
[圖片上傳失敗...(image-768978-1551510893053)]
要記住一個原則，就是讓頁面以最快的速度呈現在使用者面前。當載入一個指令碼時，頁面會暫停載入，直到指令碼完全載入並執行完成。因此會浪費使用者更多的時間。
如果你的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.邊開發，邊驗證
[圖片上傳失敗...(image-b49128-1551510893053)]
很多人並不真正理解標準驗證的意義和價值，筆者在一篇部落格中詳細分析了這個問題。一句話，驗證是為你服務的，不是給你找麻煩的。
如果你剛開始從事網頁製作，那強烈建議你下載 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
在過去幾年裡，雅虎的團隊在前端開發領域做了許多偉大的工作。
14.使用無序列表（UL）包裹導航選單
[圖片上傳失敗...(image-eba8a1-1551511054002)]
通常網站都會有導航選單，你可以用這樣的方式定義：
<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 使用者
-
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。
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框架是為熟練開發者設計的，這樣會節省它們大量的時間。
自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？
沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。
很多時候跟著書和網站查詢資料學習，會發現沒有目標，學了很多卻不知道自己到底能夠做出什麼成績。要有一個清晰的職業學習規劃，學習過程中會遇到很多問題，你可以到我們的前端學習交流q-u-n【 731771211 】，基礎，進階。從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享，讓你無論是自學還是找相應的培訓都能讓你少走彎路。希望可以幫助你快速瞭解前端，學習前端
點選： 加入