30個HTML代碼編寫技巧

來源:互聯網
上載者:User
Javascript和CSS都有許多優秀的架構,但如果你是初學者,不要急於使用它們。

本文總結了30條HTML代碼編寫指南,只要在編寫HTML代碼的過程中牢記它們,靈活運用,你一定會寫出一手漂亮的代碼,早日邁入專業開發人員的行列。

1. 一定要閉合HTML標籤

在以往的頁面原始碼裡,經常看到這樣的語句:

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

也許過去我們可以容忍這樣的非閉合HTML標籤,但在今天的標準來看,這是非常不可取的,是必須百分百避免的。一定要注意閉合你的HTML標籤,否則將無法通過驗證,並且容易出現一些難以預見的問題。

最好使用這樣的形式:

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

2. 聲明正確的文件類型( DocType )

筆者早先曾加入過許多CSS論壇,在那裡,如果有使用者遇到問題,我們會建議他首先做兩件事:

  • 1. 驗證CSS檔案,解決所有可見的錯誤
  • 2. 加上文件類型 Doctype

DOCTYPE 定義在HTML標籤出現之前,它告訴瀏覽器這個頁麵包含的是HTML,XHTML,還是兩者混合出現,這樣瀏覽器才能正確的解析標記。

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

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

關於該使用什麼樣的文件類型聲明,一直有不同的說法。通常認為使用最嚴格的聲明是最佳選擇,但研究表明,大部分瀏覽器會使用普通的方式解析這種聲明,所以很多人選擇使用HTML4.01標準。選擇聲明的底線是,它是不是真的適合你,所以你要綜合考慮來選擇適合你得項目的聲明。

3. 不要使用嵌入式CSS樣式

當你在埋頭寫代碼時,可能會經常順手或偷懶的加上一點嵌入式css代碼,就象這樣:

<p style="color: red;">網頁教學網</p>

這樣看起來即方便又沒有問題,但是它會在你得代碼中產生問題。

在你開始寫代碼時,最好是在內容結構完成之後再開始加入樣式代碼。

這樣的編碼方式就像打遊擊,是一種很山寨的做法。——Chris Coyier

更好的做法是,把這個P的樣式定義在樣式表檔案裡:

someElement > p {color: red;}

4. 在頁面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,這都21世紀了!

許多年以前,還存在一種這樣的方式,就是直接將JS代碼加入到HTML標籤中。尤其是在簡單的圖片相簿中非常常見。本質上講,一個“onclick”事件是附加在 標籤上的,其效果等同於一些JS代碼。不需要討論太多,非常不應該使用這樣的方式,應該把代碼轉移到一個外部JS檔案中,然後使用“ addEventListener / attachEvent ”加入時間接聽程式。或者使用jQuery等架構,之需要使用其“clock”方法。

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

7. 開發中隨時進行標準驗證

很多人並不真正理解標準驗證的意義和價值,筆者在一篇部落格中詳細分析了這個問題。一句話,標準驗證是為你服務的,不是給你找麻煩的。

如果你剛開始從事網頁製作,那強烈建議你下載這個網頁開發工具條 ,並在編碼過程中隨時使用”HTML標準驗證”和“CSS標準驗證”。如果你認為CSS是一種非常好學的語言,那麼它會把你整的死去活來。你的不嚴謹的代碼會讓你的頁面漏洞百出,問題不斷,一個好的方法就是—— 驗證,驗證,再驗證。

8. 下載Firebug

Firebug是當之無愧的網頁開發最佳外掛程式,它不但可以調試JavaScript,還可以直觀的讓你瞭解頁面標記的屬性和位置。不用多說, 下載它!

9. 使用Firebug!

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

Firebug教程

  • Overview of Firebug
  • Debug Javascript With Firebug – video tutorial

10. 使用小寫標記

理論上講,你可以像這樣隨性的書寫標記:

<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。

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. 使用一個好的代碼編輯器

不論你是Windows還是Mac使用者,這裡都有很多優秀的編輯器供你選擇:

Mac 使用者

  • Coda
  • Espresso
  • TextMate
  • Aptana
  • DreamWeaver CS4

PC 使用者

  • InType
  • E-Text Editor
  • Notepad++
  • Aptana
  • Dreamweaver CS4

17. 壓縮前端代碼!

