比如，一個(gè)頁面的頭部信息應(yīng)該這樣寫：

<header> <h1>網(wǎng)站標(biāo)題<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712h1> <nav> <ul> <li><a href="http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712">首頁<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712a><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <li><a href="http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712about">關(guān)于<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712a><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712nav> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712header><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712pre><p>而不是全用<code><div><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 包起來，那樣對(duì)機(jī)器和人都不夠友好。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></code></p><h3>合理嵌套與縮進(jìn)<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712h3></h3><p>HTML 是一種嵌套結(jié)構(gòu)的語言，合理的縮進(jìn)能讓層級(jí)關(guān)系一目了然。建議使用兩個(gè)或四個(gè)空格進(jìn)行縮進(jìn)，并保持一致性。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p> <img src="/static/imghw/default1.png"  data-src="https:http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttp://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttp://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttp://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712000http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712000http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712000http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712175363378891632.jpeg"  class="lazy" alt="Clean HTML ?? ????? ?? ??" http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712></p><p>舉個(gè)例子：<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p> <pre class='brush:html;toolbar:false;'><ul> <li>列表項(xiàng)1<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <li>列表項(xiàng)2 <ul> <li>子項(xiàng)1<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <li>子項(xiàng)2<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712pre><p>注意幾點(diǎn)：<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p><ul><li>每層只縮進(jìn)一次，避免過度縮進(jìn)導(dǎo)致混亂<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></li><li>不要混用tab 和空格，容易造成格式錯(cuò)亂<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></li><li>如果是團(tuán)隊(duì)協(xié)作，統(tǒng)一縮進(jìn)風(fēng)格很重要<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul><h3>給元素添加有意義的class 和id<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712h3></h3> <p>class 和id 是連接HTML 和CSS、JavaScript 的橋梁。起名要有意義，別圖省事寫<code>div1<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 、 <code>box2<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 這樣的名字。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></code></code></p><p>推薦做法：<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p><ul><li>用描述性的命名方式，比如<code>.menu<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 、 <code>.post-content<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 、 <code>.user-profile<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></code></code></code></li><li>遵循命名規(guī)范，比如BEM 或kebab-case<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></li><li>避免重復(fù)ID，ID 應(yīng)該在整個(gè)頁面中唯一<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul><p>比如你想做一個(gè)按鈕組件，可以這樣寫：<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p> <pre class='brush:html;toolbar:false;'><button class="btn btn-primary">提交<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712button><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712pre><p>這樣一看就知道這是一個(gè)“主要按鈕”，也方便后續(xù)在CSS 中統(tǒng)一控制樣式。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p><h3>刪除不必要的注釋和代碼<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712h3></h3><p>很多人習(xí)慣在HTML 里寫很多注釋，比如<code><!-- end of header --><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 。其實(shí)如果結(jié)構(gòu)清晰，根本不需要太多注釋。相反，過多的注釋反而會(huì)干擾閱讀。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></code></p><p>另外，上線前記得清理掉：<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p><ul><li>被注釋掉但不再使用的代碼<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></li><li>多余的空白行或標(biāo)簽<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li></li><li>測(cè)試用的臨時(shí)內(nèi)容<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712li><http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712ul><p>如果你是在開發(fā)階段保留注釋沒問題，但發(fā)布版本盡量精簡。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p><p>基本上就這些。寫干凈的HTML 并不難，關(guān)鍵是在日常編碼中多留心結(jié)構(gòu)和命名，養(yǎng)成良好的習(xí)慣。<http://ipnx.cn/link/29a9f8c8460e5e2be4edde557fd83712p></p></li></ul>