Effective前端(2)優化html標籤

01-25

會編程的銀豬
借用Effective之名，開始寫Effective系列，總結一些前端的心得。

有些人寫頁面會走向一個極端，幾乎頁面所有的標籤都用div，究其原因，用div有很多好處，一個是div沒有默認樣式，不會有margin、background等初始化設置，另外可能會覺得不用div還能用啥。所以看他的頁面，一展開是div，再展開還是div，展開四、五層都是div。

這樣對用戶來說雖然沒什麼區別，但是作為一名有追求的程序員，這種寫法看起來是比較難受的。有些人雖然知道html5新增了很多標籤，但也不怎麼去研究它的用法，反正用傳統的div不是挺好的，為啥要去用兼容性不好的新東西。但是要是人人都這麼想的話，新技術就不會發展了。有不一樣或者更好的選擇，當然要嘗試下。

補充一點，並不是說使用div不好，該用div還是得用div，只是有其它更好的選擇時應該選用其它的。

選用合適的標籤

1. 如果它是一段文字，那就用p標籤吧，如果它是一個標題，那就用h1~h5標籤吧，像下面這樣：

<p class="title">你好，我是一個標題</p>

明明知道它是一個標題，為什麼不用標題標籤呢：

<h2>你好我是一個真實的標題</h2>

這樣有個好處，讓你的標籤多樣化，寫樣式的時候用標籤選擇器，就不用套很多的class

2. 如果它是一個表單，那就用form吧，用form用很多優點，我在《Effective前端1：能使用html/css解決的問題就不要使用JS》裡面已經提到兩點，第一點是自動表單提交，通過寫一個form的action就能實現自動搜索跳轉：

<form id="search-form" action="/search"> <input type="search" name="keyword"> <input type="number" name="price"></form>

而不用自己去獲取每個input的值，然後去拼參數跳轉。

第二點是，自動監聽回車事件提交，只要寫一個form，裡面有input，用戶按回車就能自動提交，而不用自己去監聽keypress事件處理。

除了這兩點之外，寫一個form還有一個很大的好處，當你用傳統的jquery的選擇器獲取表單值的時候：

<div> <input id="user-name"> <input id="password"></div><script>var userName = $("input#user-name").val(), password = $("input#password").val();</script>

在這裡，你為了獲取兩個表單數據，查了兩次DOM，假設你有10個，就得查10個，如果是20個呢，對性能就會有影響了吧，特別是在移動端。但是如果你把div換成form，情況就不一樣了：

<form id="register"> <input name="user-name"> <input name="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就掛了，但是這樣早點暴露問題在某些情況下是不是更好呢

如果你用jQuery，還可以再增強一下，給表單對象添加一個函數：

$.fn.serializeForm = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ""); } else { o[this.name] = this.value || ""; } }); return o;};

這個函數的作用在於藉助jQuery的serializeArray獲取所有的表單數據，然後再轉化成一個object，以後需要獲取這個表單的內容只需調一下：

var userData = $("#user-form").serializeForm();

即可，userData裡面的屬性就是input/select的name

html5 input

htm5提供了很多類型的input，使用這些input有很多好處，遊覽器會根據不同的input做出相應的優化，例如在iphone上，使用不同的input會彈出不同的鍵盤：

即使在非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了。

其它的：

(1) 如果內容是一個表格，那就用table，table有自適應的優點；

(2) 如果是加粗就用b/strong，而不是自己手動設置font-weight，這樣有個好處，以後要更改字體，只需要設置b/strong的font-family，如果是手動寫的font-weight，那就得一個個去找了；

(3) 如果是圖片，那就用img，並且寫上alt，幫助seo以及做為圖片載入不出來顯示的幫助文案；同時還可以用picture/srcset做響應式圖片；

(4) 如果是輸入框，就寫個input，而不是自己寫個p標籤，然後設置contenteditable屬性，因為這樣在iphone上游標的定位會有問題；

(5) 如果是跳鏈那就寫個a標籤，而不是自己用javascript監聽點擊事件，然後自己做跳轉。因為用a標籤可以讓搜索引擎爬取整個網站的內容，並且用a標籤還有個好處，就是在手機端上滑的時候不會觸發touchstart，如果自己做的跳轉，要麼用click，要麼得搞個click增強庫，筆者習慣這樣寫：

<ul> <li> <a style="display:block;color:inherit" href="/list?id=1"> <img src="pic.jpg"> <p>desc</p> </a> </li></ul>

使用html5語義化標籤

html5新增了很多語義化標籤，一個傳統的html4的頁面結構：

<ul class="nav"> <li></li></ul><div class="header"></div><div class="main"> <div class="section"></div> <div class="section"></div></div><div class="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

關於html5主義化標籤的使用可詳見筆者的這篇文章：《html5語義化標籤使用規範》

這篇博客無外乎說一件事件，站在瀏覽器的肩膀上進行開發，因為前端是根瀏覽器打交道的。這與第一篇《Effective前端1：能使用html/css解決的問題就不要使用JS》的原理是相通的。

作者：會編程的銀豬

版權歸作者所有，轉載請註明出處