【03】ヘッダー部のHTML?headタグ記述_html/css_WEB-ITnose?-htmlチュートリアル-php.cn

DOCTYPE

charset

lang 属性

最新バージョンの IE と Chrome を優先的に使用してください

360 Google Chrome Frame を使用します

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

iOS デバイス

iOS起動画面

Windows 8

モバイルメタ

ホームページ

ウェブフロントエンド

htmlチュートリアル

【03】ヘッダー部のHTML?headタグ記述_html/css_WEB-ITnose?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

HTML の先頭部分には、ブラウザによる Web ページのレンダリングや SEO などに関わる多くのタグや要素があり、各ブラウザカーネルや国内ブラウザメーカーごとに独自のタグ要素があり、その結果、多様性。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。よく使われるheadの各タグや要素の意味や利用シーンをまとめて紹介します。

DOCTYPE

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タグについて。

charset

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

html5 のように書きますこれ:

これら 2 つは同等です。詳細については、こちらをご覧ください :?vs? (このリンクは stackoverflow に関する質問と回答です) そのため、より短く簡単なメモリを使用することをお勧めします。

lang 属性

簡体字中国語

繁体字中国語

なぜ通常書く lang="zh-CN" ではなく lang="zh-cmn-Hans" なのでしょうか? 順を追って読んでください: ページの先頭のステートメントは lang="zh" または lang にする必要があります。 ="zh-cn"。

360 Google Chrome Frame を使用します

360 ブラウザはこのタグをすぐに読み取ります。対応速度芯。さらに、念のため追加してください

次のように書くことができます。実現される効果は、Google Chrome Frame がインストールされている場合は、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合は、IE カーネルの最新バージョンがレンダリングに使用されます。

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

Baidu 携帯電話で Web ページを開くと、Baidu は Web ページをトランスコードし、衣服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けることがあります。

ページタイトル <title>あなたのタイトル

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

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

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 デバイス

ホーム画面に追加された (iOS 6 の新機能)

WebApp 全画面モードを有効にするかどうか

"apple-mobile-web-app-capable" content="yes" の場合にのみ有効です。

content パラメータ:

· デフォルトのデフォルト値。

電話番号としての数字の自動認識を無効にする

-- 電話番号としての数字の自動認識を無効にする - ->

iOS アイコン

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

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

< link rel="apple -touch -icon-precomposited" sizes="72x72" href="/apple-touch-icon-72x72-precommposed.png" />

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

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) - - ＆gt; gt;

landscapeスクリーン1024x748（標準解像度）

＆lt; link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/default Portrait-1024x748.png" /> ;

<リンクrel= "apple-touch-startup-image"sizes="2048x1496" href="/splash-screen-2048x1496.png" />

iPhone および iPod touch の起動画面にはステータスバー領域が含まれています。

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

！ - iPhone/iPod Touch Vertical Screen 320x480（標準解像度） - ＆gt; touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

/iPod Touch 5 縦画面 640x1136 (網膜) Reen-640x1136 png" />
iPhone 6 の対応画像サイズは 750×1294、iPhone 6 Plus の対応画像サイズは 1242×2148 です。
Windows 8

Windows 8 タイルカラー
1. name= "msapplication-TileImage" content="icon.png"/> " type="application/rss+xml" title="RSS" href="/rss.xml" /> ;
favicon アイコン
さらに詳しい favicon の紹介は https://github.com/audreyr/favicon-cheat-sheet を参照してください

モバイルメタ
4. < ;meta name="format-detection" content="telephone=no、email=no"/>
7. < "format-detection" content="telphone=no, email=no"/>
11. < ;meta http-equiv="X-UA-Practical" content="IE=edge">
< !- - モバイルエンドに適応する -->これは、toobug からの共有の概要です。

その他のメタタグのリファレンス

· HTML メタタグの完全なリスト

· 2013 年にすべての Web ページに必要な 18 のメタタグ

参考記事:

· 一般的に使用される HTML ヘッドタグ

· amazeui cs

ウィズより