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 フロントエンド デザイン)

推薦する

実務経験7年のフロントエンドスーパーバイザーによる経験共有

今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...

MySQL テーブルデータのインポートとエクスポートの例

この記事では、MySQL テーブル データのインポートおよびエクスポート操作について説明します。ご参...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

MySQLメモリストレージエンジンに関する知識

メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...

IE8 と Chrome でテーブルの幅を修正する方法

IE8 や Chrome で上記の設定を使用すると、画面の最大幅に合わせて表示が統一され、各列の幅は...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...

MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...