本篇內(nèi)容主要講解“html5的boilerplate是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“html5的boilerplate是什么”吧!

站在用戶的角度思考問題，與客戶深入溝通，找到達州網(wǎng)站設(shè)計與達州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋達州地區(qū)。

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

對于第一次聽說這個人，肯定都有這個疑問把！在網(wǎng)上看了看，發(fā)現(xiàn)很多人都認為這個是和Bootstrap一樣的東西，這真是大錯特錯了。

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

什么？HTML模版？干嘛用？

這里不得不提所有前端開發(fā)都會遇到的問題，每次要重新弄一個頁面的時候，你們都是怎么做的呢？那個doctype、html、head、body、meta標(biāo)簽，寫的多心煩?；蛘邚囊郧暗捻椖恐袕?fù)制，或者抄一抄Bootstrap推薦的模版等等。但是在做這些事情的時候，有沒有想過，自己的寫法是否是最好的呢？或者說業(yè)界對這個有沒有一個比較統(tǒng)一的推薦？那么，答案是有的。

HTML5 Boilerplate就是解決了這么一個問題，它提供了一個十分完善的HTML模版，完善到所有的頁面似乎都應(yīng)該遵守這個規(guī)則。

說的這么神乎其神，那么我們還是要一看究竟才行。從 官網(wǎng)下載 然后，最核心的的是一個index.html文件，不大，我們來看看它的源碼

Hello world! This is HTML5 Boilerplate.

這可以說就是HTML5 Boilerplate的全部了。大概看一下，肯定會發(fā)現(xiàn)有些是和自己以前的寫法一樣的，有些又是沒見過的寫法，或者說自己也是這么寫的但是從來沒想過為什么。下面，就先“解剖”下這個HTML文件把。

二：淺析index.html

首先，文檔類型使用了HTML5文檔聲明，比起HTML4的那一大長串，這個明顯簡單明了。而且，兼容全部瀏覽器。因為IE在設(shè)計的時候，對于這種寫法也會進入標(biāo)準(zhǔn)模式。所以，以后的文檔聲明都這樣寫，省心。

然后，是這么一大段

這段代碼很經(jīng)典。

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

然后條件注釋里面，就有相應(yīng)的類名，比如在 lt IE 7中，html標(biāo)簽上便會有 lt-ie9 lt-ie8 lt-ie7這3個類，意思分別是低于ie7、8、9 。有什么用呢？其實最大的左右就是在寫CSS HACK的時候，因為這樣寫，就可以不用CSS HACK了，比如如果是ie6，那么html標(biāo)簽上就會有 lt-ie7這個類，直接用CSS優(yōu)先級覆蓋之前的設(shè)置即可。

然后特殊的地方應(yīng)該就在最后一句了，最后一句的意思是所有大于ie8和非ie瀏覽器都使用這個html頭。仔細看會發(fā)現(xiàn)里面加了幾個殘缺的注釋標(biāo)簽。有什么用呢，對于大于ie8的ie瀏覽器，這幾個標(biāo)簽完全忽略。對于非ie瀏覽器。由于不識別[if gt IE 8]，然后和后面的注釋一起，會發(fā)現(xiàn)整個這部分都被注釋了。這樣，就實現(xiàn)了最完美的瀏覽器識別了。

然后還有一個no-js類。這個主要是會和后面的modernizr.js一起使用。因為modernizr會在瀏覽器啟用的js的時候，把no-js換成js。簡單來說這個類可以用來判斷瀏覽器是否啟用了js。

接著，就是

首先，先設(shè)置文檔編碼，記住這個放最前面(特別注意別放title后面)，以免后面代碼出現(xiàn)亂碼。

接下來便是設(shè)置IE使用最新版本來渲染

然后是描述，便于SEO。viewport指定移動端不對網(wǎng)頁進行縮放。

這些個元標(biāo)簽基本都是一個網(wǎng)頁必須要有的，所以大家可以檢查下自己的網(wǎng)站是否漏了什么。

之后，引入了normalize、main兩個css。modernizr這個js。關(guān)于這3個文件，后面再詳細說明。

進入主體部分。

首先，看到這么一段

對于使用低于IE7版本的用戶，給出升級提示，當(dāng)然，我們可以選擇刪除這一段或者換成一個中文提示

然后呢，便是這一段腳本

首先，通過cdn引入jquery。這里用的是谷歌的CDN。如果這段照抄，那么，，嘿嘿，網(wǎng)站肯定杯具了。所以這里換成國內(nèi)的jqueryCDN把，比如七牛的。

然后，判斷jQuery對象是否存在。因為CDN有可能掛了。如果jQuery對象不存在，那么我們就可以用自己服務(wù)器的jquery把。

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

最后一段代碼就是引入google統(tǒng)計了。這里，根據(jù)自己的需要換成百度統(tǒng)計或者是別的把。就不詳細說了。

至此，HTML5 Boilerplate的最關(guān)鍵的模版HTML算是講完了。以后要新弄一個頁面，就照著這個copy把。

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

三：靜態(tài)文件

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

首先 css目錄下有main和normalize

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

里面的具體每條規(guī)則就不細講了，可以百度查看這個項目的文檔，或者直接看注釋也ok。

main就是改項目對normalize的補充，可以看到提供了一些基礎(chǔ)類名方便大家，比如圖片置換，清除浮動等等。

到此，相信大家對“html5的boilerplate是什么”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！