Javascript 壓縮服務

  • Javascript Compressor
  • JS Compressor

CSS Compression Services

  • CSS Optimiser
  • CSS Compressor
  • Clean CSS

18. 縮減,縮減,縮減

回望我們大多數人寫的第一個頁面,一定會發現嚴重的 “DIV癖”( divitis ),通常初學者的本能就是把一個段落用DIV包起來,然後為了控制定位而套上更多的DIV。—— 其實這是一種低效而有害的做法。

網頁寫完後,一定要多次回頭檢查,盡量的減少元素的數量。

能用UL布局的列表就不要用一個個的DIV去布局。

正如寫文章的關鍵是“縮減,縮減,縮減”一樣,寫頁面也要遵循這個標準。

19. 為所有的圖片加上Alt屬性

為圖片加上alt屬性的好處是不言而喻的 —— 這樣可以讓禁用圖片或者使用特殊裝置的使用者無障礙得瞭解你的王爺資訊,並且對Image Search引擎友好。

Firefox不支援顯示映像Alt屬性,可以加入title屬性:

<img src="cornImage.jpg" alt="網頁教學網" title="網頁教學網" />
20. 學會熬夜

我經常不知不覺的學習工作到淩晨,我認為這是個很好的狀況。

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

21. 查看原始碼

沒有什麼比模仿你的偶像能讓你更快的學習HTML。起初,我們都要甘做複印機,然後慢慢得發展自己的風格。研究你喜歡的網站頁面代碼,看看他們是怎麼實現的。這是高手的必經之路,你一定要試一下。注意:只是學習和模仿他們的編碼風格,而不是抄襲和照搬!

留意網路上各種炫酷的JavaScript效果,如果看上去是使用了外掛程式,那根據它源碼中head標籤內的檔案名稱,就可以找到這個外掛程式名稱,然後就可以學習它據為己用。

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

這一條在你製作其他公司企業網站時尤為必要。你自己不使用blockquote標記?那使用者可能會用,你自己不使用OL?使用者也可能會。花時間做一個頁面,顯示出ul, ol, p, h1-h6, blockquotes, 等等元素的樣式,檢查一下是否有遺漏。

23. 使用第三方服務

譯者註:英文原文標題為“使用Twitter”

現在互連網上流行著許多可以免費加在網頁中的API,這些工具非常強大。它可以幫你實現許多巧妙的功能,更重要的是可以幫你宣傳網站。

24. 學習Photoshop

Photoshop是前端工程師的一個重要工具,如果你已經熟練掌握HTML和CSS,那不妨多學習一下Photshop。

  1. Psdtuts+上有許多英文的飾品教程:Videos section
  2. Lynda.com 也有大量教程,不過要支付$25美元
  3. “You Suck at Photoshop” 系列教程
  4. 花費幾個小時的時間學習Photoshop的快速鍵操作

25. 學習每一個HTML標籤

雖然有些HTML標籤很少用到,但你依然應該瞭解他們。比如“abbr”、“cite”等,你必須學習它們以備不時之需。

26. 參與社區討論

網路上有許許多多優秀的資源,而社區中也隱藏著許多高手,這裡你既可以自學,也能請教經驗豐富的開發人員。

27. 使用CSS Reset

Css Reset也就Reset Css ,就是重設一些HTML標籤樣式,或者說預設的樣式。

關於是否應該使用CSS Reset,網上也有激烈的爭論,筆者是建議使用的。你可以先選用一些成熟的CSS Reset,然後慢慢演變成適合自己的。

28. 對齊元素

簡單來說,你應該儘可能的對齊你的網頁元素。可以觀察一下你喜歡的網站,它們的LOGO、標題、圖表、段落肯定是對得非常整齊的。否則就會顯得混亂和不專業。

29. 關於PSD切片

現在你已經掌握了HTML、CSS、Photoshop知識,那麼你還需要學習如何把PSD轉換為網頁上的圖片和背景,下面有兩個不錯的教程:

  • Slice and Dice that PSD
  • From PSD to HTML/CSS

30. 不要隨意使用架構

Javascript和CSS都有許多優秀的架構,但如果你是初學者,不要急於使用它們。如果你還沒能熟練的駕馭CSS,使用架構會混淆你的知識體系。

CSS架構是為熟練開發人員設計的,這樣會節省它們大量的時間。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。