HTMLヘッダータグの詳しい紹介_HTML/Xhtml_Webページ制作
HTML のヘッド部分には、Web ページのブラウザレンダリングや SEO などに関わる多くのタグや要素が存在します。各ブラウザコアや国内ブラウザメーカーごとに独自のタグ要素があり、多くの違いがあります。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。この記事は Yishi の記事に基づいており、一般的に使用される head 内の各タグと要素の意味と使用シナリオを紹介するために拡張された概要を提供します。
DOCTYPE
DOCTYPE (ドキュメント タイプ)。この宣言はドキュメントの最前面、HTML タグの前に配置されます。このタグはブラウザにドキュメントの種類を伝えます。ドキュメントが使用する HTML または XHTML 仕様。
DTD (Document Type Definition) 宣言は で始まり、大文字と小文字が区別されず、先頭に内容がありません (スペースを除く) 他の内容がある場合、ブラウザーは奇妙な画面を開きます。 IE のモード (quirks モード) は Web ページをレンダリングします。パブリック DTD、名前の形式は、registration //organization // type tag // language です。登録は、組織が国際標準化機構 (ISO) によって登録されているかどうかを示し、はいを示し、- はいいえを示します。 「組織」は、W3C などの組織の名前です。通常、タイプは DTD です。タグはパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名を指定し、その後にバージョン番号を続けることができます。最終言語は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。
●HTML 4.01 厳密
- >
- >
- >
- >
HTML では、doctype には 2 つの主な目的があります。
●書類の正当性を確認します。
このドキュメントがどの DTD に従って記述されているかをユーザー エージェントとバリデータに伝えます。このアクションは受動的であり、ページがロードされるたびにブラウザは DTD をダウンロードせず、ページが手動で検証された場合にのみ有効になります。
●ブラウザのレンダリングモードを決定します
実際の操作では、ドキュメントを読み取るときにどの解析アルゴリズムを使用するかをブラウザーに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。
●変ではない(標準)モード
●変なモード
●部分的に変な(ほぼ標準)モード IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグについて詳しく知ることができます読書モード?標準!コンテンツ。
文字セット
ドキュメントで使用される文字エンコーディングを宣言します。
- <メタ charset="utf-8">
HTML5 が導入される前は、Web ページは次のようになります:
- <meta http-equiv="Content-Type " コンテンツ="text/html">
これら 2 つは同等です。以下の詳細をお読みください: vs 覚えやすい短いものを使用することをお勧めします。 繁体字中国語 なぜ通常書く lang="zh-CN" ではなく lang="zh-cmn-Hans" なのでしょうか? 以下をお読みください: ページの先頭のステートメントは lang="zh" でなければなりません。 lang="zh-cn"。 360 Google Chrome フレームを使用する 360 ブラウザは、このタグを読み取るとすぐに対応するスピード コアに切り替わります。 また、念のため この方法で実現できる効果は、Google Chrome Frame がインストールされている場合、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合、IE カーネルの最新バージョンがレンダリングに使用されます。 関連リンク: ブラウザ カーネル コントロール メタ タグのドキュメント 関連リンク: SiteApp トランスコーディング ステートメント
lang 属性
簡体字中国語
最新バージョンの IE と Chrome を優先的に使用します
Baidu はトランスコーディングを禁止しています
Baidu 携帯電話で Web ページを開くと、Baidu が Web ページのトランスコードを変更する場合があります。服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けます。この目的のために、頭に
SEO 最適化部分
ページ タイトル
- <タイトル>あなたのタイトルタイトル>
ページのキーワード キーワード
- <メタ 名前="キーワード" コンテンツ=「キーワード」>
ページの説明コンテンツの説明
- <メタ 名前="説明" コンテンツ=「あなたの説明」>
Web 作者の定義
- <メタ 名前="著者" コンテンツ="著者、メールアドレス">
Web 検索エンジンのインデックス付け方法を定義します。Robotterms は、英語のカンマ「,」で区切られた一連の値です: none、noindex、nofollow、all、index、follow。
XML/HTML コードコンテンツをクリップボードにコピーします
- <メタ 名前="ロボット" コンテンツ="インデックス、フォロー">
関連リンク: WEB1038 - タグに無効な値が含まれています
ビューポート
ビューポートを使用すると、モバイルブラウザでのレイアウト表示を改善できます。 通常は
と書きます- <メタ 名前="ビューポート" コンテンツ="width=デバイス幅、初期スケール=1.0">
width=device-width を指定すると、iPhone 5 がホーム画面に追加され、WebApp 全画面モードで開かれたときに黒い境界線が表示されます (http://bigc.at/ios-webapp-viewport-メタ.orz )
コンテンツパラメータ:
width ビューポートの幅 (数値/デバイスの幅)
高さ ビューポートの高さ (数値/デバイスの高さ)
初期スケール 初期スケーリング比
最大スケール 最大スケーリング比
最小-scale 最小ズーム率
user-scalable ユーザー スケーリングを許可するかどうか (はい/いいえ)
minimal-ui iOS 7.1 beta 2 の新しい属性により、ページの読み込み時に上部と下部のステータス バーを最小化できます。これはブール値であり、次のように直接書くことができます:
- <メタ 名前="ビューポート" コンテンツ="width=device-width、initial-scale=1、minimal-ui">
Web サイトが応答しない場合は、初期スケールを使用しないか、スケーリングを無効にしてください。
- <メタ 名前="ビューポート" コンテンツ="width=device-width,user-scalable=yes">
関連リンク: 非レスポンシブデザインのビューポート
iPhone 6 および iPhone 6plus に適応するには、次のように記述する必要があります:
XML/HTMLコードコンテンツをクリップボードにコピーします
- <メタ 名前="ビューポート" コンテンツ="width=375">
- <メタ 名前="ビューポート" コンテンツ="width=414">
ほとんどの 4.7 ~ 5 インチ Android デバイスのビューポート幅は 360 ピクセルに設定されていますが、iPhone 6 では 375 ピクセルです。ほとんどの 5.5 インチ Android デバイス (Samsung Note など) のビューポート幅は 400 です。 iPhone 6 プラスでは 414 ピクセル。
iOS デバイス
タイトルがホーム画面に追加されました (iOS 6 の新機能)
- <メタ 名前="apple-mobile-web -app-title" content="title">
WebApp 全画面モードを有効にするかどうか
- <メタ 名前="apple-mobile-web -app-capable" コンテンツ="はい" />
ステータスバーの背景色を設定します
- <メタ 名前="apple-mobile-web -app-status-bar-style" content="black-translucent" />
iOS アイコン
relパラメータ:apple-touch-icon 画像の角丸とハイライトを自動で加工します。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone および iTouch、デフォルト 57x57 ピクセル、必須
iPad、72x72 ピクセル、オプションですが推奨
Retina iPhone および Retina iTouch、114x114 ピクセル、オプションですが推奨
iOSアイコンのサイズは、iPhone 6 plusでは180×180、iPhone 6では120×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)
スマート アプリ バナーを追加 スマート アプリ バナー (iOS 6 Safari)
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 コードコンテンツをクリップボードにコピー
- <メタ 名前="ビューポート" コンテンツ="width=device-width, initial-scale=1, user-scalable=no" />
- <メタ 名前="apple- mobile-web-app-capable" コンテンツ="はい" / >
- <メタ 名前="apple- mobile-web-app-status-bar-style" コンテンツ="black" />
- <メタ name="フォーマット検出"コンテンツ="電話=いいえ、メール=いいえ" />
- <メタ 名前="ビューポート" コンテンツ="width=device-width, initial-scale=1, user-scalable=no" />
- <メタ 名前="apple- mobile-web-app-capable" コンテンツ="はい" / >
- <メタ 名前="apple- mobile-web-app-status-bar-style" コンテンツ="black" />
- <メタ 名前="format-検出" コンテンツ="電話番号 = いいえ、メール = いいえ" / >
- <メタ 名前="レンダラー" コンテンツ=「ウェブキット」>
- <メタ http-equiv=" " > <
- メタ 名前 =
- "ハンドヘルドフレンドリー" コンテンツ="true">
<
- メタ 名前
=- "MobileOptimized" コンテンツ="320"> <
- メタ 名前
=- "画面-向き" コンテンツ="ポートレート"> <
- メタ 名前
=- "x5-向き" コンテンツ="ポートレート"> <
- メタ 名前
=- "full-画面" 内容="はい"> <
- メタ 名前
=- "x5-全画面" コンテンツ="true"> <
- メタ 名前
=- "ブラウザモード" コンテンツ=「アプリケーション」> <
- メタ 名前
=- "x5-ページモード" コンテンツ="アプリ">
- <メタ name="msapplication-タップハイライト「 コンテンツ=「いいえ」>
これは toobug からの共有の要約です。
その他のメタタグ参照
参考記事:

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます
