メタタグは、HTML言語のヘッドエリアの補助タグです。これらは、HTMLドキュメントのヘッドにあるヘッドタグとタイトルタグの間にあります。ユーザーには表示されない情報を提供します。
メタ:つまり、メタデータはデータのデータ情報です。
メタデータは、ブラウザ(コンテンツを表示したり、ページをリロードする方法)、検索エンジン(キーワード)、またはその他のWebサービスで呼び出すことができます。
私たちの明白な言葉で言えば、それは役に立たないタグ自体ですが、他のプロパティを介してその内部にいくつかの効果が設定されると機能するため、メタデータと呼びます。
<! - ドキュメントのキャラクターエンコードを定義します - > <メタcharset = utf-8 /> <! - 360ブラウザー、QQブラウザーなどの国内のデュアルコアブラウザーに作用するChromiumカーネルを強制します。 name = force-rendering content = webkit/> <! - Google Chrome Frameプラグインがインストールされている場合、それはクロムカーネルに強制されます。そうでなければ、マシンでサポートされているIEカーネルの最高バージョンはIEブラウザーで使用されます - > <メタhttp-equiv = x-ua-captabule content = ie正の整数へのレイアウトビューポート、または文字列幅デバイスの初期スケールセットページの初期スケーリング値を数字として設定すると、ユーザーの最小スケーリング値を使用することができます。ユーザーの最大スケーリング値を数値として使用できます。 Shrink-to-Fit = iOS9では、以前の属性を使用する必要がある場合、レイアウトビューポートの高さを設定するためにこの高さを追加する必要があります。この属性は私たちにとって重要ではありません。ユーザーがスケーリングを許可されているかどうか、値がノーまたはイエスであるかどうかは許可されていない場合は、ユーザースケーラブルを使用することはめったにありません。文字/> <! - ページキーワード - > <メタ名=キーワードコンテンツ=/> <! - > <メタネーム=著者コンテンツ= name = [email protected]/> <! - すべてを検索するエンジンを検索します:ファイルが取得され、ページ上のリンクを照会できます。なし:ファイルは取得されず、ページ上のリンクを照会することはできません。インデックス:ファイルが取得されます。フォロー:ページ上のリンクを照会できます。 noindex:ファイルは取得されません。 nofollow:ページ上のリンクを照会することはできません。 - > <Meta name = robots content = index、follow/> <! - ページ内の番号を無視して電話として認識される、> <meta name = format-detection content = no、email = no/> <! - begin-> <! - ホーム画面に追加した後のタイトル(iOS 6)ホーム画面に追加すると、アドレスバーは非表示にできます。iOSSafariのみです(iOS7.0バージョンの後、エフェクトはサファリに表示されなくなりました) - > <Meta name = apple-mobile-web-app-capable content = yes/> <!バースマートアプリバナー(iOS 6+ safari) - > <meta name = apple-itunes-app content = app-id = myappstoreid、affiliate-data = myaffiliatedata = myurl> <! - set apple toolbar color:デフォルト値はデフォルト(白)と黒人(黒)とブラックトランスルセント - name = apple-mobile-web-app-status-bar-style content = black /> <! - baiduがトランスコードを許可しないでください - > <meta http-equiv = cache-control content = no-siteapp /> <! - 主にviewports 〜metportsなどのviewports for black-> Microsoftの古いブラウザー - > <Meta name = mobileoptimized Content = 320> <! - uc Force Vertical Screen-> <Meta name = screen-orientation content = Portaid> <! - qq force vertical screen-> <meta name = x5-orientation content = poratemen name = x5-fullscreen content = true> <! - ucアプリケーションモード - > <meta name = browsermode content = application> <! - qqアプリケーションモード - > <meta name = x5-page-mode content = app> <! - windows phone Click- iPhoneとiTouch、デフォルト57x57ピクセルには、> <link rel = apple-touch-icon-recomposedサイズ= 57x57 href = table_ico57.png> <! - 網膜iphoneと網膜iTouch、114x114ピクセル、can can beを持っている必要がありますが、= <リンク= <リンクrel = <リンクrel = <リンクはお勧めです。 href = table_ico72.png> <link rel = apple-touch-icon-precomposedサイズ= 114x114 href = table_ico114.png> <! - retina ipad、144x144ピクセルはありませんが、> <link rel = link-touch-touch-compodposposed size = 144x144 href = table_ico144.png> <! - ios起動画面開始 - > <! - iPad垂直画面768 x 1004(標準解像度) - > <link rel = link rel = apple-touch-startup-imageサイズ= 768x1004 href =/splash-screen-768x1004.png/> <!> <!> <! - > <link rel = apple-touch-startup-imageサイズ= 1024x748 href =/default-portrait-1024x748.png/> <! - ipad vertical screen 1536x2008(網膜) - > <link rel = apple-touch-startup-image sizes = 1536x2008888888888888888 href =/splash-screen-1536x2008.png/> <! - iPad Horizontal Screen 2048x1496(Retina) - > <link rel = link rel = apple-touch-startup-image sizes = 2048x1496 href =/splash-screen-2048x1496.png/>> < (標準解像度) - > <link rel = apple-touch-startup-image href =/splash-screen-320x480.png/> <! - iphone/ipod touch垂直画面640x960(網膜) - > <link rel = apple-touch-startup-image sizes = 640x960 href =/splash-screen-640x960.png/> <! - iPhone 5/iPodtouch 5垂直画面640x1136(網膜) - > <link rel = link rel = 640x1136 href =/splash-screen-640x1136.png/> - > <メタ名= msapplication-tilecolor content =#000/> <! - windows 8タイルアイコン - > <メタ名= msapplication-tileimage content = icon.png/> <! - rssサブスクリプションを追加 - > <リンクrel =代替タイプ=アプリケーション/rss+xmlタイトル= RSS HREF =/rss.ml - > Weibo API - > <Meta Property = OG:Type Content = Type/> <Meta Property = OG:URL Content = URL Address/> <Meta Property = OG:Title Content = OG = OG = OG:Image Content = OG = Picture = OG = OG:説明コンテンツ=説明/> <!IEブラウザの低いバージョンの問題にアクセスします
WebKitカーネルを強制するコードを追加します。国内ブラウザを使用してWebサイトにアクセスすることにIEの互換性の問題はありません。IE訪問者の数は大幅に削減されます。ただし、一部の古いコンピューターには、IEブラウザの低いバージョンからアクセスできることは依然として避けられません。この少数のユーザーに特にCSSハックを実行すると、ワークロードが大幅に増加します。
さらに、2016年1月以降、Microsoftは以下のIE11へのサポートと更新の提供を停止しました。それは長い間更新されていません。低バージョンIEは、CSS3およびHTML5サポートに問題があるだけでなく、セキュリティの問題もあります。
それで、私たちが低バージョン、つまりをサポートしない場合、これらの少数のユーザーは何をすべきでしょうか?
IF IEステートメントを使用して、IEアップグレードプロンプトをWebサイトに追加して、ユーザーにブラウザをアップグレードするように促したり、アクセスする前により高度なブラウザに切り替えたりすることができます。
コードを追加して、今すぐメタタグの下のIEアップグレードプロンプトページにジャンプすることができます(IEバージョンがIE11よりも低いときにジャンプ)。IEの低いバージョンのユーザーがアクセス時にブラウザのアップグレードまたは変更を求めるようにすることができます。
WebKitカーネルを強制し、以下に示すように、低バージョンIEアクセスユーザーの完全なコードをアップグレードするようユーザーに促します。このコードをヘッドテンプレートファイルに追加します<head>タグ:
<Meta name = renderer content = webkit/> <meta name = force rendering content = webkit/> <meta http-equiv = x-ua-compatible content = ie = edge、chrome = 1/> <scrip>/*@cc_on window.location.href = http://support.dmeng.net/upgrade-your-browser.html?referrer =+encodeuricomponent(window.location.href); @*/</script>
(@CC_ONは、IE10以上のバージョンに固有の条件付きコンピレーションステートメントであるため、IE11以外の他のIEバージョンを判断するために使用できます。)
低バージョンIEはしばしばCSS3およびHTML5 Webサイトとアクセスするときに互換性がないため、上記のコードが追加され、低バージョンIEユーザーがアクセスすると、不必要なリソースの読み込みを回避し、Webサイトサーバーのオーバーヘッドを削減するためにアップグレードプロンプトページにジャンプします。
テストコード<!doctype html> <html lang = en> <head> <meta charset = utf-8/> <meta name = viewport content = width = device-width、inviarty-scale = 1.0/> <title> </title> <meta name = renderer content = webkit/> <meta name = webkit/> <meta http-equiv = x-ua-compatible content = ie = edge、chrome = 1/> <script>/*@cc_on window.location.href = http://support.dmeng.net/upgrade-your-browser.html?referrer =+encodeuriconent(windocent.href); @*/</script> </head> <body> <h1> hello world </h1> </body> </html>
IE 11は正常に出力されます
つまり、次のページが表示されます
参照してくださいフロントエンドメタ使用の概要-MR_LIXP
ブラウザはメタコードを介してWebKitカーネル速度モードを使用させます(Meta name = renderer content = webkitが機能しないことを解く) - [ai huanhuan]
モバイルWebページのメタ設定 - Tianya Passerby
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。