HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタグや要素が多数あり、各ブラウザカーネルや国内ブラウザメーカーごとに独自のタグ要素があるため、大きな違いが生じます。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。この記事の目的は、各タグの意味を理解し、ニーズに合ったヘッドタグを記述することです。この記事は Yisi の記事に基づいており、概要を拡張して、よく使用されるヘッド内のさまざまなタグと要素の意味と使用シナリオを紹介します。 文書タイプ DOCTYPE (ドキュメント タイプ) の宣言は、ドキュメントの先頭、HTML タグの前にあります。このタグは、ドキュメントがどの HTML または XHTML 仕様を使用しているかをブラウザーに伝えます。 DTD (文書型定義) 宣言は <!DOCTYPE> で始まります。大文字と小文字は区別されません。その前には何もありません。他のコンテンツ (スペースを除く) がある場合、ブラウザーは IE で Web ページを Quirks モードでレンダリングします。パブリック DTD、名前の形式は、登録//組織//タイプ タグ//言語です。登録は、組織が国際標準化機構 (ISO) に登録されているかどうかを示します。+ は登録済み、- は登録されていないことを意味します。組織は、W3C などの組織の名前です。タイプは一般的に DTD です。タグは、参照されるパブリック テキストの一意の説明名であるパブリック テキストの説明を指定します。オプションでバージョン番号が続きます。最後の言語は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ、厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。 ●HTML 4.01 厳密 XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
HTML における doctype の主な目的は 2 つあります。 ●書類の有効性を確認します。 これは、ドキュメントがどの DTD で記述されたかをユーザー エージェントとバリデータに伝えます。このアクションは受動的です。ブラウザはページがロードされるたびに DTD をダウンロードして有効性をチェックしません。ページが手動で検証された場合にのみ有効になります。 ●ブラウザのレンダリングモードを決定する 実際の操作では、ドキュメントの読み取り時に使用する解析アルゴリズムをブラウザに指示します。記述されていない場合、ブラウザは独自のルールに従ってコードを解析するため、HTML レイアウトに重大な影響を与える可能性があります。ブラウザが HTML ドキュメントを解析する方法は 3 つあります。 ●非奇妙(標準)モード●奇妙モード●部分的に奇妙(標準に近い)モード IEのドキュメントモード、ブラウザモード、厳密モード、Quirksモード、DOCTYPEタグについては、モードを詳しく読むことができますか?標準!コンテンツ。 文字セット 文書で使用される文字エンコーディングを宣言します。 XML/HTML コードコンテンツをクリップボードにコピー
HTML5 以前は、Web ページは次のように記述されていました。 XML/HTML コードコンテンツをクリップボードにコピー
<meta charset='utf-8'> と <meta http-equiv='Content-Type'> で説明されているように、これら 2 つは同等であるため、覚えやすい短い方を使用することをお勧めします。 XML/HTML コードコンテンツをクリップボードにコピー
繁体字中国語 XML/HTML コードコンテンツをクリップボードにコピー
通常の lang="zh-CN" ではなく、なぜ lang="zh-cmn-Hans" なのでしょうか? 次をお読みください: ページ ヘッダーの宣言では lang="zh" と lang="zh-cn" のどちらを使用すればよいですか? XML/HTML コードコンテンツをクリップボードにコピー
360 Google Chrome Frame の使用 XML/HTML コードコンテンツをクリップボードにコピー
このタグを読み取った後、360 ブラウザはすぐに対応する高速コアに切り替わります。 さらに、保険のために、 XML/HTML コードコンテンツをクリップボードにコピー
このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。 関連リンク: ブラウザカーネル制御メタタグの説明ドキュメント XML/HTML コードコンテンツをクリップボードにコピー
関連リンク: SiteApp トランスコーディング ステートメント XML/HTML コードコンテンツをクリップボードにコピー
ページキーワード XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
ウェブページの作成者を定義する XML/HTML コードコンテンツをクリップボードにコピー
ウェブ検索エンジンがウェブページをインデックスする方法を定義します。Robotterms は、カンマ「,」で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow のいずれかの値を持ちます。
関連リンク: WEB1038 - タグに無効な値が含まれています ビューポートを使用すると、モバイル ブラウザーでレイアウトをより適切に表示できます。 通常は書く XML/HTML コードコンテンツをクリップボードにコピー
width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーン モードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz) コンテンツパラメータ: 幅 ビューポートの幅 (値/デバイス幅) XML/HTML コードコンテンツをクリップボードにコピー
ウェブサイトがレスポンシブでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。 XML/HTML コードコンテンツをクリップボードにコピー
関連リンク: レスポンシブでないビューポート
ほとんどの 4.7 ~ 5 インチの Android デバイスのビューポート幅は 360 ピクセルですが、iPhone 6 では 375 ピクセルです。ほとんどの 5.5 インチの Android デバイス (Samsung Note など) のビューポート幅は 400 ですが、iPhone 6 Plus では 414 ピクセルです。 XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
ステータスバーの背景色を設定する XML/HTML コードコンテンツをクリップボードにコピー
「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します XML/HTML コードコンテンツをクリップボードにコピー
iOSアイコン rel パラメータ: apple-touch-icon 画像は、角丸、ハイライト、その他の効果で自動的に処理されます。 apple-touch-icon-precomposed は、システムによる効果の自動追加を禁止し、元のデザインを直接表示します。 iPhoneとiTouch、デフォルト57x57ピクセル、 コードをコピー コードは次のとおりです。<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone および iTouch、デフォルト 57x57 ピクセル、必須 --> iPad、72x72ピクセル、オプションだが推奨 コードをコピー コードは次のとおりです。<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad、72x72 ピクセル、オプションだが推奨 --> Retina iPhone および Retina iTouch、114 x 114 ピクセル、オプションだが推奨 コードをコピー コードは次のとおりです。<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone および Retina iTouch、114x114 ピクセル、オプションですが推奨 --> Retina iPad、144x144 ピクセル、オプションだが推奨 コードをコピー コードは次のとおりです。<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad、144x144 ピクセル、オプションですが推奨 --> iOS アイコンのサイズは、iPhone 6 plus では 180×180、iPhone 6 では 120x120 です。 iPhone 6 Plusに適応するには、この段落を追加する必要があります コードをコピー コードは次のとおりです。<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"> iOS スプラッシュスクリーン iPad 縦画面 768 x 1004 (標準解像度) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 縦画面 768 x 1004 (標準解像度) --> iPad 縦画面 1536x2008 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 縦画面 1536x2008 (Retina) --> iPad 横向き 1024x748 (標準解像度) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横向き 1024x748 (標準解像度) --> iPad 横向き 2048x1496 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横長 2048x1496 (Retina) --> iPhone および iPod touch の起動画面にはステータスバー領域が含まれます。 iPhone/iPod Touch 縦画面 320x480 (標準解像度) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 縦画面 320x480 (標準解像度) --> iPhone/iPod Touch ポートレート 640x960 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch ポートレート 640x960 (Retina) --> iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina) --> スマート アプリ バナーの追加 (iOS 6 以降 Safari) コードをコピー コードは次のとおりです。<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- スマート アプリ バナーを追加 (iOS 6+ Safari) --> iPhone 6 の画像サイズは 750×1294、iPhone 6 Plus の画像サイズは 1242×2148 です。 コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"> ウィンドウズ8 コードをコピー コードは次のとおりです。<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 タイルの色 --> Windows 8 タイルアイコン コードをコピー コードは次のとおりです。<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 タイル アイコン --> RSS購読 コードをコピー コードは次のとおりです。<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- RSS サブスクリプションを追加 --> ファビコンアイコン コードをコピー コードは次のとおりです。<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- ファビコンアイコンを追加 --> ファビコンの詳しい紹介については、https://github.com/audreyr/favicon-cheat-sheet を参照してください。
その他のメタタグ参照
参考記事:
|
>>: モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)
今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...
<p><b>これは太字フォントです</b></p> ...
Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...
grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...
今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...
序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...
数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...
実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...
パート1: 基礎1. :active や :hover などの疑似クラスとは異なり、これらはすべて疑...
ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...
PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...
<br />ページに <img src=""> が含まれ...
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...