HTML ヘッドタグの詳細な紹介

HTML ヘッドタグの詳細な紹介
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 コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >   
●HTML 4.01 移行

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >   
●HTML 4.01 フレームセット

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 フレームセット//EN" "http://www.w3.org/TR/html4/frameset.dtd" >   
●最新のHTML5では、より簡潔な記述方法が導入されており、前方互換性と後方互換性があり、使用が推奨されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   

HTML における doctype の主な目的は 2 つあります。

●書類の有効性を確認します。

これは、ドキュメントがどの DTD で記述されたかをユーザー エージェントとバリデータに伝えます。このアクションは受動的です。ブラウザはページがロードされるたびに DTD をダウンロードして有効性をチェックしません。ページが手動で検証された場合にのみ有効になります。

●ブラウザのレンダリングモードを決定する

実際の操作では、ドキュメントの読み取り時に使用する解析アルゴリズムをブラウザに指示します。記述されていない場合、ブラウザは独自のルールに従ってコードを解析するため、HTML レイアウトに重大な影響を与える可能性があります。ブラウザが HTML ドキュメントを解析する方法は 3 つあります。

●非奇妙(標準)モード●奇妙モード●部分的に奇妙(標準に近い)モード IEのドキュメントモード、ブラウザモード、厳密モード、Quirksモード、DOCTYPEタグについては、モードを詳しく読むことができますか?標準!コンテンツ。

文字セット

文書で使用される文字エンコーディングを宣言します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 文字セット= "utf-8" >   

HTML5 以前は、Web ページは次のように記述されていました。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >   

<meta charset='utf-8'> と <meta http-equiv='Content-Type'> で説明されているように、これら 2 つは同等であるため、覚えやすい短い方を使用することをお勧めします。

lang属性

中国語(簡体字)

XML/HTML コードコンテンツをクリップボードにコピー
  1. < html   lang = "zh-cmn-Hans" >   

繁体字中国語

XML/HTML コードコンテンツをクリップボードにコピー
  1. < html   lang = "zh-cmn-Hant" >     

通常の lang="zh-CN" ではなく、なぜ lang="zh-cmn-Hans" なのでしょうか? 次をお読みください: ページ ヘッダーの宣言では lang="zh" と lang="zh-cn" のどちらを使用すればよいですか?

IEとChromeの最新バージョンを優先する

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge、chrome=1"   />   

360 Google Chrome Frame の使用

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "レンダラー"  コンテンツ= "webkit" >   

このタグを読み取った後、360 ブラウザはすぐに対応する高速コアに切り替わります。 さらに、保険のために、

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=Edge、chrome=1" >   

このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。

関連リンク: ブラウザカーネル制御メタタグの説明ドキュメント

Baiduはトランスコーディングを禁止

Baidu Mobileでウェブページを開くと、Baiduはウェブページをトランスコードし、あなたの服を脱がせて犬の皮の絆創膏の広告をあなたに貼り付けることがあります。これを行うには、

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "キャッシュ制御"  コンテンツ= "no-siteapp"   />   

関連リンク: SiteApp トランスコーディング ステートメント


SEO最適化セクション

ページタイトル <title> タグ (head が必要)

XML/HTML コードコンテンツをクリップボードにコピー
  1. < title >あなたのタイトル</ title >   

ページキーワード

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "キーワード"   content = "キーワード" >    


ページの説明

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前= "説明"   content = "あなたの説明" >   

ウェブページの作成者を定義する

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前= "著者"   content = "著者,メールアドレス" >   

ウェブ検索エンジンがウェブページをインデックスする方法を定義します。Robotterms は、カンマ「,」で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow のいずれかの値を持ちます。

XML/HTML コードコンテンツをクリップボードにコピー

  1. <メタ 名前= "ロボット"  コンテンツ= "インデックス、フォロー" >   

関連リンク: WEB1038 - タグに無効な値が含まれています

ビューポート

ビューポートを使用すると、モバイル ブラウザーでレイアウトをより適切に表示できます。 通常は書く

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0" >   

width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーン モードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz)

コンテンツパラメータ:

幅 ビューポートの幅 (値/デバイス幅)
高さ ビューポートの高さ (値/デバイスの高さ)
初期スケール 初期スケーリング
最大スケール 最大ズーム比
最小スケール 最小ズーム比
user-scalable ユーザーにズームを許可するかどうか (はい/いいえ)
minimal-ui iOS 7.1 ベータ 2 の新機能で、ページが読み込まれると上部と下部のステータス バーが最小化されます。これはブール値であり、次のように直接記述できます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1、最小限のUI" >   

ウェブサイトがレスポンシブでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、ユーザースケーラブル=はい" >   

関連リンク: レスポンシブでないビューポート

iPhone 6 および iPhone 6plus に適応するには、次のように記述する必要があります。

XML/HTML コード
コンテンツをクリップボードにコピー

  1. <メタ  name = "ビューポート"  コンテンツ= "幅=375" >   
  2. <メタ  name = "ビューポート"  コンテンツ= "幅=414" >   

ほとんどの 4.7 ~ 5 インチの Android デバイスのビューポート幅は 360 ピクセルですが、iPhone 6 では 375 ピクセルです。ほとんどの 5.5 インチの Android デバイス (Samsung Note など) のビューポート幅は 400 ですが、iPhone 6 Plus では 414 ピクセルです。

