Web前端代碼中，HTML是根本，CSS和JavaScript也是圍繞著既有的HTML結(jié)構(gòu)來構(gòu)建，所以良好的HTML代碼結(jié)構(gòu)，除了提高了HTML代碼的可讀性，可維護(hù)性和執(zhí)行性能之外，也可以讓相對應(yīng)的CSS和JavaScript代碼更好的構(gòu)建。距前面兩篇探討JavaScript（前端代碼標(biāo)準(zhǔn)最佳實(shí)踐：JavaScript篇）和CSS（前端代碼標(biāo)準(zhǔn)最佳實(shí)踐：CSS篇）之后，我們今天來探討Web前端HTML的一些最佳實(shí)踐。
任何代碼的混亂都是從命名和格式的混亂開始的，所以一定要有統(tǒng)一和規(guī)范的命名和格式，以下是一些基本的規(guī)范。
HTML代碼所有的標(biāo)簽名和屬性應(yīng)該都為小寫，雖然HTML代碼是大小寫不敏感的，但是W3c的規(guī)范建議為小寫；屬性值應(yīng)該用雙引號包括。
給所有的關(guān)鍵元素定義元素的id和class，便于和CSS，JavaScript的交互；id名稱中的關(guān)鍵詞用下劃線（_）連接，class的關(guān)鍵詞用中劃線（-）連接，根據(jù)實(shí)際的意義和Dom樹的層級關(guān)系定義合適的名稱。
HTML代碼的層級縮進(jìn)為4個(gè)空格；值為空的元素定義應(yīng)該單獨(dú)占用一行；包含子元素的元素的起始標(biāo)簽和閉合標(biāo)簽分別單獨(dú)占用一行。
例子：
<div id="info_container" class="info-container"> <div class="container-top"></div> <article> ... </article> <div class="container-bottom"></div></div>
樣式可以直接寫在標(biāo)簽的style屬性里面，也可以寫在頁面head區(qū)域的style標(biāo)簽里面，這兩種方式都是不好的方式，尤其第一種方式。應(yīng)該把樣式單獨(dú)寫到css樣式文件中，方便代碼的重用和維護(hù)。
所有的HTML標(biāo)簽應(yīng)該正確閉合；所有的元素定義都要有起始和閉合標(biāo)簽，即使元素的值為空，除了如下這些標(biāo)簽，如下的標(biāo)簽是可以自閉合：<br/><hr/><input/><img/>等。
停止規(guī)范不支持的標(biāo)簽，如下的標(biāo)簽規(guī)范已經(jīng)不推薦使用，盡管瀏覽器可以正確的解析：<center><font><s><strike><u><menu>等。
停止使用規(guī)范不支持的屬性，如下的屬性已經(jīng)不推薦使用：body的background屬性，某些標(biāo)簽的align屬性，td和th上的nowrap屬性，某些標(biāo)簽的width和height屬性等。其實(shí)這些規(guī)范不推薦的標(biāo)簽和屬性都是一些影響外觀的標(biāo)簽和屬性，都可以通過CSS樣式來設(shè)置。
應(yīng)該經(jīng)常驗(yàn)證代碼的標(biāo)準(zhǔn)性，可以使用w3c提供的驗(yàn)證工具:Unicorn。
HTML代碼不是純粹為了讓瀏覽器展現(xiàn)，也需要良好的可讀性，方便代碼的檢查和維護(hù)，更重要的是各種搜索引擎也能更好地識別頁面內(nèi)容，所以要寫有語義的HTML代碼，即經(jīng)常提到的HTML標(biāo)簽語義化。
div和span是兩個(gè)典型的沒有任何語義的標(biāo)簽，所以使用這兩個(gè)標(biāo)簽之前先確認(rèn)，是否有更具有語義的標(biāo)簽可以代替。
h1到h6是作為標(biāo)題的，h1是最高級別的標(biāo)題，網(wǎng)頁中顯示標(biāo)題的地方應(yīng)該使用這些標(biāo)題標(biāo)簽。
這兩個(gè)標(biāo)簽的語義是強(qiáng)調(diào)和重點(diǎn)強(qiáng)調(diào)，代替了沒有任何語義的標(biāo)簽<i>和<b>。
table標(biāo)簽最早是經(jīng)常用于布局，至今還有大量的頁面是由table來布局的，table布局遭到了前端工程師們的一致唾棄，使得很多新手不敢使用這個(gè)標(biāo)簽了，這里要強(qiáng)調(diào)的是table的語義是表格，如果需要列出一些統(tǒng)計(jì)數(shù)據(jù)等，table標(biāo)簽是首選。
<ul>是無序列表，<ol>是有序列表，所以網(wǎng)頁的導(dǎo)航菜單最合適用ul，而一些有序的列表，比如章節(jié)列表等，則應(yīng)該用ol標(biāo)簽。
不好的例子：
<div class="title">文章標(biāo)題</div><p>正文內(nèi)容，<b>需要強(qiáng)調(diào)的內(nèi)容</b></p><div class="main-menu"> <span>導(dǎo)航1</span> <span>導(dǎo)航2</span> <span>導(dǎo)航3</span></div>
規(guī)范的例子：
<h1>文章標(biāo)題</h1><p>正文內(nèi)容，<strong>需要強(qiáng)調(diào)的內(nèi)容</strong></p><ul class="main-menu"> <li>導(dǎo)航1</li> <li>導(dǎo)航2</li> <li>導(dǎo)航3</li></ul>
meta信息描述有關(guān)頁面的信息，放在頁面的head部分，用于搜索引擎更友好的識別。如下是常用的一些定義：
<meta name="author" content="John Doe"><meta name="copyright" content="© 1997 Acme Corp."><meta name="keywords" content="corporate,guidelines,cataloging"><meta name="date" content="1994-11-06T08:49:37+00:00">
<img>標(biāo)簽的alt屬性的作用是當(dāng)圖片不能正常顯示的時(shí)候的替換文字，<a>標(biāo)簽的title屬性可作為說明信息，并且當(dāng)鼠標(biāo)hover時(shí)顯示為提示信息。
JavaScript文件的下載和解析會(huì)阻塞頁面的加載，所以在head部分，CSS的引用寫在前面，而JavaScript文件的引用寫在后面；
另外script標(biāo)簽有兩個(gè)屬性async和defer,defer設(shè)置為true,則意味著此JavaScript文件滯后執(zhí)行,不影響頁面HTML的渲染，async是HTML5中新引入的屬性，已經(jīng)得到了大多數(shù)現(xiàn)代瀏覽器的支持，此屬性設(shè)置為true意味著文件異步加載和執(zhí)行。兩個(gè)屬性的區(qū)別是async下載完成后就會(huì)執(zhí)行，而defer則會(huì)還是按照在頁面的的次序來執(zhí)行，所以下載和執(zhí)行不一定會(huì)連續(xù)?？梢愿鶕?jù)實(shí)際的項(xiàng)目情況設(shè)置這兩個(gè)屬性，提高頁面加載的速度。
越精簡的HTML代碼，頁面的傳輸?shù)臅r(shí)間就會(huì)越短，頁面的渲染的時(shí)間也會(huì)更快,相應(yīng)的用戶體驗(yàn)就會(huì)越好，所以很有必要精簡頁面加載的HTML代碼。
頁面的精簡主要從如下幾個(gè)地方入手：
多余的標(biāo)簽大多是為了方便布局而加入的，例如如下的代碼：
<div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul></div>
代碼中最外層的div標(biāo)簽大部分情況下是沒有必要，其內(nèi)層的ul標(biāo)簽可以完全擔(dān)當(dāng)其作用，可以直接刪除此標(biāo)簽，并適當(dāng)調(diào)整ul的樣式。
在頁面中某些區(qū)域并不是用戶重點(diǎn)關(guān)注的區(qū)域，例如頁面的廣告，一些統(tǒng)計(jì)信息等，此類內(nèi)容可以等待頁面關(guān)鍵區(qū)域加載后通過javascript代碼動(dòng)態(tài)加載和顯示。
iframe有兩個(gè)缺點(diǎn)：1，iframe會(huì)阻塞主頁面的Onload事件；2，iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會(huì)影響頁面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。
如果需要使用iframe，最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個(gè)問題。
以上是一些常見的HTML開發(fā)過程中要注意的地方，其實(shí)有關(guān)HTML還有很多細(xì)節(jié)的技巧，需要我們在實(shí)踐中不斷的總結(jié)。本文的目的在于拋磚引玉，讓大家重視代碼的可讀性，可維護(hù)性，以及代碼的性能，在開發(fā)的過程中有意識地去考慮這些問題，養(yǎng)成良好的編碼習(xí)慣比熟悉某項(xiàng)開發(fā)技術(shù)更重要。
聯(lián)系客服
