HTML のメタタグについて知っておくべきこと-htmlチュートリアル-php.cn

HTML のメタタグについて知っておくべきこと

怪我咯

リリース： 2017-04-10 09:50:37

オリジナル

1460 人が閲覧しました

MetaタグはHTML言語のhead領域にある補助タグで、HTML文書の先頭にあるheadタグとtitleタグの間に位置し、ユーザーには見えない情報を提供します。これは、ブラウザー (コンテンツの表示方法やページのリロード方法)、検索エンジン (キーワード)、またはその他の Web サービスで使用できます。

フロントエンドページの開発で頻繁に使用されるメタタグの内容をドキュメントにまとめ、必要に応じて参照できるようにモバイル Web 開発のメタ情報を追加しました。

1. 文書で使用されている文字エンコーディングを説明します

<meta charset=&#39;utf-8&#39;>

ログイン後にコピー

または

りー

メタタグは、HTML ページで使用される文字セットを Unicode である utf-8 として定義します。簡体字中国語、繁体字中国語、その他の言語（日本語、韓国語など）を同じページに表示できます。もちろん、gb2312 (簡体字中国語)、big5 (繁体字中国語) およびその他の文字セットを使用することもできます。

現時点では、HTML5 でも採用されている最初の記述方法を使用することを一般的に推奨しています。

2. 使用するブラウザとバージョンを宣言します

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ログイン後にコピー

指定されたコンテンツ値が IE=edge,chrome=1 の場合、最新バージョンの IE および Chrome が最初に使用されます。クライアントに Google Chrome Frame がインストールされていると仮定すると、IE で Chrome レンダリングエンジンが使用されてページがレンダリングされます。それ以外の場合は、クライアント IE の最高標準モードがページのレンダリングに使用されます。

次の設定もあります:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

ログイン後にコピー

3. SEO 最適化関連

ページの説明。各 Web ページには、Web ページのコンテンツを正確に反映する 150 文字以内の説明タグが必要です。

りー

ページのキーワード。各 Web ページには、Web ページのコンテンツを説明する固有のキーワードのセットが必要です。

ユーザーが検索する可能性が高い、説明的で代表的なキーワードとフレーズを使用し、ページで提供される情報を正確に説明します。

りー

Web ページの作成者を定義します (オプション)

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

ログイン後にコピー

4. ページのリダイレクトと更新: コンテンツ内の数字は時間 (秒)、つまり更新にかかる時間を表します。 URL を追加すると、指定した Web ページにリダイレクトされます。

りー

上記のコードは、5 秒間滞在した後、自動的に更新され、URL http://www.php.cn

にジャンプすることを意味します。 5. Web ページの有効期限を切れます

<meta name="description" content="不超过150个字符" />

ログイン後にコピー

Web ページの有効期限を設定します。有効期限が切れたら、サーバー上で再度呼び出す必要があります。GMT 時間形式を使用するか、直接 0 (キャッシュなし) に設定する必要があります。

6. プラグマはローカルキャッシュを無効にします

<meta name="keywords" content="html5, css3, 关键字"/>

ログイン後にコピー

Webページをキャッシュに保存しないように設定し、アクセスするたびにページを更新してください。この設定では、訪問者はオフラインで閲覧できなくなります。

7. ビューポートモバイルデバイス画面表示領域

モバイルデバイスの画面幅は従来の Web の画面幅と異なるため、ビューポートの値を変更する必要があります。

ほとんどの 4.7 ～ 5 インチデバイスのビューポート幅は 360 ピクセルに設定され、5.5 インチデバイスは 400 ピクセルに設定され、iPhone6 プラスは 414 ピクセルに設定されます。

width – ビューポートの幅 (範囲は 200 ～ 10,000、デフォルトは 980 ピクセル)

height – ビューポートの高さ (223 ～ 10,000 の範囲)

初期スケール – 初期スケーリング (0 ～ 10 の範囲)

最小スケール – ユーザーがズームできる最小比率

maximum-scale – ユーザーがズームできる最大比率

ユーザースケーラブル – ユーザーが手動でスケーリングできるかどうか (いいえ、はい)

<meta name="author" content="月光光" />

ログイン後にコピー

ドキュメントとデバイスの幅を強制的に 1:1 のままにします;

ドキュメントの最大幅比率は 1.0 (初期スケールの初期スケール値と最大スケールの最大スケール値) です。ユーザースケーラブルは、ページをデバイスのサイズに固定できるように、ユーザーが手動でズームできるかどうかを定義します (いいえはスケーリングできないことを意味します)。注: 実際のテストでは、一部の Android ブラウザーではこのルールがサポートされていないため、ボックスがズームインされると、応答ボックスもズームインされ、ページが混乱することが判明しました。 : ページの最小幅を定義します。

りー

多くの人が応答しない Web サイトでInitial-scale=1 を使用するため、Web サイトが 100% の幅でレンダリングされ、ユーザーが手動でページを移動したりズームしたりする必要があることに注意してください。 user-scalable=no または Maximum-scale=1 が、initial-scale=1 とともに使用される場合、ユーザーは Web ページを拡大/縮小してコンテンツ全体を表示することはできません。

モバイルデバイスのメタには次の設定もあります。

8. WebAppフルスクリーンモード：偽装アプリ、オフラインアプリケーション。

りー

9. ステータスバーを非表示にする/ステータスバーの色を設定する: WebApp 全画面モードがオンになっている場合にのみ有効です。コンテンツの値はデフォルトで黒 | 半透明です。

りー

10. ホーム画面にタイトルを追加しました

rreee

11. 番号を無視して自動的に電話番号として認識します

<meta http-equiv="Refresh"  contect="5;url=http://www.php.cn" />

ログイン後にコピー

12. 識別メールを無視する

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

ログイン後にコピー

以上がHTML のメタタグについて知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。