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