HTMLでのmetaタグと使い方を詳しく解説

要素は、検索エンジンの説明やキーワード、更新頻度などのページに関するメタ情報を提供します。この記事では主にHTMLにおけるmetaタグの詳しい説明と使い方を紹介していますので、興味のある方はぜひ参考にしてみてください。

HTML のメタタグ

1. メタタグの意味

要素は、検索エンジンの説明やキーワード、更新頻度など、ページに関するメタ情報を提供できます。

タグはドキュメントの先頭にあり、コンテンツは含まれません。

タグの 属性は、ドキュメントに関連付けられた名前と値のペアを定義します。

2.metaでよく使われる属性

1.charset(文字セット)

説明：HTML文書の文字エンコーディングを指定します。

使用法:

2. ビューポート (viewport)

説明: ユーザーの Web ページの表示領域です。 一般に、モバイル デバイスの画面は PC の画面よりもはるかに小さいことは誰もが知っています。Webkit ブラウザでは、より大きな「仮想」ウィンドウがモバイル デバイスの画面にマップされます。デフォルトの仮想ウィンドウは幅 980 ピクセルです (ほとんどの Web サイトの現在の標準)。 .幅) を指定し、特定の比率 (3:1 または 2:1) に従って拡大縮小します。つまり、通常の Web ページをロードするとき、Webkit は最初に 980 ピクセルのブラウザ標準で Web ページをロードし、次に 490 ピクセルの幅を縮小します。この縮小はグローバルな縮小であることに注意してください。つまり、ページ上のすべての要素が縮小されます。

使用法:

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

(1) width

幅はビューポートのサイズを制御し、通常は device-width に設定されます

(2)initial-scale

Initial-scale: 初期スケーリング比、つまり、ページが最初にロードされたときのズーム率。

(3)maximum-scale

maximum-scale 最大ズーム。つまり、許可されるスケーリングの最大度です。これは、画面サイズと比較したページ サイズの最大乗数を示す浮動小数点値でもあります。

(4) minimum-scale

minimum-scale: ユーザーがズームできる最小比率。最大スケールの使用法と同様です。

（5）user-scalable by by by by / /つまり、ユーザーがページのズーム レベルを変更できるかどうかです。 「yes」に設定されている場合、ユーザーは変更を許可されます。それ以外の場合は「no」です。

3. キーワード (keywords)

説明: 検索エンジンに提供されるキーワードのリスト。各キーワードは英語のカンマ「,」で区切ります。検索エンジンが検索品質を向上させるために使用するキーワードを指定します。

使用法: <メタ名="キーワード" コンテンツ="キーワード 1, キーワード 2, キーワード 3, キーワード 4,...">

4. description (説明、導入)

: 説明が使用されます。ウェブサイトのメインコンテンツを検索エンジンに伝えるため。

使用法:

5. format-detection (フォーマット検出)

説明: format-detection は、いくつかの要素を検出するために使用されます。 html形式で。

使い方：metaのformat-detection属性は主に以下の設定になります:

　meta name="format-detection" content="telephone=no"
　　　　meta name="format-detection" content="email=no"
　　　　meta name="format-detection" content="adress=no"

連続して書くこともできます:meta name="format-detection" content="telephone=no,email=no,adress=no "

\あなたが入力した番号には、明らかにあなたが書いた数字の文字列にリンクスタイルが追加されていませんが、iPhoneは自動的にテキストにリンクスタイルを追加し、番号をクリックすると自動的にダイヤルされます。番号！このダイヤルアップ リンクを削除するにはどうすればよいですか?この時点で、メタはその魔法の力を再び発揮する必要があります。コードは次のとおりです。

電話番号をダイヤルアップ リンクに変換することを禁止します。

Telephone=yes は、番号のダイヤルアップ リンクへの変換をオンにします。変換機能をオンにするには、このメタを記述する必要はありません。デフォルトでオンになっています。

（2）email

メールボックスを認識せず、クリック後に自動的に送信しないようにデバイスに指示します

email=noはメールアドレスとして禁止されています！
email=yesがオンになっている場合、テキストはデフォルトでメールアドレスになります。このメタを記述する必要はありません。

(3) adress

adress=no 地図へのジャンプは禁止です！

adress=yes は、住所をクリックして直接地図にジャンプする機能を有効にします。デフォルトで有効になっています。

6. apple-touch-fullscreen

説明: ホーム画面に追加すると、全画面で表示されます。

使用法:

7.

手順: この機能は、デフォルトの Apple ツールバーとメニュー バーを削除することです。 content には「yes」と「no」の 2 つの値があります。ツールバーとメニューバーを表示する必要がある場合、デフォルトではこの行を追加する必要はありません。

使用法:

8. App-Config

説明: 履歴とアニメーション効果を保持します

使用法: < meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

9. msapplication-tap-highlight

説明: ハイライトなしでクリック(ハイライト)

使用法：< ;meta name="msapplication-tap-highlight" content="no">

関連する推奨事項:

デバイス画面の CSS 属性を制御するためにメタ タグにビューポートを実装する方法

HTMLメタタグの使い方のまとめ

HTMLメタタグの一般的な使い方の紹介

以上がHTMLでのmetaタグと使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。