html5應(yīng)遵循的規(guī)則有哪些

本文小編為大家詳細(xì)介紹“html5應(yīng)遵循的規(guī)則有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html5應(yīng)遵循的規(guī)則有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

html5應(yīng)遵循的規(guī)則：1、善用DIV來布局；2、將HTML標(biāo)簽和CSS樣式表分割開來；3、優(yōu)化CSS代碼；4、優(yōu)化JS文件，并將其放到頁面底部；5、善用標(biāo)題元素；6、在合適的地方使用合適的HTML標(biāo)簽；7、避免濫用div標(biāo)簽。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML已經(jīng)走過了近20年的發(fā)展歷程。從HTML4到XHTML，再到近十分火熱的HTML5，它幾乎見證了整個互聯(lián)網(wǎng)的發(fā)展。但是，即便到現(xiàn)在，有很多基礎(chǔ)的概念和原則依然需要開發(fā)者高度注意。Web前端開發(fā)培訓(xùn)小編向大家介紹這些應(yīng)該遵循的HTML5開發(fā)原則。

1、善用DIV來布局

當(dāng)開發(fā)一個Web頁面時，要考慮件事就是區(qū)分頁面重點。將這些內(nèi)容用DIV標(biāo)簽包含起來，頁面的代碼會呈現(xiàn)出整潔、縮進良好的風(fēng)格。

2、將HTML標(biāo)簽和CSS樣式表分割開來

好的頁面應(yīng)該將HTML標(biāo)簽和CSS樣式表分割開來。這是每一個Web開發(fā)者在接觸Web開發(fā)時就應(yīng)該知道的一條原則。然而，直到今天，仍然有很多開發(fā)者沒有嚴(yán)格遵循這一原則。

不要在HTML標(biāo)簽里內(nèi)嵌樣式表代碼。開發(fā)者應(yīng)該養(yǎng)成習(xí)慣，單獨建立文件，用以存放CSS樣式表。而這也將方便其他開發(fā)者在修改你的代碼時，能迅速完成工作。

3、優(yōu)化CSS代碼

現(xiàn)如今，為網(wǎng)站添加多個CSS文件的做法已經(jīng)很普遍。但是，當(dāng)網(wǎng)站包含的CSS文件過多時，會降低網(wǎng)站的響應(yīng)速度。解決辦法是：精簡代碼并對多個CSS文件進行優(yōu)化，將其合并成一個文件。這個辦法能顯著提升網(wǎng)站的加載速度。此外，有很多工具可以用來優(yōu)化CSS文件，例如CSS Optimizer、Clean CSS等。

對于CSS這塊，我們還推薦過你應(yīng)該知道的10個優(yōu)秀的CSS框架，可以了解一下CSS框架的種類和相關(guān)用法。

4、優(yōu)化JS文件，并將其放到頁面底部

和CSS一樣，為頁面添加多個JS文件也是很普遍的做法。但這同樣會降低網(wǎng)站的響應(yīng)速度。為此，開發(fā)者應(yīng)該精簡、優(yōu)化這些JS文件。

但有一點和CSS不同，瀏覽器通常不支持并行加載。這也就是說，當(dāng)瀏覽器加載JS文件時，將不再同時加載其它內(nèi)容。而這就導(dǎo)致了網(wǎng)頁的加載速度好像變慢了。

一個好的解決辦法是：將JS文件的加載順序放在后。為了實現(xiàn)這一目標(biāo)，開發(fā)者可以把JS代碼放在HTML文檔的底部，而好的位置是放在接近</body>標(biāo)簽的地方。

5、善用標(biāo)題元素

span到h7這些元素用來突出頁面的重點內(nèi)容。這有助于用戶更加關(guān)注頁面的重點部分。對于博客，我(指本文作者)推薦使用span標(biāo)簽來突出博客標(biāo)題。因為，博客標(biāo)題幾乎是頁面中重要的部分。

6、在合適的地方使用合適的HTML標(biāo)簽

HTML標(biāo)簽是構(gòu)造規(guī)范內(nèi)容結(jié)構(gòu)的關(guān)鍵。例如，〈em>標(biāo)簽用來強調(diào)重點內(nèi)容?！磒>標(biāo)簽適用于突出文章段落。如果想要在段落間加空行，就不要使用〈br />標(biāo)簽。

7、避免濫用div標(biāo)簽

并不是所有塊元素都應(yīng)該用〈div>標(biāo)簽來創(chuàng)建。例如，可以在內(nèi)聯(lián)元素的屬性里添加display:block，將其以塊元素的方式顯示。

8、屬性值統(tǒng)一加引號

雖然HTML5中有些屬性可以不加引號，但為了規(guī)范性，為每個屬性都加上引號。

9、避免一行代碼太長

頁面的大小是有限的，如果代碼過長，就會加入滾動條，導(dǎo)致代碼的可讀性降低。

10、img標(biāo)簽加入alt

圖片屬性加入alt后，當(dāng)圖片不能顯示時，alt的內(nèi)容可以填補圖片的空白，而且alt對于SEO優(yōu)化也是有好處的。

11、空行和縮進

在學(xué)習(xí)Java的時候，老師就教我們要給代碼加入注釋、空行和縮進，以提供代碼的可讀性。

12、關(guān)閉標(biāo)簽

html中的絕大多數(shù)標(biāo)簽都是成對出現(xiàn)的，如果某些標(biāo)簽未關(guān)閉，會出現(xiàn)文檔錯排等問題。即使某些標(biāo)簽可以使用單標(biāo)簽，也最好統(tǒng)一成關(guān)閉的標(biāo)簽，如p。還有像meta，最好寫成如下的形式：<meta charset="utf-8"/>。

讀到這里，這篇“html5應(yīng)遵循的規(guī)則有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。