コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5_html5 でメタ属性を使用する方法のチュートリアルのヒント

HTML5_html5 でメタ属性を使用する方法のチュートリアルのヒント

WBOY
リリース： 2016-05-16 15:45:55
オリジナル
1715 人が閲覧しました

meta 属性は HTML において非常に重要な位置を占めます。例：検索エンジンのSEO、ドキュメントの文字エンコード、リフレッシュキャッシュの設定など。一部の Web ページではメタを使用していない場合がありますが、一般の兵士として、メタのいくつかの特性を理解し、それらを上手に使用できるようにする必要があります。

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ charset='utf-8'>

2. ドキュメントの互換モードを宣言します

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ http-equiv="X-UA -互換性のある" コンテンツ="IE=edge" /> 現在利用可能な最高のモードでコンテンツを表示するように IE に指示します
  2. <メタ http-equiv=" " /> は、> ディレクティブを使用してコンテンツのレンダリング方法を決定するように IE に指示します。標準モードのコマンドは IE7 標準モードで表示され、Quirks モードのコマンドは IE5 モードで表示されます。 3. SEO の最適化
    3. XML/HTML コード
  3. コンテンツをクリップボードにコピー

<
メタ 名前
=
  1. "説明" コンテンツ=「150 文字以内」 />ページの説明 <メタ 名前
    2. =
  2. "キーワード" content="html5、css3、キーワード"/>ページのキーワード <メタ 名前
    3. =
  3. "著者" コンテンツ=「マジックイン」 />Web 作成者の定義 <メタ 名前
    4. =
  4. 「ロボット」 コンテンツ="インデックス、フォロー" />Web 検索エンジンのインデックス付け方法を定義します。Robotterms は英語のカンマ「,」で区切られた値のセットです: none、noindex、nofollow、all、index、follow。

    4. モバイルデバイス用のビューポートを追加します

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <メタ 名前 ="ビューポート" content ="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザー- scalable=no">
    2. コンテンツパラメータの説明:
    3. width ビューポートの幅 (値/デバイス幅)
    4. 高さビューポートの高さ (値/デバイスの高さ)
    5. 初期スケール 初期スケーリング率
    6. 最大スケール 最大ズーム率
    7. 最小スケール 最小ズーム率
    8. user-scalable ユーザースケーリングを許可するかどうか (はい/いいえ)
    9. minimum-ui iOS 7.1 beta 2 には、ページの読み込み時に上部と下部のステータス バーを最小化できる新しい属性があります。これはブール値であり、次のように直接記述できます:
    10. <メタ 名前="ビューポート" content="width=device-width,initial-scale=1,minimal-ui"> ;

    5. iOS デバイス

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <メタ 名前="apple-mobile-web -app-title" content="title"> が追加されましたホーム画面後のタイトル (iOS 6 の新機能)
    2. <メタ 名前="apple- mobile-web-app-capable" コンテンツ="はい" / >WebApp 全画面モードを有効にするかどうか
    3. <メタ 名前="apple- mobile-web-app-status-bar-style" content="black-translucent" />ステータスバーの背景色を設定します
    4. "apple-mobile-web-app-capable" content="yes" の場合にのみ有効です
    5. コンテンツパラメータ:
    6. デフォルトのデフォルト値。
    7. 黒 ステータスバーの背景が黒です。
    8. black-translucent ステータスバーの背景は黒で半透明です。
    9. デフォルトまたは黒に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。
    10. 黒半透明に設定すると、Web コンテンツが画面全体に表示され、上部はステータス バーによってブロックされます。

    6. iOS アイコン関連パラメータ

    XML/HTML コードコンテンツをクリップボードにコピー
    1. apple-touch-icon の写真は、角丸とハイライトに自動的に処理されます。
    2. apple-touch-icon-precomposed は、システムが効果を自動的に追加することを禁止し、元のデザインを直接表示します。
    3. <リンク rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone と iTouch、デフォルトは 57x57 ピクセル、
      4. が必要です
    4. <リンク rel="apple- touch-icon-precomowned" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad、72x72 ピクセル、持つことはできませんが、持つことをお勧めします
    5. <リンク rel="apple- touch-icon-precomowned" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone と Retina iTouch、114x114 ピクセル、オプションですが推奨
    6. <リンク rel="apple- touch-icon-precomowned" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad、144x144ピクセルはオプションですが、全員に
      7. を使用することをお勧めします。
    7. <メタ 名前="apple- mobile-web-app-title" content="title">タイトルの長さを漢字 6 文字以内に制限することをお勧めします。余分に長いコンテンツは非表示になり、ホーム画面の後にタイトルに追加されます (iOS 6 の新機能)

    7.iOS起動画面

    XML/HTML コードコンテンツをクリップボードにコピー
    1. iPad の起動画面にはステータス バー領域が含まれません。
    2. iPad 縦画面 768 x 1004 (標準解像度)
    3. <リンク rel="apple- touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad 縦画面 1536x2008 (Retina)
    4. <リンク rel="apple- touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad 横画面 1024x748 (標準解像度)
    5. <リンク rel="apple- touch-startup-image" サイズ="1024x748" href="/Default-Portrait-1024x748.png" />iPad 横長 2048x1496 (Retina)
    6. <リンク rel="apple- touch-startup-image" サイズ="2048x1496" href="/splash-screen-2048x1496.png" />
    7. iPhone および iPod touch の起動画面にはステータス バー領域が含まれています。
    8. iPhone/iPod Touch 縦画面 320x480 (標準解像度)
    9. <リンク rel="apple- touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch 縦画面 640x960 (Retina)
    10. <リンク rel="apple- touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 縦画面640x1136 (網膜)
    11. <リンク rel="apple- touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    12. <リンク rel="apple- touch-startup-image" href="Startup.png" / > ユーザーがホーム画面のアイコンをクリックして WebApp を開くと、システムは起動画面を表示します。これが設定されていない場合、システムはデフォルトで Web サイトのホームページのスクリーンショットを表示します。もちろん、この経験はあまり良いものではありません

    8、Windows 8

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <meta name="msapplication-TileColor" コンテンツ="#000"/> Windows 8 タイルの色
    2. <メタ name="msapplication- TileImage" content="icon.png"/>Windows 8タイルアイコン

    9. あまり使用されない

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <リンク rel=「代替」 タイプ="アプリケーション/RSS XML" タイトル="RSS" href="/rss.xml" />RSS 購読を追加
    2. <リンク rel=" ショートカット アイコン" type="image/ico" href="/favicon.ico" />ファビコン アイコンを追加
    3. <メタ name="format-検出" コンテンツ="電話=no" />電話番号として自動的に認識される数字の認識を禁止します
    4. <メタ name="format-検出" コンテンツ="email=no" />Android にメールを認識させないでください
    5. <メタ 名前="レンダラー" content="webkit">360 ブラウザのスピード モードを有効にする(ウェブキット)
    6. <メタ http-equiv=" " >IE の互換モードの使用は避けてください <メタ 名前
      7. =
    7. "ハンドヘルドフレンドリー" content="true">主に携帯端末向けに最適化されています。 BlackBerry など、ビューポートを認識しない一部の古いブラウザ <メタ 名前
      8. =
    8. "MobileOptimized" コンテンツ="320">Microsoft の古いブラウザ <メタ 名前
      9. =
    9. "x5-方向" コンテンツ="ポートレート">QQ 強制垂直画面
    10. <メタ 名前="full-画面" コンテンツ="はい">UC 強制全画面
    11. <メタ 名前="x5-全画面" コンテンツ="true">QQ 強制全画面
    12. <メタ 名前="ブラウザモード" コンテンツ="アプリケーション">UC アプリケーション モード
    13. <メタ 名前="x5- page-mode" content="app">QQ アプリケーション モード
    14. <メタ http-equiv="キャッシュ制御" コンテンツ="no-siteapp" /> Baidu のトランスコーディングは禁止されています
    15. <メタ name="msapplication-タップハイライト「 コンテンツ=「いいえ」>Windows Phone クリックハイライトはありません
    16. <メタ 名前="キーワード" コンテンツ="" /> キー言葉
    17. <メタ 名前="説明" 内容="" /> 説明
    18. <メタ 名前="タイトル" 内容="" /> タイトル
    19. <メタ 名前="著者" コンテンツ="-06" /> 著者
    20. <メタ 名前=「著作権」 コンテンツ="" /> 会社
    21. <メタ http-equiv=" " 🎜> IE ブラウザで最先端のカーネルを使用してページをレンダリングし、Chrome フレームワークを使用するページで Webkit カーネルを使用します <メタ 名前
    22. ="apple- mobile-web-app-capable" コンテンツ="はい"> IOS6 全画面 <メタ 名前
    23. ="mobile- web-app-capable" コンテンツ="はい"> Chrome高バージョン全画面 <メタ 名前
    24. ="レンダラー" content="webkit"> 360 デュアルコア ブラウザを使用させるWebkit カーネル レンダリング ページ <メタ 名前
    25. ="apple- itunes-app" content="app-id=myAppStoreID、affiliate-data=myAffiliateData、app-argument=myURL"> スマート アプリ バナーを追加 スマート アプリ バナー (iOS 6 Safari) 10.SNSソーシャルタグ
    26. XML/HTML コードコンテンツをクリップボードにコピー
    1. <メタ プロパティ="og:type" コンテンツ=「タイプ」 />
    2. <メタ プロパティ="og: url" コンテンツ="URL アドレス" />
    3. <メタ プロパティ="og: title" content="title" />
    4. <メタ プロパティ="og:画像" コンテンツ="画像" />
    5. <メタ プロパティ="og:説明" 内容="説明" />

    11. IE ブラウザを決定するための条件付きコメント

    XML/HTML コードコンテンツをクリップボードにコピー
    3. ![endif]-->

    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

関連ラベル：
html5
ソース：php.cn
前の記事：HTML5のストレージ機能とWebの関連操作方法を解析する SQL_html5チュートリアルスキル 次の記事：HTML5_html5 チュートリアル スキルでの MathML 数式の使用についての簡単な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート