最近、HTML5 ボイラープレート テンプレートを見(jiàn)て、體系的に勉強(qiáng)して理解しました。さまざまな CSS ライブラリや JS フレームワークが次々と登場(chǎng)している今日、このような優(yōu)れた HTML テンプレートを見(jiàn)るのは非常にうれしいことです。ブログを書(shū)いてみんなに勧めましょう。
1: HTML5 ボイラープレートとは何ですか?どのような問(wèn)題が解決されましたか?
この人のことを初めて聞いたとき、きっとこんな疑問(wèn)を抱いたはずです！ネットで調(diào)べてみると、多くの人がこれを Bootstrap と同じものだと考えていることがわかりました。これは本當(dāng)に間違っています。
実際、HTML5 ボイラープレートは単なる?yún)g純な HTML テンプレートです。
え？ HTMLテンプレート?何に使われますか?
すべてのフロントエンド開(kāi)発者が遭遇するであろう問(wèn)題について言及しなければなりません。新しいページを作成するとき、毎回どうやって作成すればよいでしょうか。 doctype、html、head、body、meta タグは書(shū)くのがとても面倒です。または、以前のプロジェクトからコピーするか、Bootstrap が推奨するテンプレートなどをコピーします。しかし、これらのことをするときに、自分の書(shū)き方が最善かどうか考えたことはありますか?それとも、業(yè)界はこれに関して比較的統(tǒng)一された推奨事項(xiàng)を持っていますか?答えは「はい」です。
HTML5 ボイラープレートは、すべてのページがこのルールに従っているように見(jiàn)える非常に完全な HTML テンプレートを提供します。
とても奇跡的に聞こえるので、何が起こるかまだ見(jiàn)てみる必要があります。公式サイトからダウンロード それでは、最も重要なのは、それほど大きくないindex.htmlファイルです。そのソースコードを見(jiàn)てみましょう
<!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 ボイラープレートのすべてと言えます。ざっと見(jiàn)てみると、確かに今までと同じような書(shū)き方をしているものもあれば、見(jiàn)たことのない書(shū)き方をしている、あるいは、こんなことも書(shū)いているということもあるでしょう。このようにしてますが、その理由について考えたことはありません。次に、まずこの HTML ファイルを「分析」してみましょう。
2: Index.html の簡(jiǎn)単な分析
まず第一に、ドキュメント タイプは HTML5 ドキュメント宣言を使用します。これは、HTML4 の長(zhǎng)いリストよりも明らかに単純で明確です。さらに、すべてのブラウザと互換性があります。 IE を設(shè)計(jì)するときに、この書(shū)き方の標(biāo)準(zhǔn)モードにも入るからです。したがって、今後の文書(shū)申告はこのように書(shū)かれ、心配がなくなるでしょう。
それから、とても長(zhǎng)いセクションがあります
<!--[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 より高いという條件判定を見(jiàn)てみましょう。
次に、條件付きコメント內(nèi)に対応するクラス名があります。たとえば、lt IE 7 では、html タグに lt-ie9、lt-ie8、lt-ie7 という 3 つのクラスが存在します。これは、ie7、8、および lt よりも下位であることを意味します。それぞれ -ie7 。機(jī)能は何ですか？実は最大の問(wèn)題はCSS HACKを書(shū)くときです。このように書(shū)くとCSS HACKは必要ありません。たとえば、ie6の場(chǎng)合、htmlタグにlt-ie7クラスが存在します。 CSS 優(yōu)先度を直接使用して、以前の設(shè)定を上書(shū)きすることができます。
次に、特別な部分は最後の文にある必要があります。最後の文は、ie8 以降のすべてのブラウザが HTML ヘッダーを使用することを意味します。よく見(jiàn)ると、內(nèi)部にいくつかの不完全な注釈タグが追加されていることがわかります。 IE8 より大きい IE ブラウザでは、これらのタグは完全に無(wú)視されます。 IE 以外のブラウザの場(chǎng)合。 [if gt IE 8] が認(rèn)識(shí)されないため、以下のコメントと併せて全體がコメント化されていることがわかります。このようにして、最も完璧なブラウザ識(shí)別が実現(xiàn)されます。
次に、no-js クラスがあります。これは後ほど主に modernizr.js と併用します。ブラウザーで js が有効になっている場(chǎng)合、modernizr は no-js を js に置き換えるためです。簡(jiǎn)単に言うと、このクラスを使用して、ブラウザで 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版本的用戶(hù)，給出升級(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è)用途
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類(lèi)リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問(wèn)題に注意してください：無(wú)効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開(kāi)発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
HTMLヘッド要素內(nèi)のドキュメントメタデータの構(gòu)成
Jul 09, 2025 am 02:30 AM
htmlheadのメタデータは、SEO、ソーシャル共有、ブラウザの動(dòng)作にとって重要です。 1.ページのタイトルと説明を設(shè)定し、使用して簡(jiǎn)潔で一意に保ちます。 2.オープングラフとツイッターのカード情報(bào)を追加してソーシャル共有効果を最適化し、畫(huà)像サイズに注意を払い、デバッグツールを使用してテストします。 3.文字セットとビューポート設(shè)定を定義して、多言語(yǔ)サポートがモバイル端末に適合していることを確認(rèn)します。 4.著者の著作権、ロボット制御、および標(biāo)準(zhǔn)的な防止コンテンツなどのオプションのタグも合理的に構(gòu)成する必要があります。
2025年の初心者向けの最高のHTMLチュートリアル
Jul 08, 2025 am 12:25 AM
tolearnhtmlin2025、chooseatutorialthatiatutorialthatishands-onpracticewithmodernstandardescssandjavascriptbasics.1.priolitizeds-onlealningswith-by-stepprojectslike by by-dikebuildinging ofersalpersalblement.2.enturetcocrovernhternhtermovernedernhtermoternedernedの
メールテンプレートチュートリアル用のHTML
Jul 10, 2025 pm 02:01 PM
互換性の高いHTMLメールテンプレートを作成する方法は？まず、Div Flexまたはグリッドレイアウトの使用を避けるために、テーブルで構(gòu)造を構(gòu)築する必要があります。第二に、すべてのスタイルにインラインドする必要があり、外部CSSに依存することはできません。次に、畫(huà)像をAlt説明で追加し、パブリックURLを使用する必要があります。ボタンは、背景色のテーブルまたはTDでシミュレートする必要があります。最後に、複數(shù)のクライアントの詳細(xì)をテストして調(diào)整する必要があります。
HTMLフィギュアとFigcaption要素を使用して、キャプションを畫(huà)像やメディアに関連付ける方法は？
Jul 07, 2025 am 02:30 AM
HTML合計(jì)を使用すると、直感的でセマンティックな明確さが可能になり、畫(huà)像またはメディアにキャプションテキストを追加できます。 1。寫(xiě)真、ビデオ、コードブロックなどの獨(dú)立したメディアコンテンツをラップするために使用されます。 2。説明テキストとして配置され、メディアの上または下に配置できます。 3.ページ構(gòu)造の明確さを改善するだけでなく、アクセシビリティとSEO効果も向上します。 4.それを使用する場(chǎng)合、虐待を避けるために注意を払い、通常の裝飾的な寫(xiě)真ではなく、説明を強(qiáng)調(diào)し、伴う必要があるコンテンツに適用する必要があります。 5.無(wú)視できないalt屬性。これはfigcaptionとは異なります。 6.フィマは柔軟で、必要に応じて図の上または下部に配置できます。これらの2つのタグを正しく使用すると、セマンティックで理解しやすいWebコンテンツの構(gòu)築に役立ちます。
サーバーなしでHTMLでフォームの送信を処理する方法は？
Jul 09, 2025 am 01:14 AM
バックエンドサーバーがない場(chǎng)合、HTMLフォームの送信は、フロントエンドテクノロジーまたはサードパーティサービスを通じて処理できます。特定の方法には次のものが含まれます。1。javaScriptを使用してフォーム送信を傍受して、入力検証とユーザーフィードバックを達(dá)成しますが、データは持続しません。 2. Formspreeなどのサードパーティサーバーレスフォームサービスを使用してデータを収集し、電子メール通知とリダイレクト機(jī)能を提供します。 3. LocalStorageを使用して、ユーザーの好みを保存したり、単一ページのアプリケーションステータスの管理に適した一時(shí)的なクライアントデータを保存しますが、機(jī)密情報(bào)の長(zhǎng)期的なストレージには適していません。
HTMLで最も一般的に使用されるグローバル屬性は何ですか？
Jul 10, 2025 am 10:58 AM
クラス、ID、スタイル、データ、およびタイトルは、HTMLで最も一般的に使用されるグローバル屬性です。クラスは、スタイル設(shè)定とJavaScript操作を容易にするために、1つ以上のクラス名を指定するために使用されます。 IDは、アンカージャンプとJavaScriptコントロールに適した要素の一意の識(shí)別子を提供します。スタイルを使用すると、インラインスタイルを追加できます。一時(shí)的なデバッグに適していますが、大規(guī)模な使用にはお?jiǎng)幛幛筏蓼护蟆％签`タプロパティは、フロントエンドとバックエンドの相互作用に便利なカスタムデータの保存に使用されます。タイトルはマウスオーバープロンプトを追加するために使用されますが、そのスタイルと動(dòng)作はブラウザによって制限されます。これらの屬性の合理的な選択は、開(kāi)発効率とユーザーエクスペリエンスを改善できます。
HTMLの畫(huà)像のネイティブレイジーロードを?qū)g裝します
Jul 12, 2025 am 12:48 AM
ネイティブLazyロードは、タグにロード= "lazy"屬性を追加することにより、寫(xiě)真の怠zyなロードを可能にする組み込みブラウザー機(jī)能です。 1. JavaScriptまたはサードパーティライブラリを必要とせず、HTMLで直接使用されます。 2。ページの下の最初の畫(huà)面に表示されない寫(xiě)真、畫(huà)像ギャラリーはアドオンをスクロールし、大規(guī)模な寫(xiě)真リソースに適しています。 3.最初の畫(huà)面またはディスプレイを備えた寫(xiě)真には適していません。 4。それを使用する場(chǎng)合、レイアウトジッターを避けるために適切なプレースホルダーを設(shè)定する必要があります。 5。SRCSETおよびサイズの屬性と組み合わせて、レスポンシブな畫(huà)像の読み込みを最適化する必要があります。 6。互換性の問(wèn)題を考慮する必要があります。一部の古いブラウザはそれをサポートしていません。これらは、機(jī)能検出を通じて使用し、JavaScriptソリューションと組み合わせることができます。
