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

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"。

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

360 Google Chrome Frame を使用します

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

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

関連リンク:

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

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

SEO 最適化パート

ページタイトル

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

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

Web 著者の著者の定義

Web 検索エンジンのインデックス付け方法を定義します。robotterms はカンマ「,」で区切られた一連の値であり、通常は次の値を持ちます: none、noindex、nofollow、all、index、follow。

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

viewport
ビューポートでレイアウトをより良く表示できるようになりますモバイルブラウザ上で。通常は

width=device-width と書くと iPhone 5 が発生します。ホーム画面に追加した後、WebApp 全画面モード (http://bigc.at/ios-webapp-viewport-meta.orz) でページを開くと黒い境界線が表示されます

content パラメータ:
·width ビューポート幅(値/デバイスの幅)

・高さ ビューポートの高さ (値/デバイスの高さ)

・初期スケール 初期スケーリング

・最大スケール 最大スケーリング

・最小スケール 最小スケーリング

・ユーザースケーリング可能ユーザーズーム (はい/いいえ)

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 の新機能)

- - ホーム画面にタイトルを追加 (iOS 6 の新機能) -->

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

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

content パラメータ:

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

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

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

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

iOS アイコン

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

が必要です。 ;!-- 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" /> ;

iPad 横長 2048x1496 (Retina)

<リンク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" />

1. /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

   
   
   ウィズより