HTML の先頭部分には、ブラウザによる Web ページのレンダリングや SEO などに関わる多くのタグや要素があり、各ブラウザ カーネルや国内ブラウザ メーカーごとに独自のタグ要素があり、その結果、多様性。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。よく使われるheadの各タグや要素の意味や利用シーンをまとめて紹介します。
DOCTYPE (ドキュメント タイプ)、この宣言はドキュメントの先頭、html タグの前にあり、このタグはドキュメントが使用する HTML または XHTML 仕様をブラウザーに伝えます。
DTD (Document Type Definition) 宣言は で始まり、大文字と小文字が区別されません。 の前に他のコンテンツがある場合、ブラウザはその下で quirks モードをオンにします。 IE。Web ページをレンダリングします。 パブリック DTD、名前の形式は登録 // 組織 // タイプ タグ // 言語です。登録は組織が国際標準化機構 (ISO) に登録されているかどうかを指します。+ ははい、- はいいえを意味します。 「組織」は、W3C などの組織の名前です。通常、タイプは DTD です。タグはパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名を指定し、その後にバージョン番号を続けることができます。最後の言語は、DTD 言語の ISO 639 言語識別子です。たとえば、EN は英語、ZH は中国語を意味します。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ、厳密なバージョン、移行バージョン、フレームワークベースの HTML ドキュメントを表します。
HTML 4.01 strict
HTML 4.01 Transitional
HTML 4.01 フレームセット
最新の HTML5 では、より簡潔な記述が導入されており、前方および後方互換性があり、使用することをお勧めします。
HTML における doctype には主に 2 つの目的があります。
· 書類の有効性を確認します。
これは、このドキュメントがどの DTD に従って記述されているかをユーザー エージェントとバリデータに伝えます。このアクションは受動的であり、ページが読み込まれるたびにブラウザは DTD をダウンロードせず、ページが手動で検証される場合にのみ有効になります。
ブラウザのレンダリング モードを決定します
実際の操作では、ドキュメントを読み取るときに使用する解析アルゴリズムをブラウザに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。
o 変ではない（標準）モード
o 変なモード
o 部分的に変な（標準に近い）モード IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグについて。
ドキュメントで使用される文字エンコーディングを宣言します。
html5 のように書きますこれ:
これら 2 つは同等です。詳細については、こちらをご覧ください :?vs? (このリンクは stackoverflow に関する質問と回答です) そのため、より短く簡単なメモリを使用することをお勧めします。
簡体字中国語
繁体字中国語
なぜ通常書く lang="zh-CN" ではなく lang="zh-cmn-Hans" なのでしょうか? 順を追って読んでください: ページの先頭のステートメントは lang="zh" または lang にする必要があります。 ="zh-cn"。
360 ブラウザはこのタグをすぐに読み取ります。対応速度芯。さらに、念のため追加してください
次のように書くことができます。実現される効果は、Google Chrome Frame がインストールされている場合は、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合は、IE カーネルの最新バージョンがレンダリングに使用されます。
関連リンク:
Baidu 携帯電話で Web ページを開くと、Baidu は Web ページをトランスコードし、衣服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けることがあります。
ページのキーワード キーワード
ページの説明コンテンツの説明
Web 著者の著者の定義
Web 検索エンジンのインデックス付け方法を定義します。robotterms はカンマ「,」で区切られた一連の値であり、通常は次の値を持ちます: none、noindex、nofollow、all、index、follow。
関連リンク: WEB1038 - タグに無効な値が含まれています
width=device-width と書くと iPhone 5 が発生します。ホーム画面に追加した後、WebApp 全画面モード (http://bigc.at/ios-webapp-viewport-meta.orz) でページを開くと黒い境界線が表示されます
・初期スケール 初期スケーリング
・最大スケール 最大スケーリング
・最小スケール 最小スケーリング
・ユーザースケーリング可能ユーザーズーム (はい/いいえ)
minimal-ui iOS 7.1 beta 2 の新しい属性により、ページの読み込み時に上部と下部のステータス バーを最小化できます。これは次のように直接記述できるブール値です:
ウェブサイトが応答しない場合は、初期スケールを使用しないか、スケーリングを無効にしてください。
関連リンク: 非レスポンシブデザインビューポート
へiPhone 6 および iPhone 6plus に適応させるには、次のように記述する必要があります:
ほとんどの 4.7 ～ 5 インチ Android デバイスのビューポート幅は 360px に設定されていますが、iPhone 6 では 375px です。ほとんどの 5.5 インチ Android マシン (たとえば、 Samsung Note) は 400 です。iPhone 6 plus では 414px です。
ホーム画面に追加された (iOS 6 の新機能)
WebApp 全画面モードを有効にするかどうか
"apple-mobile-web-app-capable" content="yes" の場合にのみ有効です。
content パラメータ:
· デフォルトのデフォルト値。
-- 電話番号としての数字の自動認識を無効にする - ->
iOS アイコン
rel パラメータ: apple-touch-icon 写真は自動的に角丸とハイライトに処理されます。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone と iTouch (デフォルトは 57x57 ピクセル) には
Retina iPad、144x144 ピクセル、オプションですが推奨
IOS アイコンのサイズiPhone 6 Plusでは180×180、iPhone 6では120×120です。 iPhone 6 Plus に適応させるには、この段落を追加する必要があります
公式ドキュメント：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 (標準解像度)
<リンクrel= "apple-touch-startup-image"sizes="2048x1496" href="/splash-screen-2048x1496.png" />
iPhone および iPod touch の起動画面にはステータス バー領域が含まれています。
iPhone/iPod Touch 縦画面 320x480 (標準解像度)
iPhone 6 の対応画像サイズは 750×1294、iPhone 6 Plus の対応画像サイズは 1242×2148 です。
Windows 8 タイルカラー
favicon アイコン
< !- - モバイル エンドに適応する -->これは、toobug からの共有の概要です。
その他のメタ タグのリファレンス
· HTML メタ タグの完全なリスト
· 2013 年にすべての Web ページに必要な 18 のメタ タグ
参考記事:
· 一般的に使用される HTML ヘッド タグ
· amazeui cs
ウィズより
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
