優化 html 標籤 爲什麼能用HTML/CSS解決的問題就不要使用JS？

優化 html 標籤

2018年05月11日 08:56:24

閱讀數：19

有些人寫頁面會走向一個極端，幾乎頁面全部的標籤都用div，究其緣由，用div有不少好處，一個是div沒有默認樣式，不會有margin、background等初始化設置，另外可能會以爲不用div還能用啥。因此看他的頁面，一展開是div，再展開仍是div，展開4、五層都是div。

 

 

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

 

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

 

 

01選用合適的標籤

 

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的選擇器獲取表單值的時候：

 

使用jquery獲取表單數據XHTML

<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，還能夠再加強一下，給表單對象添加一個函數：

 

添加一個jQuery對象的函數JavaScript

$.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

 

3. html5 input

 

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

 

<input type=」email」>

 

<input type=」number」>

 

<input type=」tel」>

iphone彈不一樣類型的鍵盤，方便輸入

 

即便在非html5瀏覽器也能夠用，由於對不認識的type，瀏覽器會把它看成默認的text，惟一一個有兼容性的問題就是IE八、IE9會把不認識的input強制設置成text，即一訪問頁面，IE會把html裏面的<input type="email">強制渲染成<input type="text">，這樣就致使你沒辦法用CSS/JS根據這個type控制：

 

IE強制閹割不認識的input type爲textCSS

/* 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加強庫，筆者習慣這樣寫：

 

使用a標籤作跳轉XHTML

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

 

 

02使用html5語義化標籤

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

 

html4頁面結構XHTML

<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的頁面大綱再也不是根據h一、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

1. 使用合適的標籤

    1. 使用form

    2. 使用a標籤

2. 使用h5標籤

 

讀者能夠從這個網站：html5 outliner進行實驗（https://gsnedders.html5.org/outliner/）。

 

上面咱們用了section進行劃分章節，除了section以外，還有article、nav、aside，這四個標籤能夠互相嵌套劃分層級關係，就像上面那樣，section又嵌套了section，而每個層級均可以任意使用h1~h5標籤，同一個層級根據標題標籤的主次進行劃分。

 

這四個標籤和div區別以下：

1. div：做爲一個普通的容器使用

2. section：做爲一個普通的章節

3. article：適用於獨立性較強的內容，例如筆者的這篇博客外層就用的article標籤

4. aside：可用做和頁面主題內容相切的容器，像側邊欄、評論，像這篇博客底部的評論就用的aside

 

這篇博客無外乎說一件事件，站在瀏覽器的肩膀上進行開發，由於前端是根瀏覽器打交道的。這與第一篇《爲什麼能用HTML/CSS解決的問題就不要使用JS？》的原理是相通的。

 

 

 

爲何說能使用html/css解決的問題就不要使用JS呢？兩個字，由於簡單。簡單就意味着更快的開發速度，更小的維護成本，同時每每具備更好的體驗，下面介紹幾個實例。

一、導航高亮

 

導航高亮是一種很常見的問題，包括當前頁面的導航在菜單裏面高亮和hover時高亮。你能夠用js控制，可是用一點CSS技巧就能夠達到這個目的，不須要使用JS。

在正常態時，每一個導航的默認樣式爲：

nav li{    opacity: 0.5; }

當前頁面的導航透明度爲1. 爲了實現這個目的：

首先經過body給不一樣的頁面添加不一樣的類，用來標誌不一樣的頁面

<!-- home.html -->
<body class="home">
</body>

<!-- buy.html -->
<body class="buy"></body>

全部的li也用class標誌，爲了有一個一一對應的關係：

<li class="home">home</li>
<li class="buy">buy</li>

而後就能夠設置當前頁面的樣式，覆蓋掉默認的樣式：

body.home nav li.home,body.buy nav li.buy
{  
  opacity: 1; }

這樣子，若是當前頁面是home，則body.home na li.home這條規則生效，home的導航將高亮。

這個技藝在《精通CSS》這種書裏面有說起。若是你用js控制，那麼在腳本加載好以前，當前頁面是不會高亮的，而腳本加載好以後忽然就高亮了。因此用js吃力不討好。

hover時的高亮，能夠用css的:hover選擇器：

nav li:hover
{    
opaciy: 1; }

加上:hover選擇器的優先級將會高於本來的，鼠標hover的時候將會覆蓋默認樣式，即高亮。

你也能夠用mouse事件，mouseover的時候添加一個類，mouseleave的時候移除掉這個類，這樣就變複雜了，用CSS甚至能夠兼容不支持JS的瀏覽器，用戶可能把瀏覽器的js禁掉了。我一個純展現的靜態頁面，爲啥要寫js呢，是吧。

注意這個hover選擇器特別好用，幾乎適用於全部須要用鼠標懸浮時顯示的場景。

二、鼠標懸浮時顯示

 

鼠標懸浮的場景十分常見，例如導航的菜單：

以及在《Google地圖開發總結》一文提到的，marker詳情框的顯示：

通常要把隱藏的東西如菜單做爲hover目標的子元素或者相鄰元素，才方便用css控制，例如上面的菜單，是把menu看成導航的一個相鄰元素：

<li class="user">用戶</li>
<li class="menu">    <ul>       <li>帳戶設置</li>       <li>登出</li>    </ul></li>

menu在正常態下是隱藏的：

.menu{    display: none; }

而當導航hover時顯示：

.user:hover + .menu
{    
display: list-item; }

注意這裏使用了一個相鄰選擇器，這也是上面說的爲何要寫成相鄰的元素。menu的位置能夠用absolute定位。

同時menu自已自己hover的時候也要顯示，不然鼠標一離開導航的時候，菜單就消失了：

.menu:hover
{    
display: list-item; }

這裏會有一個小問題，即menu和導航須要挨着一塊兒，不然中間有空隙的話，上面添加的菜單hover就不能發揮做用了，可是實際狀況下從美觀的角度，二者是要有點距離的。這個其實也好解決，只要在menu上面再畫一個透明的區域就行了，以下藍色的方塊：

能夠用before/after僞類用absoute定位實現：

ul.menu:before{    
content: "";   
 position: absolute;    
 left: 0;    
 top: -20px;    
 width: 100%;   
  height: 20px;   
   /**/}

