• Hello world! This is HTML5 Boilerplate.<\/p>

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    Heim Web-Frontend HTML-Tutorial HTML5 Boilerplate

    HTML5 Boilerplate

    Jun 24, 2016 am 11:51 AM

    最近看到了HTML5 Boilerplate模版,系統(tǒng)的學(xué)習(xí)與了解了一下。在各種CSS庫(kù)、JS框架層出不窮的今天,能看到這么好的HTML模版,感覺(jué)甚爽。寫(xiě)篇博客,推薦給大家使用。

    ?

    一: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)看看它的源碼

    <!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>

    這可以說(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ě),省心。

    然后,是這么一大段

    <!--[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]-->

    這段代碼很經(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。

    接著,就是

    <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">

    首先,先設(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)入主體部分。

    首先,看到這么一段

    <!--[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]-->

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

    然后呢,便是這一段腳本

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

    首先,通過(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)等等。

    js提供了個(gè)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;        }    }}());

    比較簡(jiǎn)單,就不說(shuō)明了。解決的主要問(wèn)題就是用console調(diào)試的時(shí)候IE報(bào)錯(cuò)。這個(gè)問(wèn)題我想大家都遇見(jiàn)過(guò),調(diào)試代碼忘記刪除,線上IE報(bào)錯(cuò),導(dǎo)致js無(wú)法繼續(xù)執(zhí)行。加了這個(gè),就可以避免掉這問(wèn)題了。

    ?

    還有就是modernizr了,這是個(gè)強(qiáng)大的瀏覽器功能檢查js,具體使用可以在官網(wǎng)上看看教程,這里就不說(shuō)了。

    ?

    然后,還提供了一些個(gè)文件,比如apache的配置htaccess、 404頁(yè)面、flash跨域需要的文件crossdomain.xml、爬蟲(chóng)過(guò)濾文件robots.txt等,大家按需使用。

    ?

    ?

    ?

    至此,HTML5 Boilerplate算是全部理完了,很簡(jiǎn)單的一個(gè)項(xiàng)目,但是很實(shí)用,也很漂亮。可以作為開(kāi)發(fā)標(biāo)配。

    ?

    ?

    ?

    轉(zhuǎn)載本站文章請(qǐng)注明作者和出處??,請(qǐng)勿用于任何商業(yè)用途

    Erkl?rung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Hei?e KI -Werkzeuge

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

    Hei?e Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Hei?e Themen

    PHP-Tutorial
    1502
    276
    Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements Implementieren klickbarer Schaltfl?chen mithilfe des HTML -Schaltfl?chenelements Jul 07, 2025 am 02:31 AM

    Um HTML -Schaltfl?chenelemente zu verwenden, um anklickbare Schaltfl?chen zu erreichen, müssen Sie zun?chst die grundlegende Verwendung und gemeinsame Vorsichtsma?nahmen beherrschen. 1. Erstellen Sie Schaltfl?chen mit Tags und definieren Sie Verhaltensweisen durch Typattribute (z. B. Schaltfl?che, Senden, Zurücksetzen), die standardm??ig übermittelt werden. 2. Fügen Sie interaktive Funktionen über JavaScript hinzu, die über ID geschrieben werden k?nnen, um Ereignish?rer zu verbinden, um die Wartung zu verbessern. 3.. Verwenden Sie CSS, um Stile anzupassen, einschlie?lich Hintergrundfarbe, Grenze, abgerundete Ecken und Schwebe-/aktive Statusffekte, um die Benutzererfahrung zu verbessern. 4. Achten Sie auf h?ufige Probleme: Stellen Sie sicher, dass das behinderte Attribut nicht aktiviert ist. Meistere das

    Konfigurieren von Dokumentmetadaten im HTML -Kopfelement Konfigurieren von Dokumentmetadaten im HTML -Kopfelement Jul 09, 2025 am 02:30 AM

    Metadaten in HTMLhead sind entscheidend für das Verhalten von SEO-, Social Sharing und Browser. 1. Setzen Sie den Seitentitel und die Beschreibung, verwenden Sie es und halten Sie es pr?zise und einzigartig. 2. Fügen Sie OpenGraph- und Twitter -Karteninformationen hinzu, um die Auswirkungen auf die soziale Freigabe zu optimieren, auf die Bildgr??e zu achten und Debugging -Tools zum Testen zu verwenden. 3. Definieren Sie die Einstellungen für den Zeichensatz und die Ansichtsfenster, um sicherzustellen, dass die Unterstützung mehrsprachiger Unterstützung an das mobile Terminal angepasst wird. 4. Optionale Tags wie das Urheberrecht des Autors, die Kontrolle der Roboter und die kanonische Verhindern doppelter Inhalte sollten auch vernünftig konfiguriert werden.

    Bestes HTML -Tutorial für Anf?nger im Jahr 2025 Bestes HTML -Tutorial für Anf?nger im Jahr 2025 Jul 08, 2025 am 12:25 AM

    Tolearnhtmlin2025, ChooseatutororyThatbalancesHands-On-Practionwithmoderit und IntegrateCsSandjavaScriptbasics.1.PrioritizeHands-OnLearningWithStep-by-Stepprojects-?hnlich

    HTML für E -Mail -Vorlagen -Tutorial HTML für E -Mail -Vorlagen -Tutorial Jul 10, 2025 pm 02:01 PM

    Wie mache ich HTML -Mail -Vorlagen mit guter Kompatibilit?t? Zun?chst müssen Sie eine Struktur mit Tabellen erstellen, um die Verwendung von Div -Flex- oder Netzlayout zu vermeiden. Zweitens müssen alle Stile eingefügt werden und k?nnen sich nicht auf externe CSS verlassen. Dann sollte das Bild mit ALT -Beschreibung hinzugefügt werden und eine ?ffentliche URL verwenden, und die Schaltfl?chen sollten mit einer Tabelle oder TD mit Hintergrundfarbe simuliert werden. Schlie?lich müssen Sie die Details zu mehreren Clients testen und anpassen.

    Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente? Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente? Jul 07, 2025 am 02:30 AM

    Die Verwendung von HTML -Summen erm?glicht die intuitive und semantische Klarheit, Bildern oder Medien einen Bildunterschriftentext hinzuzufügen. 1.. Wird verwendet, um unabh?ngige Medieninhalte wie Bilder, Videos oder Codebl?cke einzuwickeln; 2. Es wird als erkl?render Text platziert und kann über oder unter den Medien befinden. 3. Sie verbessern nicht nur die Klarheit der Seitenstruktur, sondern verbessern auch die Zug?nglichkeit und den SEO -Effekt. 4. Wenn Sie es verwenden, sollten Sie darauf achten, Missbrauch zu vermeiden, und sich auf Inhalte bewerben, die eher von Beschreibung als von gew?hnlichen dekorativen Bildern betont und begleitet werden müssen. 5. Das Alt -Attribut, das nicht ignoriert werden kann, das sich von Figcaption unterscheidet; 6. Die Figur ist flexibel und kann nach Bedarf oben oder unten in der Figur platziert werden. Wenn Sie diese beiden Tags korrekt verwenden, k?nnen Sie semantische und leicht verst?ndliche Webinhalte erstellen.

    Was sind die am h?ufigsten verwendeten globalen Attribute in HTML? Was sind die am h?ufigsten verwendeten globalen Attribute in HTML? Jul 10, 2025 am 10:58 AM

    Klasse, ID, Stil, Daten und Titel sind die am h?ufigsten verwendeten globalen Attribute in HTML. Die Klasse wird verwendet, um einen oder mehrere Klassennamen anzugeben, um die Stileinstellung und JavaScript -Vorg?nge zu erleichtern. ID bietet eindeutige Kennungen für Elemente, die für Anker -Sprünge und JavaScript -Kontrolle geeignet sind. Durch den Stil k?nnen Inline-Stile hinzugefügt werden, geeignet für ein vorübergehendes Debuggen, aber nicht für die Verwendung von gro?em Ma?stab empfohlen. Data-Properties werden verwendet, um benutzerdefinierte Daten zu speichern, was für die Interaktion mit Front-End- und Back-End-Interaktion geeignet ist. Der Titel wird verwendet, um Mausover -Eingaben hinzuzufügen, aber sein Stil und sein Verhalten werden durch den Browser begrenzt. Eine angemessene Auswahl dieser Attribute kann die Entwicklungseffizienz und die Benutzererfahrung verbessern.

    Wie kann ich mit Formularen in HTML ohne Server umgehen? Wie kann ich mit Formularen in HTML ohne Server umgehen? Jul 09, 2025 am 01:14 AM

    Wenn es keinen Backend-Server gibt, kann die Einreichung von HTML-Formular weiterhin über Front-End-Technologie oder Drittanbieterdienste verarbeitet werden. Zu den spezifischen Methoden geh?ren: 1. JavaScript verwenden, um die Einreichungen von Formulareingaben abzufangen, um die Eingabeüberprüfung und das Benutzerfeedback zu erhalten. Die Daten werden jedoch nicht bestehen. 2. Verwenden Sie serverlose Formulardienste von Drittanbietern wie F?rse, um Daten zu sammeln und E-Mail-Benachrichtigungs- und Umleitungsfunktionen bereitzustellen. 3.. Verwenden Sie LocalStorage, um tempor?re Clientdaten zu speichern, die zum Speichern von Benutzerpr?ferenzen oder zum Verwalten von Anwendungsstatus einseitig geeignet sind, jedoch nicht für die langfristige Speicherung vertraulicher Informationen geeignet sind.

    Implementierung des nativen faulen Ladens für Bilder in HTML Implementierung des nativen faulen Ladens für Bilder in HTML Jul 12, 2025 am 12:48 AM

    Native Lazy Loading ist eine integrierte Browserfunktion, die das faule Laden von Bildern durch Hinzufügen von Loading = "Lazy" zum Tag hinzufügen kann. 1. Es erfordert keine Bibliotheken von JavaScript oder Drittanbietern und wird direkt in HTML verwendet. 2. Es ist für Bilder geeignet, die nicht auf dem ersten Bildschirm unterhalb der Seite, die Scrolling-Add-Ons und gro?e Bildressourcen angezeigt werden. 3. Es ist nicht für Bilder mit dem ersten Bildschirm oder Display geeignet: keine; 4. Bei der Verwendung sollte ein geeigneter Platzhalter festgelegt werden, um Layout -Jitter zu vermeiden. 5. Es sollte das Laden von Responsive Bild in Kombination mit SRCSet- und Gr??enattributen optimieren. 6. Kompatibilit?tsprobleme müssen berücksichtigt werden. Einige alte Browser unterstützen es nicht. Sie k?nnen durch Merkmalserkennung verwendet und mit JavaScript -L?sungen kombiniert werden.

    See all articles