HTML head タグの詳細な紹介

この記事は Yisi の記事に基づいており、一般的に使用されるヘッドの各タグと要素の意味と使用シナリオを紹介するための詳細な概要を提供します。 HTML のヘッド部分には、Web ページのブラウザレンダリングや SEO などに関わる多くのタグや要素が存在します。各ブラウザコアや国内ブラウザメーカーごとに独自のタグ要素があり、多くの違いがあります。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。この記事は Yishi の記事に基づいており、一般的に使用される head 内の各タグと要素の意味と使用シナリオを紹介するために拡張された概要を提供します。

DOCTYPE

DOCTYPE(Document Type)、この宣言はドキュメントの最前部、html タグの前にあり、このタグはドキュメントが使用する HTML または XHTML 仕様をブラウザーに伝えます。

DTD (Document Type Definition) 宣言は で始まり、大文字と小文字が区別されず、先頭にコンテンツがありません (スペースを除く) 他のコンテンツがある場合、ブラウザーは IE での Quirks モードのレンダリングを有効にします。ウェブページ。パブリック DTD、名前の形式は、registration //organization // type tag // language です。登録は、組織が国際標準化機構 (ISO) によって登録されているかどうかを指します。+ ははい、- はいいえを意味します。 「組織」は、W3C などの組織の名前です。通常、タイプは DTD です。タグはパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名を指定し、その後にバージョン番号を続けることができます。最終言語は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。

●HTML 4.01 strict

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

1. 語" "http://www.w3.org/TR/html4/strict.dtd">

●HTML 4.01 Transitional

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

1. span class="tag">>

●HTML 4.01 フレームセット

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

1. レームセット //EN " "http://www.w3.org/TR/html4/frameset.dtd"

   >

●最新のHTML5では、より簡潔な記述が導入されており、上位互換性と下位互換性があり、使用することをお勧めします。

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

1. p>>

HTML では、doctype には主に 2 つの目的があります。

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

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

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

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

●変ではない（標準）モード

●変なモード
●一部変（ほぼ標準）モード
IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグ、詳細読み取りモードについて？標準！コンテンツ。

charset

ドキュメントで使用される文字エンコーディングを宣言します

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

1. meta charset="utf-8">

html5 前のページは次のようになります:

X ML/HTML コードコピークリップボードへのコンテンツ

1. meta http-equiv="Content-Type" content="text/html; charset=utf-8">

これら 2 つは同等です。詳細については、 と を使用することをお勧めします。短くて覚えやすいもの。

lang属性

簡体字中国語

XML/HTMLコード内容をクリップボードにコピー

1. html lang=「zh-cmn- ハンス」 ">

繁体字中国語

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. metahttp-equiv="X - UA-互換性のある "content=" ie = edge、chrome = 1 "/＆gt;このタグを読み取った後、すぐに対応するスピード コアに切り替えます。 さらに、

xml/html コードを追加します

コンテンツをクリップボードにコピーします & lt;

Meta Http-Equiv =

1. 另另另content="IE =Edge,chrome=1"> このように書くことで得られる効果は、Google Chrome Frame がインストールされている場合、ページのレンダリングに GCF が使用されます。GCF がインストールされていない場合、次に、レンダリングに IE カーネルの最新バージョンを使用します。 関連リンク: ブラウザカーネル制御 メタタグドキュメント

   Baiduはトランスコーディングを禁止しています

百度携帯電話でWebページを開くと、BaiduはあなたのWebページをトランスコードし、服を脱いで体に貼り付ける可能性があります 犬の皮膚絆創膏の広告用、ヘッダーに

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

を追加できます関連リンク :SiteApp トランスコーディング ステートメント

1. SEO 最適化部分 ページ タイトル

タイトル

>あなたのタイトル

タイトル

>

ページのキーワードキーワード

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

   メタ

名前

=
「キーワード」

内容

=
「あなたのキーワード」

>

ページ説明コンテンツ説明

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

   メタ

name

=
"説明"

content

=
"あなたの説明"

>

Web 著者の著者を定義します

1. XML/HTML コードコンテンツをクリップボードにコピーしますmeta

name

=

"author"

content

=
「著者、メールアドレス「

>

」は、ウェブ検索エンジンのインデックス作成方法を定義します。Robotterms は英語のカンマ「,」で区切られた一連の値です。通常、次の値があります: none、noindex、nofollow、all 、インデックスを付けてフォローしてください。

1. XML/HTML コードコンテンツをクリップボードにコピー "index,follow" >

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

Viewport を使用すると、モバイル ブラウザーでのレイアウト表示を改善できます。 通常は

1. XML/HTML コードコンテンツをクリップボードにコピーしますmeta name

   =
"viewport"

content
=
「幅=デバイス」 -width,initial-scale=1.0">

