HTML ヘッダー tag_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

DOCTYPE

DOCTYPE (ドキュメントタイプ)、この宣言はドキュメントの先頭、html タグの前にあり、このタグはドキュメントが使用する HTML または XHTML 仕様をブラウザーに伝えます。

DTD (Document Type Definition) 宣言はで始まり、大文字と小文字は区別されず、先頭にコンテンツはありません (スペースを除く) 他のコンテンツがある場合、ブラウザーは IE での Quirks モードのレンダリングを有効にします。ウェブページ。パブリック DTD、名前の形式は、registration //organization // type tag // language です。登録は、組織が国際標準化機構 (ISO) によって登録されているかどうかを指します。+ ははい、- はいいえを意味します。「組織」は、W3C などの組織の名前です。通常、タイプは DTD です。タグは、指定されたパブリックテキストの説明、つまり、参照されるパブリックテキストの一意の説明名であり、その後にバージョン番号を続けることができます。最終言語は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。

HTML 4.01 厳格

XHTML

HTML 4.01 Transitional

HTML 4.01 フレームセット

JavaScript

< ;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

最新の HTML5 では、より簡潔な記述が導入されており、上位互換性と下位互換性があり、使用することをお勧めします。

JavaScript

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

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

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

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

実際の操作では、ドキュメントを読み取るときに使用する解析アルゴリズムをブラウザに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。 * 変じゃない（標準）モード * 変なモード * 一部変（ほぼ標準）モード IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグ、詳細読み取りモードについて？標準！コンテンツ。

charset

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

<メタcharset= "utf-8">

html5 以前の Web ページは次のようになります:

XHTML

これら 2 つは同等です、詳細とのように段階的に読み取ることができるため、覚えやすい短いものを使用することをお勧めします。。

lang 属性

简体中文

XHTML

繁体字中国語

XHTML

なぜ通常は lang="zh-CN" ではなく lang="zh-cmn-Hans" なのか、さらに読んでください: ページの先頭のステートメントは lang=" でなければなりません。 zh” または lang=”zh-cn”。

最新バージョンの IE と Chrome を使用することをお勧めします

XHTML

1	<メタ http- equiv= "X-UA-Practical" content="IE=edge,chrome=1" />

360 ブラウザはこのラベルを取得した後、すぐにに切り替えます。対応するスピードコア。さらに、念のため追加してください

XHTML

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

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

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

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

XHTML

を追加できます

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

SEO 最適化部分

ページタイトル (head ヘッダーは必須) </h3> <li> XHTML <table> <tr> <td> 1 </td> <td> <タイトル> title

ページキーワード

XHTML

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

meta name="description" content="your description">

Web 著者 author の定義

XHTML

Robotterms は、英語のカンマ「,」で区切られた一連の値です: none。、noindex、nofollow、all、インデックスとフォロー。

XHTML

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

viewport

viewport を使用すると、モバイルブラウザーでのレイアウト表示を改善できます。通常は

XHTML

と書きます 1

width=device-width により、iPhone 5 がホーム画面に追加され、WebApp 全画面モード (http) でページを開くと黒い境界線が表示されます。 ://bigc.at/ ios-webapp-viewport-meta.orz) コンテンツパラメータ:

width ビューポートの幅 (値/デバイスの幅)

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

initial- scale 初期スケーリング率

maximum -scale 最大スケーリング率

minimum-scale 最小スケーリング率

user-scalable ユーザーにズームを許可するかどうか (はい/いいえ)

minimal-ui iOS 7.1 beta 2 の新しい属性は、ページが読み込まれるときの上下の状態を最小限に抑える列。これは次のように直接記述できるブール値です:

XHTML

1 <メタname= "viewport" content="width=device-width、initial-scale=1、minimal-ui">

また、ウェブサイトが応答しない場合は、初期スケールを使用しないか、スケーリングを無効にしてください。

XHTML

関連リンク: 非レスポンシブデザインビューポート

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

ほとんどの 4.7 ～ 5 インチの Android デバイスのビューポート幅は 360px に設定されていますが、 iPhone 6 では 375 ピクセルです。ほとんどの 5.5 インチ Android マシン (Samsung Note など) のビューポート幅は 400 ですが、iPhone 6 plus では 414 ピクセルです。

iOS デバイス

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

<メタ名="apple-mobile-web-app- title" content="タイトル">

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

XHTML

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

XHTML

1	<メタ名= "apple -mobile-web-app-status-bar-style" content="black-translucent" />

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

content パラメータ:

defaultデフォルト値。

黒ステータスバーの背景は黒です。

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

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

XHTML

1	<メタ名= format-detection" content="telephone=no" />

iOS アイコン

rel パラメータ: apple-タッチアイコン画像に角丸やハイライトなどの効果を自動で加工します。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone および iTouch、デフォルトは 57×57 ピクセル、必須です

<リンク相対="apple-touch-icon-precomused" href="/apple-touch-icon-57x57-precommoted.png" />

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

XHTML