html5的boilerplate是什么

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

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

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

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

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

什么？HTML模版？干嘛用？

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

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

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

Hello world! This is HTML5 Boilerplate.

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

二：淺析index.html

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

然后，是這么一大段

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

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

然后條件注釋里面，就有相應(yīng)的類名，比如在 lt IE 7中，html標(biāo)簽上便會(huì)有 lt-ie9 lt-ie8 lt-ie7這3個(gè)類，意思分別是低于ie7、8、9 。有什么用呢？其實(shí)最大的左右就是在寫CSS HACK的時(shí)候，因?yàn)檫@樣寫，就可以不用CSS HACK了，比如如果是ie6，那么html標(biāo)簽上就會(huì)有 lt-ie7這個(gè)類，直接用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類。這個(gè)主要是會(huì)和后面的modernizr.js一起使用。因?yàn)閙odernizr會(huì)在瀏覽器啟用的js的時(shí)候，把no-js換成js。簡(jiǎn)單來說這個(gè)類可以用來判斷瀏覽器是否啟用了js。

接著，就是

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

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

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

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

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

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

首先，看到這么一段

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

然后呢，便是這一段腳本

首先，通過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ì)說明。

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

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

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

三：靜態(tài)文件

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

首先 css目錄下有main和normalize

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

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

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

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

當(dāng)前題目：html5的boilerplate是什么
當(dāng)前網(wǎng)址：http://www.muchs.cn/article10/gceigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、App開發(fā)、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)