html5的boilerplate是什么

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

　　一：HTML5 Boilerplate是什么？解決了什么問(wèn)題？

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

　　實(shí)際上，HTML5 Boilerplate只是一個(gè)單純的HTML模版。

　　什么？HTML模版？干嘛用？

　　這里不得不提所有前端開(kāi)發(fā)都會(huì)遇到的問(wèn)題，每次要重新弄一個(gè)頁(yè)面的時(shí)候，你們都是怎么做的呢？那個(gè)doctype、html、head、body、meta標(biāo)簽，寫(xiě)的多心煩。或者從以前的項(xiàng)目中復(fù)制，或者抄一抄Bootstrap推薦的模版等等。但是在做這些事情的時(shí)候，有沒(méi)有想過(guò)，自己的寫(xiě)法是否是最好的呢？或者說(shuō)業(yè)界對(duì)這個(gè)有沒(méi)有一個(gè)比較統(tǒng)一的推薦？那么，答案是有的。

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

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

　　Hello world! This is HTML5 Boilerplate.

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

　　二：淺析index.html

　　首先，文檔類(lèi)型使用了HTML5文檔聲明，比起HTML4的那一大長(zhǎng)串，這個(gè)明顯簡(jiǎn)單明了。而且，兼容全部瀏覽器。因?yàn)镮E在設(shè)計(jì)的時(shí)候，對(duì)于這種寫(xiě)法也會(huì)進(jìn)入標(biāo)準(zhǔn)模式。所以，以后的文檔聲明都這樣寫(xiě)，省心。

　　然后，是這么一大段

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

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

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

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

　　然后還有一個(gè)no-js類(lèi)。這個(gè)主要是會(huì)和后面的modernizr.js一起使用。因?yàn)閙odernizr會(huì)在瀏覽器啟用的js的時(shí)候，把no-js換成js。簡(jiǎn)單來(lái)說(shuō)這個(gè)類(lèi)可以用來(lái)判斷瀏覽器是否啟用了js。

　　接著，就是

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

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

　　然后是描述，便于SEO。viewport指定移動(dòng)端不對(duì)網(wǎng)頁(yè)進(jìn)行縮放。

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

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

　　進(jìn)入主體部分。

　　首先，看到這么一段

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

　　然后呢，便是這一段腳本

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

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

　　然后引入了plugins.js還有main.js。main.js是空的，plugins.js后面詳細(xì)說(shuō)明。

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

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

　　不過(guò)，HTML5 Boilerplate提供的還不止這些，下面講講單個(gè)文件的作用把。

　　三：靜態(tài)文件

　　打開(kāi)項(xiàng)目代碼，可以看到有挺多的文件的，有些是說(shuō)明文件，比如doc/路徑下的，就不講了，有些是值得講講的，比如css/ js/下的部分文件。挑幾個(gè)有趣的說(shuō)說(shuō)把。

　　首先 css目錄下有main和normalize

　　normalize也許大家都聽(tīng)過(guò)，就是一個(gè)瀏覽器重置，里面的每一條css都是進(jìn)過(guò)千千萬(wàn)萬(wàn)的人精挑細(xì)選的，基本上這個(gè)重置屬于公認(rèn)的了。

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

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

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