width=device-width を指定すると、iPhone 5 がホーム画面に追加され、WebApp 全画面モードでページを開いたときに黒い境界線が表示されます ( http://bigc.at/ ios-webapp-viewport-meta.orz)

コンテンツパラメータ:

width ビューポートの幅 (値/デバイスの幅) 高さ ビューポートの高さ (値/デバイスの高さ) 初期スケール初期スケーリング maximum-scale 最大スケーリング率 minimum-scale 最小スケーリング

user-scalable ユーザーにズームを許可するかどうか (はい/いいえ)

minimal-ui iOS 7.1 beta 2 の新しい属性により、上部と下部のステータス バーを最小化できますページがロードされたとき。これはブール値であり、次のように直接書くことができます:

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

   1. meta name="viewport" content="width=device-width、initial -scale= 1 、minimal-ui">

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

   
   

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

   1. "width=device-width, user-scalable=yes"> 関連リンク：非レスポンシブ デザイン ビューポート iPhone 6 および iPhone 6plus に適応させるには、次のように記述する必要があります: XML/HTML コード

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

   
   
   
   
   

   meta

   
   name

   =
   "viewport"

   1. content="width=375"> meta name

      =
   "viewport"
   2. content

      ="幅=414">ほとんどの 4.7 ～ 5 インチ Android デバイスのビューポート幅は 360px に設定されていますが、iPhone 6 では 375px であり、ほとんどの 5.5 インチ Android マシン (たとえば、 Samsung Note) は 400、iPhone 6 plus のビューポート幅は 414px です。 iOSデバイス ホーム画面にタイトルを追加（iOS 6の新機能）

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

   
   

   meた名前 ="apple-mobile-web-app-title"
   content
   1. =

      "title"> ステータスバー XML/HTML コードコンテンツをクリップボードにコピー

   meta

   name="apple-mobile-web-app-status-bar-style"

   content
   =
   1. "black-translucent"

      />の場合に有効です

   「apple-mobile-web-app-capable」 content="yes" の場合にのみ有効です
   
   content パラメータ:
   
   default デフォルト値。
   黒 ステータスバーの背景は黒です。
   黒半透明 ステータスバーの背景は黒で半透明です。 「デフォルト」または「黒」に設定すると、Web コンテンツはステータス バーの下部から始まります。 黒半透明に設定すると、Web ページのコンテンツが画面全体に表示され、上部はステータス バーで隠れます。
   
   電話番号としての番号の自動識別を無効にする

   
   

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

   1. metaname= 「フォーマット検出」 content="telephone=no"/>

   iOSアイコン

   relパラメータ: apple- touch-アイコン写真は角丸やハイライトなどの効果が自動で加工されます。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone と iTouch (デフォルトは 57x57 ピクセル) には、次のような

   コードが必要です:

   
   

   iPad、72x72 ピクセル、オプションですが推奨

   コードは次のとおりです:

   
   

   Retina iPhone および Retina iTouch、114x114 ピクセルは、なしでも使用できますが、推奨します。

   コードは次のとおりです:

   
   

   Retina iPad、144x144 ピクセル、オプションですが推奨

   コードは次のとおりです:

   !-- Retina iPad、144x144 ピクセル、オプションですが推奨-->
   

   iOS アイコンのサイズは、iPhone 6 plus では 180 x 180、iPhone 6 では 120 x 120 です。 iPhone 6 Plus に適応させるには、次のようにこの

   コードを追加する必要があります:

   
   

   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 (標準解像度)

   コードは次のとおりです:

   
   

   iPad 縦画面 1536x2008 (Retina

   コードは以下の通り:

   
   

   iPad 横画面1024x748 (標準解像度レート)

   コードは次のとおりです:

   
   

   iPad 横画面 2048x1496 (Retina)

   コードは次のとおりです:

   
   

   iPhone および iPod touch の起動画面には、ステータスバー領域

   iPhone/iPod Touch 縦画面 320x480 (標準解像度)

   コードは次のとおりです:

   
   

   iPhone/iPod Touch 縦画面 640x960 (Retina)

   コードは以下の通りです

   
   

   iPhone 5/iPod Touch 5 縦画面 640x1136 (Retina)

   コードは次のとおりです。

   
   

   iPhone 6 に対応した画像サイズは 750×1294、iPhone 6 Plus に相当するのは 1242×2148 です。
   コードは次のとおりです:

   
   
   

   Windows 8
   Windows 8のタイルカラー

   のコードは次のとおりです:

   
   

   Windows 8 のタイル アイコン
   のコードは次のとおりです:

   
   

   RSS 購読
   コードは次のとおりです:

   
   

   ファビコンアイコン
   コードは次のとおりです:

   
   

   ファビコンの詳細については、https://github.com/audreyr/favicon-cheat-sheet を参照してください

   
   
   モバイル用メタ
   XML/HTML コードコンテンツをクリップボードにコピー

   1. < ;metaname= "viewport "content="width=device-width、initial-scale=1、user-scalable=no"/>

   2. メタ 名前=「apple -mobile-web-app-capable」 content=「はい」 />

   3. メタ 名前 ="apple-mobile-web-app-status -bar-style" content="black"/>

   4. meta name="format-検出"コンテンツ="電話​​=いいえ、メール=いいえ" />

   5. メタ名前= 「ビューポート」 コンテンツ="width=デバイス幅、initial-scale=1、user-scalable=no"/>

   6. meta name="apple-mobile-web-app-capable" content="yes" />

   7. meta name="apple-mobile-web-app-status-bar-style" content="black " />

   8. meta name="format-detection" content= "telphone =no, email=no"/>

   10. meta name="renderer" content="webkit">

   12. meta http-equiv="X-UA-互換" content=" IE=edge">

   14. meta name="HandheldFriendly" content="true">

   16. meta name="MobileOptimized" content="320">

   18. メタ name=「画面の向き」 content=「縦向き」>

   20. メタ 名前=「x5方向」 内容=「ポートレート」>

   22. メタ name="x5-fullscreen" content="true">

   23. -- QQ アプリケーション モード -->

   24. メタ name="x5-page-mode" content="app"

       >

   25. < ;!-- Windows Phone で [ハイライトなし] をクリック -->

   26. meta name="msapplication-tap-highlight" content="no"

       >

   27. < ;!-- モバイルエンドに適応 -->

   28. これは、toobug からの共有の概要です。 その他のメタタグリファレンスCOMPLETE LIST OF HTML META TAGS2013年にすべてのWebページに必要な18のメタタグ

   参考記事:

   29. よく使われるHTMLヘッダータグ

   html5_header

   amazeui css
   DOCTYPE
   WEBエンジニアとデザイナーはiOS 8の10の新しい変更点を学ぶ必要があります

以上がHTML head タグの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。