iOSデバイス

ホーム画面に追加した後のタイトル(iOS 6 の新機能)

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前= "apple-mobile-web-app-title"  コンテンツ= "タイトル" >   <!-- ホーム画面に追加した後のタイトル (iOS 6 の新機能) -->   


WebApp フルスクリーンモードを有効にするかどうか

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前= "apple-mobile-web-app-capable"  コンテンツ= "はい"   />   <!-- WebApp フルスクリーン モードを有効にするかどうか -->   

ステータスバーの背景色を設定する

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前= "apple-mobile-web-app-status-bar-style"  コンテンツ= "黒半透明"   />     
  2. <!-- ステータス バーの背景色を設定します。`"apple-mobile-web-app-capable" content="yes"` の場合にのみ有効です -->   

「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します

コンテンツパラメータ:

default デフォルト値。
黒 ステータスバーの背景は黒です。
black-translucent ステータスバーの背景は黒で半透明です。 デフォルトまたは黒に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。 黒半透明に設定すると、Web ページのコンテンツが画面全体を占め、上部はステータス バーによってブロックされます。

電話番号として番号を自動的に識別しないようにする

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "フォーマット検出"  内容= "電話番号=いいえ"   />   <!-- 番号を電話番号として自動的に識別しないようにする -->   

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 スプラッシュスクリーン

公式ドキュメント: https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考記事: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad の起動画面にはステータス バー領域が含まれません。

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
Windows 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 を参照してください。

モバイルメタ

XML/HTML コードコンテンツをクリップボードにコピー

  1. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ"   />   
  2. <メタ 名前= "apple-mobile-web-app-capable"  コンテンツ= "はい"   />   
  3. <メタ 名前= "apple-mobile-web-app-status-bar-style"  内容= "黒"   />   
  4. <メタ  name = "format-detection" content = " telephone = no email = no " />   
  5. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ"   />   
  6. <メタ 名前= "apple-mobile-web-app-capable"  コンテンツ= "はい"   /> <!-- Apple のデフォルトのツールバーとメニューバーを削除します -->   
  7. <メタ 名前= "apple-mobile-web-app-status-bar-style"  内容= "黒"   /> <!-- Apple ツールバーの色を設定する -->   
  8. <メタ  name = "フォーマット検出"  内容= "電話番号=いいえ、メールアドレス=いいえ"   /> <!-- ページ内の数字を無視して電話番号として認識し、電子メールの認識は無視します -->   
  9. <!-- 360 ブラウザの超高速モードを有効にする (Webkit) -->   
  10. <メタ  name = "レンダラー"  コンテンツ= "webkit" >   
  11. <!-- 互換モードを使用して IE を回避する -->   
  12. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge" >   
  13. <!-- ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです -->   
  14. <メタ 名前= "HandheldFriendly"  コンテンツ= "true" >   
  15. <!-- Microsoft の古いブラウザ -->   
  16. <メタ 名前= "モバイル最適化"  コンテンツ= "320" >   
  17. <!-- uc は垂直画面を強制します -->   
  18. <メタ 名前= "画面の向き"  コンテンツ= "ポートレート" >   
  19. <!-- QQ 強制縦画面 -->   
  20. <メタ 名前= "x5-方向"  コンテンツ= "ポートレート" >   
  21. <!-- UC 強制フルスクリーン -->   
  22. <メタ  name = "フルスクリーン"  コンテンツ= "はい" >   
  23. <!-- QQ は全画面を強制します -->   
  24. <メタ 名前= "x5-フルスクリーン"  コンテンツ= "true" >   
  25. <!-- UC アプリケーション モード -->   
  26. <メタ 名前= "ブラウザモード"  コンテンツ= "アプリケーション" >   
  27. <!-- QQ アプリケーション モード -->   
  28. <メタ 名前= "x5 ページ モード"  コンテンツ= "アプリ" >   
  29. <!-- Windows Phone をクリックしてもハイライトされない -->   
  30. <メタ 名前= "msapplication-tap-highlight"  コンテンツ= "いいえ" >   
  31. <!-- モバイル端末に適応 -->   


これはtoobugからの共有要約です。

その他のメタタグ参照

  • HTML メタタグの完全なリスト
  • 2013 年にすべての Web ページに必要な 18 個のメタ タグ

参考記事:

  • よく使われるHTMLヘッドタグ
  • html5_ヘッダー
  • アマゼウイ CSS
  • 文書タイプ
  • ウェブエンジニアとデザイナーが知っておくべき iOS 8 の 10 の新しい変更点

<<:  DockerでGPUを使用するプロセスの詳細な説明

>>:  モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

推薦する

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

SQL ステートメント実行の詳細な説明 (MySQL アーキテクチャの概要 -> クエリ実行プロセス -> SQL 解析順序)

序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

「MySQL サービスを開始できません エラー 1069」を解決する方法

今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...

MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード

序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...

IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォント ソリューションを表示します。

数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...

::before/:before と ::after/:after の使用に関する深い理解

パート1: 基礎1. :active や :hover などの疑似クラスとは異なり、これらはすべて疑...

親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...

Ubuntu 16.04 で PostgreSQL の起動を設定する方法

PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

MySQL ビューの原理と使用法の詳細な分析

序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...