HTMLメタタグの使用法と属性の詳細な分析

この記事は、HTML メタ タグの使用法と属性について詳しく分析したものです。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

フロントエンドを独学で勉強し始めてからメタタグにはあまり触れず、span、button、h1などの表示できるタグを中心に勉強していました。時々、有名な Web サイトのソース コードをチェックすると、head タグに多くのメタが含まれていることがわかります。

今日はメタの使い方を学び、メタがどのような属性を持っているかを見てみましょう。

1. 定義と機能

meta、つまりメタデータ(Metadata)とは、データのデータ情報です。

このタグは、HTML ドキュメントのメタデータを提供します。メタデータはクライアントには表示されませんが、ブラウザによって解析されます。

は通常、説明、キーワード、ファイルの最終変更時刻、作成者、および Web ページのその他のメタデータを指定するために使用されます。

メタデータは、ブラウザ (コンテンツの表示方法やページのリロード方法)、検索エンジン (キーワード)、またはその他の Web サービスを使用して呼び出すことができます。

2. 属性

##content #http-equivhttp 応答ヘッダー名前 #属性名 (htm5 は廃止されました) #1 、 charset

charset(htm5 の新機能)	定義ドキュメント文字エンコーディング
#は、http-equiv または name 属性に関連するメタ情報を定義します。
	scheme
コンテンツ属性の値を変換するためのスキーム

HTML5 新しい属性、現在のページの文字エンコーディングを定義します新しい書き込みメソッド:

<meta charset="UTF-8">

古い書き込みメソッド:

<meta>

HTML5 新しい記述方法が推奨されます

2. 名前属性

a. キーワード、現在の Web ページのキーワード、検索エンジンの識別を容易にし、改善します検索精度

<meta name="keywords" content="cdn，网络加速，运营商">

b、説明、現在の Web ページの簡単な説明。Baidu で検索すると、検索結果の各タイトルの下に説明内容が表示され、ユーザーがすぐに

を見つけやすくなります。

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c、ビューポート、このメタは少し複雑です。主にモバイル Web ページで使用されるため、別の記事が必要です。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

d とロボットは一時的に省略します。検索エンジンのインデックス方法クローラー

<meta name="robots" content="none">

content 値 all、none、index、noindex、follow、および nofollow があります。デフォルトは all です。具体的な手順は表に示すとおりです。

すべてのドキュメントをインデックスにできます。ドキュメント内のリンクはクエリできます。##noneドキュメントにはインデックスを作成できません。ドキュメント内のリンクはクエリできませんindexドキュメントにはインデックスを付けることができますnoindexドキュメントにインデックスを付けることはできませんが、ドキュメント内のリンクはクエリできますフォロードキュメント内のリンクはクエリできますnofollowドキュメントにはインデックスを付けることができますが、リンクをクエリすることはできません

<meta name="author" content="liuhw，liuhuansir@126.com">

<meta name="copyright" content="liuhw">

g、再訪問後、検索エンジン クローラーが再訪問する時間間隔。Web サイトが頻繁に更新されない場合は、次のことができます。この時間を少し長めに設定すると、サーバーへの負荷がわずかに軽減され、帯域幅リソースが節約されます

<meta name="revisit-after" content="5 days" >

e、作成者、ドキュメントの作成者	f、著作権、ドキュメントの著作権記述

h. レンダラ (デュアルコア ブラウザのレンダリング方法) は、どのブラウザ コアがレンダリングに使用されるかを指定します。デフォルト (例: 360 ブラウザ):

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

3, http-equiv

http のヘッダーをシミュレートし、サーバーに情報を送り返します

a、expires、Web ページの有効期限。有効期限が切れた後は、サーバーに再度アクセスする必要があります。

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

b、プラグマ (http1.0 、 1.1 と互換性あり)、キャッシュ制御 (http1 の新機能)。 1)、キャッシュ方法を設定します。cache-control の使用を推奨します。この属性の内容は、cache-control

<meta http-equiv="cache-control" content="no-cache">

c を参照します。http で更新し、自動更新し、URL

にジャンプします。 content で宣言された

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

d と set-cookie に、cookie

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

e、content-Type、ドキュメントの文字エンコーディングを追加します。charset と同じです。charset

<meta http-equiv="content-type" content="text/html;charset=gb2312">

を使用することをお勧めします。

f、x-ua 互換、ドキュメントのレンダリングに使用するバージョンをブラウザに指示します

<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

要約すると、上記は一般的に使用される属性をいくつかリストしただけであり、リストされていない属性は必要です。後でドキュメントを確認してください

[関連する推奨事項:

HTML5 ビデオ チュートリアル

]

以上がHTMLメタタグの使用法と属性の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。