ホームページ > 記事 > ウェブフロントエンド > HTML5_html5 でメタ属性を使用する方法のチュートリアルのヒント

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

WBOYオリジナル: 2016-05-16 15:45:551697ブラウズ

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

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

XML/HTML コードコンテンツをクリップボードにコピー

<メタ charset='utf-8'>

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

XML/HTML コードコンテンツをクリップボードにコピー

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

メタ名前

"説明" コンテンツ=「150 文字以内」 />ページの説明 <メタ名前
"キーワード" content="html5、css3、キーワード"/>ページのキーワード <メタ名前
"著者" コンテンツ=「マジックイン」 />Web 作成者の定義 <メタ名前
「ロボット」コンテンツ="インデックス、フォロー" />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. <リンク 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. <メタ名前="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. "ハンドヘルドフレンドリー" content="true">主に携帯端末向けに最適化されています。 BlackBerry など、ビューポートを認識しない一部の古いブラウザ <メタ名前
8. "MobileOptimized" コンテンツ="320">Microsoft の古いブラウザ <メタ名前
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]-->
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

声明：

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

前の記事：HTML5のストレージ機能とWebの関連操作方法を解析する SQL_html5チュートリアルスキル次の記事：HTML5のストレージ機能とWebの関連操作方法を解析する SQL_html5チュートリアルスキル

続きを見る

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

関連記事