検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML ヘッダー tag_html/css_WEB-ITnose

HTML ヘッダー tag_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:25:371113ブラウズ

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

    1

    HTML 4.01 Transitional

  • HTML 4.01 フレームセット


  • JavaScript

    1

    < ;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • 最新の HTML5 では、より簡潔な記述が導入されており、上位互換性と下位互換性があり、使用することをお勧めします。

    JavaScript

    1

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

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

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

    • charset

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

    1

    <メタcharset= "utf-8">

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

    XHTML

    1

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

    lang 属性
    简体中文

    XHTML

    1

    繁体字中国語

    XHTML

    1

    なぜ通常は 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

    1

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

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

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

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

    XHTML

    を追加できます

    1

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

    SEO 最適化部分

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

    ページキーワード

  • XHTML

    1

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

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

  • Web 著者 author の定義

    XHTML

    1

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

    XHTML

    1

    関連リンク: 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

    1

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

    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

    1

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

    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 ピクセル、必須です

    1

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

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

    XHTML

    1

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

    -precomowned" sizes="144x144" href="/apple-touch-icon - 144x144-precomposited.png" /> 180、iPhone 6 は 120×120 です。 iPhone 6 plus に適応するには、このセクションを

    XHTML

    に追加する必要があります。

    1 ###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 (標準解像度)

    XHTML

    iPad ポートレート 1536×2008 (Retina)

    ="apple-touch-startup-image" size="1536x2008" href="/splash-screen- 1536x2008.png" />

    1

    ;

    iPad 横画面 1024×748 (標準解像度)

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

    iPad 横長 2048×1496 (Retina)

    iPhone/iPod Touch 竖屏 640×960 (Retina)

    XHTML

    1

    < ;link rel="apple-touch-startup-image" size="640x960" href="/splash-screen-640x960.png" />

    iPhone 5/iPod Touch 5 竖画面 640×1136 (Retina)

    XHTML

    1

    追加智能アプリ广告条 スマートアプリバナー（iOS 6+ Safari）

    XHTML

    1

    iPhone 6 に対応する写真のサイズは 750×1294、iPhone 6 Plus に対応する場合は 1242×2148 です。

    XHTML

    1

    2

    3

    Windows 8

    Windows 8 タイルの色

    meta name="msapplication-TileColor" content="#000"/>

    XHTML

    1
    < !-- Windows 8 タイルアイコン-->

    RSS 購読

    1

    XHTML

    ファビコンアイコン

    favicon の詳細については、https://github.com/audreyr/favicon-cheat-sheet

    を参照してください。

    XHTML

    1

    2

    3

    4

    5

    6

    7 < ;meta name="apple-mobile-web-app-status-bar-style" content="black" />

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    gt;

    ;

    ;

    <-- モバイル エンドに適応する - -> ;

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

    Ask - ワンクリックでプログラマーに電話して質問に答えるツール、才能のある人材向けの 1 対 1 のサービス、開発者がプロ​​グラミングする際に必須の公式 Web サイト: www.wenaaa.com

    QQ グループ 290551701 には多くのインターネットが集まりますエリート、テクニカル ディレクター、アーキテクト、プロジェクト マネージャー!オープンソース テクノロジーの研究は、IT 業界で働くことに興味のある業界関係者、専門家、初心者を歓迎します。

    • 声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS3属性prefix_html/css_WEB-ITnoseの扱い方次の記事：CSS3属性prefix_html/css_WEB-ITnoseの扱い方

    関連記事

    続きを見る