この記事は 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コンテンツをクリップボードにコピー
>
●HTML 4.01 Transitional
XML/HTML コードコンテンツをクリップボードにコピー
>
XML/HTML コードコンテンツをクリップボードにコピー
XML/HTML コードコンテンツをクリップボードにコピー
●変なモード
●一部変(ほぼ標準)モード
IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグ、詳細読み取りモードについて?標準!コンテンツ。
charset
ドキュメントで使用される文字エンコーディングを宣言しますXML/HTMLコードコンテンツをクリップボードにコピーします
<meta charset="utf-8">
html5 前のページは次のようになります:
X ML/HTML コードコピークリップボードへのコンテンツ
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
これら 2 つは同等です。詳細については、 と を使用することをお勧めします。短くて覚えやすいもの。
lang属性
簡体字中国語
XML/HTMLコード内容をクリップボードにコピー
<html lang=「zh-cmn- ハンス」 ">
繁体字中国語
XML/HTMLコードコンテンツをクリップボードにコピー
<html lang=「zh- cmn- Hant">
なぜ私たちが通常書く lang="zh-CN" ではなく lang="zh-cmn-Hans" なのでしょうか? 続きをお読みください: ページの先頭のステートメントは次のようにする必要があります。 lang="zh" または lang="zh-cn" を使用します。
IE と Chrome の最新バージョンを推奨します
XML/HTML コードコンテンツをクリップボードにコピーします
<metahttp-equiv="X - UA-互換性のある "content=" ie = edge、chrome = 1 "/&gt;このタグを読み取った後、すぐに対応するスピード コアに切り替えます。 さらに、
コンテンツをクリップボードにコピーします & lt;
Meta Http-Equiv =
另另另content="IE =Edge,chrome=1"> このように書くことで得られる効果は、Google Chrome Frame がインストールされている場合、ページのレンダリングに GCF が使用されます。GCF がインストールされていない場合、次に、レンダリングに IE カーネルの最新バージョンを使用します。 関連リンク: ブラウザカーネル制御 メタタグドキュメント
Baiduはトランスコーディングを禁止していますXML/HTML コードコンテンツをクリップボードにコピー
を追加できます関連リンク :SiteApp トランスコーディング ステートメントSEO 最適化部分 ページ タイトル
<
タイトル
>あなたのタイトル
>
ページのキーワードキーワード
XML/HTML コードコンテンツをクリップボードにコピー <
メタ=
「キーワード」
=
「あなたのキーワード」
>
XML/HTML コードコンテンツをクリップボードにコピー<
メタ=
"説明"
=
"あなたの説明"
>
Web 著者の著者を定義しますXML/HTML コードコンテンツをクリップボードにコピーします<meta
"author"
=
「著者、メールアドレス「
>
」は、ウェブ検索エンジンのインデックス作成方法を定義します。Robotterms は英語のカンマ「,」で区切られた一連の値です。通常、次の値があります: none、noindex、nofollow、all 、インデックスを付けてフォローしてください。XML/HTML コードコンテンツをクリップボードにコピー "index,follow" >
関連リンク: WEB1038 - タグ無効な値が含まれています
viewport
Viewport を使用すると、モバイル ブラウザーでのレイアウト表示を改善できます。 通常は
XML/HTML コードコンテンツをクリップボードにコピーします<meta name
=content
=
「幅=デバイス」 -width,initial-scale=1.0">
コンテンツパラメータ:
width ビューポートの幅 (値/デバイスの幅) 高さ ビューポートの高さ (値/デバイスの高さ) 初期スケール初期スケーリング maximum-scale 最大スケーリング率 minimum-scale 最小スケーリング
user-scalable ユーザーにズームを許可するかどうか (はい/いいえ)
XML/HTML コードコンテンツをクリップボードにコピー
<meta name="viewport" content="width=device-width、initial -scale= 1 、minimal-ui">
そして、ウェブサイトが応答しない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。
XML/HTMLコードコンテンツをクリップボードにコピー
"width=device-width, user-scalable=yes"> 関連リンク:非レスポンシブ デザイン ビューポート iPhone 6 および iPhone 6plus に適応させるには、次のように記述する必要があります: XML/HTML コード
<
name
content="width=375"> <meta name
=="幅=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"
"title"> ステータスバー XML/HTML コードコンテンツをクリップボードにコピー
<
name="apple-mobile-web-app-status-bar-style"
content/>の場合に有効です
「apple-mobile-web-app-capable」 content="yes" の場合にのみ有効です
content パラメータ:
default デフォルト値。
黒 ステータスバーの背景は黒です。
黒半透明 ステータスバーの背景は黒で半透明です。 「デフォルト」または「黒」に設定すると、Web コンテンツはステータス バーの下部から始まります。 黒半透明に設定すると、Web ページのコンテンツが画面全体に表示され、上部はステータス バーで隠れます。
電話番号としての番号の自動識別を無効にする
XML/HTMLコードコンテンツをクリップボードにコピーする
<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)
コードは次のとおりです。
Windows 8
Windows 8のタイルカラー
モバイル用メタ
XML/HTML コードコンテンツをクリップボードにコピー
< ;metaname= "viewport "content="width=device-width、initial-scale=1、user-scalable=no"/>
< ;メタ 名前=「apple -mobile-web-app-capable」 content=「はい」 />
<メタ 名前 ="apple-mobile-web-app-status -bar-style" content="black"/>
<meta name="format-検出"コンテンツ="電話=いいえ、メール=いいえ" />
<メタ名前= 「ビューポート」 コンテンツ="width=デバイス幅、initial-scale=1、user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black " />
<meta name="format-detection" content= "telphone =no, email=no"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-互換" content=" IE=edge">
< meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<メタ name=「画面の向き」 content=「縦向き」>
<メタ 名前=「x5方向」 内容=「ポートレート」>
<メタ name="x5-fullscreen" content="true">
-- QQ アプリケーション モード -->
<メタ name="x5-page-mode" content="app"
>< ;!-- Windows Phone で [ハイライトなし] をクリック -->
<meta name="msapplication-tap-highlight" content="no"
>< ;!-- モバイルエンドに適応 -->
これは、toobug からの共有の概要です。 その他のメタタグリファレンスCOMPLETE LIST OF HTML META TAGS2013年にすべてのWebページに必要な18のメタタグ
よく使われるHTMLヘッダータグ
html5_header
以上がHTML head タグの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。