若是我既寫了css的hover，又監聽了mouse事件，用mouse控制顯示隱藏，雙重效果會有什麼狀況發生，若是按正常套路，在mouse事件裏面hover的時候，添加了一個display: block的style，會覆蓋掉CSS的設置。

也就是說，只要hover一次，css的代碼就無論用了，由於內聯樣式的優先級會高於外鏈的。

可是實際狀況下會有意外發生，那就是在移動端iphone上面，觸摸會觸發CSS的hover，而且這個的觸發會很高几率地先於touchstart事件，在這個事件裏面會判斷當前是顯示仍是隱藏的狀態，因爲css的hover發揮了做用，因此判斷爲顯示，而後又把它隱藏了。

也就是說，點一次不出來，要點兩次。因此最好別兩個同時寫。

第二種場景，使用子元素，這個更簡單。把hover的目標和隱藏的對象看成同一個父容器的子元素，而後hover寫在這個父容器上面就能夠了，不用像上面那樣，隱藏元素也要寫個hover：

.marker-container .detail-info
{   
 display: none }
.marker-container:hover .detail-info
{   
 display: block }

三、自定義radio/checkbox的樣式

 

咱們知道，使用原生的radio/checkbox是不能夠改變它的樣式的，得本身用div/span去畫，而後再去監聽點擊事件。可是這樣須要本身去寫邏輯控制，例如radio只能選一個的功能，另外一個是沒有辦法使用change事件。就是沒有用原生的方便。

可是實際上能夠用一點CSS3的技巧實現自定義的目的，以下，就是用原生實現的radio：

這個主要是藉助了CSS3提供的一個僞類:checkd，只要radio/checkbox是選中狀態，這個僞類就會生效，所以能夠利用選中和非選中的這兩種狀態，去切換不一樣的樣式。以下把一個checkbox和一個用來自定義樣式的span寫在一個label裏面，checkbox始終隱藏：

<style>input[type=checkbox]
{   
 display: none; }
 /*未選中的checkbox的樣式*/
.checkbox{ }
</style>
<label>    <input type="checkbox">    <span class="checkbox"></span>
</label>

寫在label裏面是爲了可以點擊span的時候改變checkbox的狀態，而後再改一下選中態的樣式便可：

input[type=checkbox]:checked + .checkbox{ }

關鍵在於這一步，添加一個打勾的背景圖也好，使用圖標字體也好。

:checked兼容性仍是比較好的，只要你不用兼容IE8就可使用，或者說只要你能夠用nth-of-type，就能夠用:checked。

四、多列等高

 

多列等高的問題是這樣的，排成一行的幾列因爲內容長短不一致，致使容器的高度不一致：

你能夠用js算一下，以最高的一列的高度去設置全部列的高度，然而這個會形成頁面閃動，剛開始打開頁面的時候高度不一致，而後發現忽然又對齊了。這個解決辦法主要有兩種：

第一種是每列來一個很大的padding，再來一個很大的負的margin值矯正回去，就對齊了，以下：

