在運營Nettuts+過程中，最困難的莫過于需要滿足各種不同技能水平的人群了。如果我們發布了過多的高級教程，那么對于初學者來說無疑就會失去平衡感。相反也是同樣的道理。我們盡全力，希望顧及到的是所有人的利益。
這個網站是為您服務的，有需要的那么就請說出來吧！像所說的那樣，今天的這篇教程 是為那些剛剛步入web開發的初學者提供的。如果您只有一年或者更少，那么希望這里列出來的條目會對您有所幫助，并且能夠學習得更好，更便捷!
排除任何的干擾，當您在創建標示的時候，就來回顧下這30個最佳實踐吧。
大家好，是叫Jeff。我是 Nettuts+ 的一名編輯，同時，我也是 Theme Forest網站的管理者。我在電腦前待得太多了，以至于我經常會對我的未婚妻說，”我們將會在5分鐘之后走!”。我不能做到，當然依然在用 Firebug調試錯誤的時候就跟我的未婚妻出去吃飯…這使得我很瘋狂。我熱愛 jQuery, PHP, MYSQL, CSS, AJAX - 幾乎所有。如果這些對你也備受青睞，請在 Twitter 上 追蹤我們 。
回顧過去，這樣的代碼并不少見:
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
請注意，這里的 UL/OL 已被省略。另外，很多都選擇沒有閉合 LI 標簽。按照今天的標準，這是個非常糟糕的低級錯誤，必須 100% 避免。一如既往，始終要閉合您的標記。否則，每次您都會碰到驗證及一些故障問題。
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
當我還很年輕的時候，我加入了很多的 CSS 論壇。每當有用戶存在一個問題，我就會查看下他們的環境，并要求他們先執行兩件事:
驗證 CSS 文件。修正任何必要的錯誤。
添加 doctype聲明。
“DOCTYPE 在打開HTML 頁面標簽的最開始部位顯示，它會告訴瀏覽器當前包含的是 HTML, XHTML, 還是兩者的混合版，以便它能夠正確地解釋的標記。”
通常我們都會選擇下面四個不同的 doctypes 中的其中一個來創建我們新的網站。
<!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”>
如何選擇這個類別，當今存在著很大的爭議。有一點是明確的，使用嚴格的 XHTML 版本被認為是最佳做法。然而，經過研究，人們認識到，大多數的瀏覽器在詮釋的時候依然會恢復到正常 HTML。因為這個原因，大多數都選擇嚴格的HTML 4.01作為替代。所有這些的底線是，它們依然多會對您的代碼做些檢測。做一些調查，最終得出自己的結論吧！
當然非常努力地在作標示的時候，經常會選擇一些捷徑，偷偷地內置一些樣式到標示中。
<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;
}
從技術上來說，您可以將這個樣式放置在任何您想放的任何地方。然而，HTML規格推薦您放再文檔的 HEAD 標簽內。主要的好處是，這樣您的網頁渲染會加載得更加快。
通過研究Yahoo中的表現，我們發現將樣式移動到文檔的 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>
記住 — 主要的目的是為了使頁面在客戶端的加載越快越好。當腳步在下載的時候，瀏覽器在文件下載完場之前是不會繼續載入的。因此，用戶還需要等待更長的時候才會有其它的進展。
如果您包含了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>
幾年前的推薦做法都是將JS文件直接內置在標簽內。這對于幾個簡單的圖像畫廊式的非常常見。實際上，”onclick” 屬性是出現在標簽內的。這等價于JS的處理程序。毫無疑問，您永遠都不應該這么做。相反，這段代碼已經轉移到一個外部的JS文件中，然后使用“ addEventListener / attachEvent ”為您需要監聽的事件中添加這個。或者，如果您使用的是像jQuery 這樣的框架，就請使用 “click” 方法。
$(‘a#moreCornInfoLink’).click(function() {
alert(‘Want to learn more about corn?’);
});
我最近提到的關于如何驗證的想法，不要曲解理解它的最終目的。正如我在文章中提到的， “確保驗證是為您服務，而不是打擊。”
不過，特別是剛開始的時候。我就強烈推薦您下載 Web Developer Toolbar，并且經常使用 “Validate HTML” 和 “Validate CSS” 選項。雖然CSS是門非常易學的語言，但也會經常令您抓狂。正如您最終發現的那樣，劣質的代碼才是造成問題的關鍵。記住驗證，驗證，加驗證。
技術上將，您完全可以消除這方面的標記寫法。
<DIV>
<P>Here’s an interesting fact about corn. </P>
</DIV>
<div>
<p>Here’s an interesting fact about corn. </p>
</div>
誠然，這有時候讓我皮預處理。最好的做法是將這六個標記全部都運用起來。老實說，通常我只執行這前面的四個，我就是這么工作的!:)。由于語義及SEO原因，在適當的時候用H6來替代P標簽吧。
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
不管如何，確定一個時候您自己的網站的吧。但是，如果是建立博客，我的建議是用H1標記來作為標示您的文章標題。對于SEO而言，這無疑是更好的做法。
<div id=“nav”>
<a href=“#”>Home </a>
<a href=“#”>About </a>
<a href=“#”>Contact </a>
</div>
就語言而言，我建議您不要使用這種方法。您的任務是盡您所能寫出最好的代碼。
為什么要給我們的導航連接定義其它而不是無序列表？
UL標簽的作用就是包含項目清單。
<ul id=“nav”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>About</a></li>
<li><a href=“#”>Contact</a></li>
</ul>
無疑某天您肯定會為了IE中的某點會其它而尖叫。它實際上已成為社區中討論的焦點。檔我再Twitter上看到我的一個朋友因為IE而苦惱，我總是笑笑，并承認，“我知道你的感受，朋友。 ”
首先，一旦您完成CSS主文件的編寫，創建一個單獨的“ ie.css ”文件。然后在此加入只針對IE瀏覽器的代碼。
<!–[if lt IE 7]>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/ie.css” />
<![endif]–>
這段代碼表示，“如果用戶的瀏覽器版本是IE6或者更低，就載入這個樣式。否則就什么都不做。”如果您想要針對IE7，同樣也可以采用這樣的方式，用“lte”（小于或等于）來替代“lt”吧
一旦您完成了您的標記，瀏覽兩次吧，并設法降低網頁中標記的數量。確認UL標示是否真的需要包含DIV？我想不是的。
就想關鍵字所描述的那樣 “削減, 削減, 削減,” 同樣適用于您的標記。
人們很容易忽略標記ALT屬性在圖像中的必要性。但是，這的確很重要，就可訪問性跟驗證而言，您就很有必要花費一些額外的時間來填補這些片段。
<IMG SRC=“cornImage.jpg” />
<img src=“cornImage.jpg” alt=“A corn field I visited.” />
我高度懷疑，我是唯一的一個。在我還在學習的那刻，卻已經是凌晨了。如果您發現自己也是處于類似的情況，請放心，您已經選擇了一個正確的領域。
令人驚奇的“ AHHA ”的時刻，至少對我來說，總是發生在深夜。這種情況在我懂得什么是JavaScript閉合的時候發生過。這是一個強大的感覺，您需要這種感覺，如果您還有沒有過的話。
留意到一些非常酷的JavaScript效果，您想掌握它？他看起來是像用一些插件來完成這些效果的。查看源代碼，在HEAD標記中尋找腳步的名稱。然后通過Google搜索它并插入您自己的網站。就這樣。
這一做法對于給客戶做設計階段顯得尤其有效。僅因為您不會使用引用并不意味著用戶也會同樣不會。切勿使用命令列表？這并不意味著別人也不會！一切都 是為了自己服務的，創建一個特殊的頁面，目的是為了展示每個元素的樣式：ul,ol,p,h1-h6,blockquotes,等等。(譯者注：并不是很 明白這段話的含義，您理解了嗎？)
(This best practice is especially true when designing for clients. Just because you haven’t use a blockquote doesn’t mean that the client won’t. Never use ordered lists? That doesn’t mean he won’t! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.)
起初，隱藏在Twitter背后的想法僅僅是“您在干什么。”雖然這個在一個小范圍內仍然適用，但它顯然已經衍生我們行業中不可或缺的網絡工具。如 果我欽佩的一個web開發寫手發現了一篇感興趣的文章，您最好也是相信，我也應該去看看才是，您應該這樣！這就是為什么像Digg這樣的網站迅速得以成長 的原因吧。
事實上，Photoshop可能已經成為您最重要的工具之一。一旦您掌握了HTML和CSS，那么我個人建議您應該學下Photoshop的技巧，當然是越多越好了。
訪問 Psdtuts+ 中的 Videos section
花費 $25/月 在 Lynda.com 上注冊會員。盡量查看更多的視頻。
喜歡 “You Suck at Photoshop” 系列文章.
花費幾個小時盡量記住您所能記住的PS熱鍵。
字面上去查看，HTML標記總共也就那么幾十個，當然您也不會每天都會用到。然而，這并不意味著您就不應該去了解他們！您對標記“abbr”熟悉嗎？“cite”呢？這兩個獨特的應該加入您的工具箱中。了解他們中的所有吧！
順便說一下，如果您對以上提到的兩個還不熟悉:
abbr 就如您期盼的那樣，非常優雅。它指的是一個縮寫（abbreviation）。”Blvd” 可以被標記包裹，因為它是”boulevard”的縮寫。
cite 是用來引用標題的一些事物。例如，如果您引用了這篇文章到您自己的博客中，那么您可以將“30個寫給HTML初學者的最佳實踐”放置在標簽 <cite> 內。請注意，這不應該用來引用參考作者來舉證。這是一種常見的錯誤。
就像我們的網站對于普及web知識的傳播所作出的貢獻一樣，您也是可以的！終于發現了，如果才能正確地運用浮動元素？發布一篇博客告訴別人您是怎么 做到的吧。要知道，總有比您經驗更少的人出現。這樣不僅可以教會您自己，而且還是對社會作出的一種貢獻。以往您不知道的并不真正了解的，如此反而會促使您 去學習它？
這是另外一個已經被判處死刑了的辯論。CSS resets: 使用好呢，還是不使用；這是個問題。如果要求的僅僅是我的個人意見，那么我是100%推薦您創建一份自己的 reset 文件吧。剛開始的時候下載個流行的吧，例如 Eric Meyer’s 的，然后慢慢地，掌握更多了，學著去修改它并加入您自己的思想。如果您不這樣做，那么您就會難以理解，為什么您的清單列表中為什么就多了個填充空白呢，甚至于您根本就沒有在CSS文件中的任何地方定義過！控制您的憤怒，重置所有的樣式吧！這應該可以讓您重新開始使用。
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;
}
一般來說，您應該努力地使您的元素排列盡可能地整齊。瀏覽下您最喜歡的設計。您有沒有注意到，每個頭部, icon， 段落和logo是不是都是整齊地布置再頁面中的？沒有做，那么這是判斷初學者的一個最大的跡象。想想這個問題：如果我問，您為什么要將這個元素放在這個點 上的，那么您就應該有一個確切的理由。
框架，無論是針對JavaScript又或是CSS 都是極好的；但請不要在初學的時候就使用它。雖然都認為在使用jQuery和Javascript的同時可以學到很多，但這個不能針對CSS。我個人曾親自參與推動960 CSS 跨家的實施，我也經常使用它。話雖如此，如果您始終停留在CSS的學習階段–意思是學習的第一年–使用之后只會讓您自己變得更加迷惑。
CSS 框架是針對那些經驗豐富的，想要多節省一些開發的時間。他們可不是初學者。
