首頁 web前端 html教學 HTML初學者適用的十五條最佳實踐

HTML初學者適用的十五條最佳實踐

Feb 24, 2017 am 10:27 AM
html

以下就是HTML初學者適用的三十條最佳實踐,分享給大家供大家參考,具體內容如下

#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論壇,每當用戶遇到問題,我們會建議他首先做兩件事:

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

2. 確認新增了正確的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檔案放在底部

要記住一個原則,就是讓頁面以最快的速度呈現在使用者面前。當載入一個腳本時,頁面會暫停加載,直到腳本完全載入並執行完成。因此會浪費用戶更多的時間。

如果你的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.使用無序列表(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]”。

以上就是本文的全部内容,希望对大家学习有所帮助。

更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

See all articles