<style>.wrapper > div{ 
float: left;        
padding-bottom: 900px;        
margin-bottom: -880px;        
background-color: #ececec;        
border: 1px solid #ccc;    }
</style>
<div class="wrapper">
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
<div>column 4</div>
</div>

效果以下：

你會發現，這個對齊是對齊了，可是底部的border沒有了，設置的圓角也不起做用了，究其緣由，是由於設置了一個很大的padding值，致使它的高度變得很大，如上圖所示。因此若是你想在底部absolute定位放一個連接」更多>>」也是實現不了了。

第二種辦法是藉助table的自適應特性 ，每一個div都是一個td，td確定是等高的，html結構不變，CSS改一下：

.wrapper{    
display: table;    
border-spacing: 20px; 
 /* td間的間距*/
}
 .wrapper > div {    
 display: table-cell;    
 width: 1000px;         
 /*設置很大的寬度，table自動平分寬度 */border-radius: 5px;    
 /*這裏設置圓角就正常了*/
}

對齊效果以下：

這樣還有一個好處，就是在響應式開發的時候，能夠藉助媒體查詢動態地改變display的屬性，從而改它排列的方式。例如在小於500px時，每一列佔滿一行，那麼只要把display: table-cell覆蓋掉就行了：

@media (max-width: 500px){    
.wrapper{        
display: block;    }    
.wrapper > div{        
display: block;        
width: 100%;    } }

效果以下所示：

若是在pad 1024px的設備上，但願一行顯示2個，那應該怎麼辦呢？因爲上面用的td，一定會排在同一行。其實能夠在第二個和第三個中間加一個tr，讓它換行：

<div class="wrapper"> <div>column 1</div> <div>column 2</div> <span class="tr"></span> <div>column 3</div> <div>column 4</div></div>

在大屏和小屏時，tr是不顯示的，而在中屏時，tr顯示：

.tr{    
display: none; } @media (max-width: 1024px) 
and (min-width: 501px){    
.tr{        
display: table-row;    } }

就可以實如今小屏時一行排兩列了，只是這個有個小問題，就是在中屏拉到大屏的時候tr的dipslay: none已經沒有什麼做用，由於table的佈局已經計算好。可是通常應該不用考慮這種拉伸範圍很大的狀況，正常刷新頁面是能夠的，若是真要解決那得藉助下js。

五、 須要根據個數顯示不一樣樣式

 

例如說可能有1~3個item顯示在同一行，而item的個數不必定，若是1個，那這個item佔寬100%，2個時每個50%，3個時每個33%，這個你也能夠用js計算一下，可是用CSS3就能夠解決這個問題：

<style>  li{   width: 100%;    }   li:first-child:nth-last-child(2),    
li:first-child:nth-last-child(2) ~ li{ width: 50%;    }   li:first-child:nth-last-child(3),    
li:first-child:nth-last-child(3) ~ li{ width: 33%;    }   </style><ul>    <li>1</li>    <li>2</li>    <li>3</li></ul>

第5行的意思就是選擇li的第一個元素，而且它是倒數第二個元素，第6行的意思是選擇前面有是第一個且是倒數第二個li的全部li，第一行是選擇了第一個，第二行選擇除第一個外的其它全部元素。有三個元素的相似。

六、使用表單提交

 

提交請求有兩種方式，一種是ajax，另一種是表單提交。不少人都知道ajax，但每每忽略了還有個form提交。

假設在首頁有一個搜索的表單，點擊search的時候就跳到列表頁

你能夠一個個去獲取全部的input的值，而後把它拼到網址參數重定向一下，可是其實能夠不用這樣，用一個表單提交就行了：

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

將全部字段的名字寫在input的name裏面，而後form的action爲搜索頁的連接。這樣子不用一行js代碼就可以搜索跳轉。

若是你須要作表單驗證，那就監聽submit事件，而後作驗證，驗證經過則調一下原生的submit就能夠提交了，也是不須要手動去獲取form的值。

七、自動監聽回車事件

 

這個的場景是但願按回車的時候可以觸發請求，像第6點，按回車實現跳轉，或者是像下面的，按下回車就送一條聊天消息：

一般的作法是監聽下keypress事件，而後檢查一下keycode是否是回車，若是是則發請求。

可是其實有個特別簡單的辦法，也是不須要一行JS，那就是把表單寫在一個form裏面，按回車會自動觸發submit事件。讀者能夠本身試試。這個就啓示咱們要用語義的html組織，而不是所有都用div。若是用相應的html標籤，瀏覽器會自動作一些優化，特別是表單提交的input。

JS是萬能的，幾乎能夠作任何事情，可是有時候會顯得十分笨拙，在js/html/css三者間靈活地切換，每每會極大地簡化開發，沒有誰是最好的語言，只有適不適合。只要用得好，無論黑貓白貓，都是好貓。