HTML5 Boilerplate - 讓頁面有個好的開始

時間 2019-11-11

標籤 html5 html boilerplate 頁面好的開始欄目 HTML5 简体版

原文原文鏈接

最近看到了HTML5 Boilerplate模版，系統的學習與瞭解了一下。在各類CSS庫、JS框架層出不窮的今天，能看到這麼好的HTML模版，感受甚爽。寫篇博客，推薦給你們使用。

一：HTML5 Boilerplate是什麼？解決了什麼問題？

對於第一次據說這我的，確定都有這個疑問把！在網上看了看，發現不少人都認爲這個是和Bootstrap同樣的東西，這真是大錯特錯了。

實際上，HTML5 Boilerplate只是一個單純的HTML模版。

什麼？HTML模版？幹嗎用？

這裏不得不提全部前端開發都會遇到的問題，每次要從新弄一個頁面的時候，大家都是怎麼作的呢？那個doctype、html、head、body、meta標籤，寫的多心煩。或者從之前的項目中複製，或者抄一抄Bootstrap推薦的模版等等。可是在作這些事情的時候，有沒有想過，本身的寫法是不是最好的呢？或者說業界對這個有沒有一個比較統一的推薦？那麼，答案是有的。

HTML5 Boilerplate就是解決了這麼一個問題，它提供了一個十分完善的HTML模版，完善到全部的頁面彷佛都應該遵照這個規則。

說的這麼神乎其神，那麼咱們仍是要一看究竟才行。從官網下載而後，最核心的的是一個index.html文件，不大，咱們來看看它的源碼

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

這能夠說就是HTML5 Boilerplate的所有了。大概看一下，確定會發現有些是和本身之前的寫法同樣的，有些又是沒見過的寫法，或者說本身也是這麼寫的可是歷來沒想過爲何。下面，就先「解剖」下這個HTML文件把。

二：淺析index.html

首先，文檔類型使用了HTML5文檔聲明，比起HTML4的那一大長串，這個明顯簡單明瞭。並且，兼容所有瀏覽器。由於IE在設計的時候，對於這種寫法也會進入標準模式。因此，之後的文檔聲明都這樣寫，省心。

而後，是這麼一大段

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

這段代碼很經典。

首先，咱們先看這些條件判斷，意思分別是低於IE7，等於IE7，等於IE8，高於IE8。

而後條件註釋裏面，就有相應的類名，好比在 lt IE 7中，html標籤上便會有 lt-ie9 lt-ie8 lt-ie7這3個類，意思分別是低於ie七、八、9 。有什麼用呢？其實最大的左右就是在寫CSS HACK的時候，由於這樣寫，就能夠不用CSS HACK了，好比若是是ie6，那麼html標籤上就會有 lt-ie7這個類，直接用CSS優先級覆蓋以前的設置便可。

而後特殊的地方應該就在最後一句了，最後一句的意思是全部大於ie8和非ie瀏覽器都使用<html class="no-js">這個html頭。仔細看會發現裏面加了幾個殘缺的註釋標籤。有什麼用呢，對於大於ie8的ie瀏覽器，這幾個標籤徹底忽略。對於非ie瀏覽器。因爲不識別[if gt IE 8]，而後和後面的註釋一塊兒，會發現整個這部分都被註釋了。這樣，就實現了最完美的瀏覽器識別了。

而後還有一個no-js類。這個主要是會和後面的modernizr.js一塊兒使用。由於modernizr會在瀏覽器啓用的js的時候，把no-js換成js。簡單來講這個類能夠用來判斷瀏覽器是否啓用了js。

接着，就是

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

首先，先設置文檔編碼，記住這個放最前面（特別注意別放title後面），以避免後面代碼出現亂碼。

接下來即是設置IE使用最新版原本渲染

而後是描述，便於SEO。viewport指定移動端不對網頁進行縮放。

這些個元標籤基本都是一個網頁必需要有的，因此你們能夠檢查下本身的網站是否漏了什麼。

以後，引入了normalize、main兩個css。modernizr這個js。關於這3個文件，後面再詳細說明。

進入主體部分。

首先，看到這麼一段

<!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

對於使用低於IE7版本的用戶，給出升級提示，固然，咱們能夠選擇刪除這一段或者換成一箇中文提示

而後呢，即是這一段腳本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

首先，經過CDN引入jquery。這裏用的是谷歌的CDN。若是這段照抄，那麼，，嘿嘿，網站確定杯具了。因此這裏換成國內的jqueryCDN把，好比七牛的。

而後，判斷jQuery對象是否存在。由於CDN有可能掛了。若是jQuery對象不存在，那麼咱們就能夠用本身服務器的jquery把。

而後引入了plugins.js還有main.js。main.js是空的，plugins.js後面詳細說明。

最後一段代碼就是引入google統計了。這裏，根據本身的須要換成百度統計或者是別的把。就不詳細說了。

至此，HTML5 Boilerplate的最關鍵的模版HTML算是講完了。之後要新弄一個頁面，就照着這個copy把。

不過，HTML5 Boilerplate提供的還不止這些，下面講講單個文件的做用把。

三：靜態文件

打開項目代碼，能夠看到有挺多的文件的，有些是說明文件，好比doc/路徑下的，就不講了，有些是值得講講的，好比css/ js/下的部分文件。挑幾個有趣的說說把。

首先 css目錄下有main和normalize

normalize也許你們都聽過，就是一個瀏覽器重置，裏面的每一條css都是進過千千萬萬的人精挑細選的，基本上這個重置屬於公認的了。

裏面的具體每條規則就不細講了，能夠百度查看這個項目的文檔，或者直接看註釋也ok。

main就是改項目對normalize的補充，能夠看到提供了一些基礎類名方便你們，好比圖片置換，清除浮動等等。

js提供了個plugins.js

代碼以下

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());