HTML ヘッドタグの詳細な紹介

HTML における doctype の主な目的は 2 つあります。

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

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

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

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

●非奇妙(標準)モード●奇妙モード●部分的に奇妙(標準に近い)モード IEのドキュメントモード、ブラウザモード、厳密モード、Quirksモード、DOCTYPEタグについては、モードを詳しく読むことができますか?標準！コンテンツ。

文字セット

文書で使用される文字エンコーディングを宣言します。

HTML5 以前は、Web ページは次のように記述されていました。

<meta charset='utf-8'> と <meta http-equiv='Content-Type'> で説明されているように、これら 2 つは同等であるため、覚えやすい短い方を使用することをお勧めします。

lang属性

中国語（簡体字）

繁体字中国語

通常の lang="zh-CN" ではなく、なぜ lang="zh-cmn-Hans" なのでしょうか? 次をお読みください: ページ ヘッダーの宣言では lang="zh" と lang="zh-cn" のどちらを使用すればよいですか?

IEとChromeの最新バージョンを優先する

360 Google Chrome Frame の使用

このタグを読み取った後、360 ブラウザはすぐに対応する高速コアに切り替わります。 さらに、保険のために、

このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。

関連リンク: ブラウザカーネル制御メタタグの説明ドキュメント

Baiduはトランスコーディングを禁止

Baidu Mobileでウェブページを開くと、Baiduはウェブページをトランスコードし、あなたの服を脱がせて犬の皮の絆創膏の広告をあなたに貼り付けることがあります。これを行うには、

関連リンク: SiteApp トランスコーディング ステートメント


SEO最適化セクション

ページタイトル <title> タグ (head が必要)

ページキーワード

ページの説明

ウェブページの作成者を定義する

ウェブ検索エンジンがウェブページをインデックスする方法を定義します。Robotterms は、カンマ「,」で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow のいずれかの値を持ちます。

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

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

ビューポート

ビューポートを使用すると、モバイル ブラウザーでレイアウトをより適切に表示できます。 通常は書く

width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーン モードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz)

コンテンツパラメータ:

幅 ビューポートの幅 (値/デバイス幅)
高さ ビューポートの高さ (値/デバイスの高さ)
初期スケール 初期スケーリング
最大スケール 最大ズーム比
最小スケール 最小ズーム比
user-scalable ユーザーにズームを許可するかどうか (はい/いいえ)
minimal-ui iOS 7.1 ベータ 2 の新機能で、ページが読み込まれると上部と下部のステータス バーが最小化されます。これはブール値であり、次のように直接記述できます。

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

関連リンク: レスポンシブでないビューポート

iPhone 6 および iPhone 6plus に適応するには、次のように記述する必要があります。

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

ほとんどの 4.7 ～ 5 インチの Android デバイスのビューポート幅は 360 ピクセルですが、iPhone 6 では 375 ピクセルです。ほとんどの 5.5 インチの Android デバイス (Samsung Note など) のビューポート幅は 400 ですが、iPhone 6 Plus では 414 ピクセルです。

iOSデバイス

ホーム画面に追加した後のタイトル（iOS 6 の新機能）

WebApp フルスクリーンモードを有効にするかどうか

ステータスバーの背景色を設定する

「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します

コンテンツパラメータ:

default デフォルト値。
黒 ステータスバーの背景は黒です。
black-translucent ステータスバーの背景は黒で半透明です。 デフォルトまたは黒に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。 黒半透明に設定すると、Web ページのコンテンツが画面全体を占め、上部はステータス バーによってブロックされます。

電話番号として番号を自動的に識別しないようにする

iOSアイコン

rel パラメータ: apple-touch-icon 画像は、角丸、ハイライト、その他の効果で自動的に処理されます。 apple-touch-icon-precomposed は、システムによる効果の自動追加を禁止し、元のデザインを直接表示します。 iPhoneとiTouch、デフォルト57x57ピクセル、

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

Retina iPhone および Retina iTouch、114 x 114 ピクセル、オプションだが推奨

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

iOS アイコンのサイズは、iPhone 6 plus では 180×180、iPhone 6 では 120x120 です。 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 です。

ウィンドウズ8
Windows 8 のタイルの色

Windows 8 タイルアイコン

RSS購読

ファビコンアイコン

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

モバイルメタ

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

これはtoobugからの共有要約です。

その他のメタタグ参照

• HTML メタタグの完全なリスト
• 2013 年にすべての Web ページに必要な 18 個のメタ タグ

参考記事:

• よく使われるHTMLヘッドタグ
• html5_ヘッダー
• アマゼウイ CSS
• 文書タイプ
• ウェブエンジニアとデザイナーが知っておくべき iOS 8 の 10 の新しい変更点