Effective前端2：優化html標簽
借用Effective之名，開始寫Effective系列，總結一些前端的心得。
有些人寫頁面會走向一個極端，幾乎頁面所有的標簽都用div，究其原因，用div有很多好處，一個是div沒有默認樣式，不會有margin、background等初始化設置，另外可能會覺得不用div還能用啥。所以看他的頁面，一展開是div，再展開還是div，展開四、五層都是div。
這樣對用戶來說雖然沒什么區別，但是作為一名有追求的程序員，這種寫法看起來是比較難受的。有些人雖然知道html5新增了很多標簽，但也不怎么去研究它的用法，反正用傳統的div不是挺好的，為啥要去用兼容性不好的新東西。但是要是人人都這么想的話，新技術就不會發展了。有不一樣或者更好的選擇，當然要嘗試下。
補充一點，并不是說使用div不好，該用div還是得用div，只是有其它更好的選擇時應該選用其它的。
選用合適的標簽
1. 如果它是一段文字，那就用p標簽吧，如果它是一個標題，那就用h1~h5標簽吧，像下面這樣：
<pclass="title">你好，我是一個標題</p>
明明知道它是一個標題，為什么不用標題標簽呢：
<h2>你好我是一個真實的標題</h2>
這樣有個好處，讓你的標簽多樣化，寫樣式的時候用標簽選擇器，就不用套很多的class
2. 如果它是一個表單，那就用form吧，用form用很多優點，我在里面已經提到兩點，第一點是自動表單提交，通過寫一個form的 action 就能實現自動搜索跳轉：
<formid="search-form" action="/search">
<inputtype="search" name="keyword">
<inputtype="number" name="price">
</form>
而不用自己去獲取每個input的值，然后去拼參數跳轉。
第二點是，自動監聽回車事件提交，只要寫一個form，里面有input，用戶按回車就能自動提交，而不用自己去監聽keypress事件處理。
除了這兩點之外，寫一個form還有一個很大的好處，當你用傳統的jquery的選擇器獲取表單值的時候：
<div>
<inputid="user-name">
<inputid="password">
</div>
<script>
var userName = $("input#user-name").val(),
password = $("input#password").val();
</script>
在這里，你為了獲取兩個表單數據，查了兩次DOM，假設你有10個，就得查10個，如果是20個呢，對性能就會有影響了吧，特別是在移動端。但是如果你把div換成form，情況就不一樣了：
<formid="register">
<inputname="user-name">
<inputname="password">
</form>
在獲取表單數據時，可以這樣用：
var form = document.forms.namedItem("register");
//var form = document.getElementById("register"); 或者這樣寫
var userName = form["user-name"].value,
password = form.password.value;
只需要用原生的form屬性就可以獲取到表單的input，不用jquery，不用查DOM。同時這樣有個弊端，就是當那個name的input不存在時，form.password是undefined，然后再獲取value就掛了，但是這樣早點暴露問題在某些情況下會更好呢
html5 input
htm5提供了很多類型的input，使用這些input有很多好處，游覽器會根據不同的input做出相應的優化，例如在iphone上，使用不同的input會彈出不同的鍵盤：
<input type=”email”>
<input type=”number”>
<input type=”tel”>
iphone彈不同類型的鍵盤，方便輸入
即使在非html5瀏覽器也可以用，因為對不認識的type，瀏覽器會把它當作默認的text，唯一一個有兼容性的問題就是IE8、IE9會把不認識的input強制設置成text，即一訪問頁面，IE會把html里面的 <input type="email"> 強制渲染成 <input type="text"> ，這樣就導致你沒辦法用CSS/JS根據這個type控制：
//will not work on ie8/ie9
input[type=email]{
}
不過，動態設置的type是可以生效的。初始化渲染的時候會被干掉。但是這個的影響應該不會很大。筆者還寫了一個html5 input的表單驗證插件，為了統一html5表單各瀏覽器處理不一致的問題，詳見： 實現跨瀏覽器html5表單驗證
還有一個小坑，就是 <input type="number"> 在Chrome下面是不允許輸入逗號的，如果要支持輸入逗號就不能用number了。
其它的：
如果內容是一個表格，那就用table，table有自適應的優點；
如果是加粗就用b/strong，而不是自己手動設置font-weight，這樣有個好處，以后要更改字體，只需要設置b/strong的font-family，如果是手動寫的font-weight，那就得一個個去找了；
如果是圖片，那就用img，并且寫上alt，幫助seo以及做為圖片加載不出來顯示的幫助文案；同時還可以用picture/srcset做響應式圖片；
如果是輸入框，就寫個input，而不是自己寫個p標簽，然后設置contenteditable屬性，因為這樣在iphone上光標的定位會有問題；
如果是跳鏈那就寫個a標簽，而不是自己用javascript監聽點擊事件，然后自己做跳轉。因為用a標簽可以讓搜索引擎爬取整個網站的內容，并且用a標簽還有個好處，就是在手機端上滑的時候不會觸發touchstart，如果自己做的跳轉，要么用click，要么得搞個click增強庫，筆者習慣這樣寫：
<ul>
<li>
<astyle="display:block;color:inherit">
<imgsrc="pic.jpg">
<p>desc</p>
</a>
</li>
</ul>
使用html5語義化標簽
html5新增了很多語義化標簽，一個傳統的html4的頁面結構：
<ulclass="nav">
<li></li>
</ul>
<divclass="header"></div>
<divclass="main">
<divclass="section"></div>
<divclass="section"></div>
</div>
<divclass="footer"></div>
可以用html5的新標簽改裝一下：
<nav></nav>
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
這樣除了語義化的特點，更重要的是頁面的組織發生了根本的變化，以前你在html4只能寫一個h1標簽，現在你可以寫很多個h1標簽。因為html5的頁面大綱不再是根據h1、h2等標簽進行劃分，而是根據頁面的章節。如下：
<body>
<h1>Effective2</h1>
<section>
<h1>使用合適的標簽</h1>
<section><h2>使用form</h2></section>
<section><h2>使用a標簽</h2></section>
</section>
<section>
<h1>使用h5標簽</h1>
</section>
</body>
搜索引擎會把這個頁面概括為以下大綱：
Effective2
-
使用合適的標簽
-
使用form
-
使用a標簽
-
-
使用h5標簽
讀者可以從這個網站： html5 outliner 進行實驗。
上面我們用了section進行劃分章節，除了section之外，還有article、nav、aside，這四個標簽可以互相嵌套劃分層級關系，就像上面那樣，section又嵌套了section，而每一個層級都可以任意h1~h5標簽，同一個層級根據標題標簽主次劃分。
這四個標簽和div區別如下：
-
div ：作為一個普通的容器使用
-
section ：作為一個普通的章節
-
article ：獨立性較強，例如筆者的這篇博客外層就用的article標簽
-
aside ：可用作和頁面主題內容相切的容器，像側邊欄、評論，像這篇博客底部的評論就用的aside
來自：http://yincheng.site/make-the-best-of-html-label