本稿の目的は、現在の主流集めることでmeta素早く開発とデバッグするために、開発者を容易にするため、コンフィギュレーションを。ここでは、さまざまなしないだろうmeta、詳細な分析、唯一の簡単な紹介を、誰もがこのようなものを知ってみましょう。
メタブリーフ
meta記述するために使用されるHTML文書のメタデータを。一般的に、ページ記述、キーワード、著者やその他のメタデータを指定するために使用されます。- メタデータは、ブラウザ（コンテンツやページの負荷を表示する方法）、検索エンジン（キーワード）、または他で使用できる
Webサービスコール。 metaある程度の影響seo。
どのプロパティメタサポート
| プロパティ | 値 | 説明 |
|---|---|---|
| 文字セット | キャラクターセット | ドキュメントの文字エンコーディングを定義します。 |
| コンテンツ | テキスト | メタ情報の名前またはhttp-equiv属性に関連する定義。 |
| HTTP-当量 | コンテンツ・タイプ のデフォルトスタイルの リフレッシュ |
関連するコンテンツは、HTTPヘッダにアトリビュート。 |
| 名前 | アプリケーション名 著者の 記述の 発電 キーワード |
名前に関連付けcontent属性。 |
| スキーム | フォーマット/ sの | HTML5がサポートされていません。コンテンツの属性値のフォーマット変換を定義します。 |
HTTP-当量
metaラベル上のhttp-equiv属性httpので、ヘッダ情報、及び応答ヘッダに関連するhtml実質的応答サーバによって得られます。http-equiv迷彩のためのHTTPレスポンスヘッダ。だから、http-equivそれの何種類？さんが一緒に見てみましょう。
| 値 | 説明 |
|---|---|
| キャッシュ制御 | 制御文書のキャッシュ機構。：次のように使用できる値はpublic：すべてのコンテンツがキャッシュされます（クライアントとサーバのプロキシできるキャッシュ）private：プライベートキャッシュキャッシュのみ内容（唯一のクライアントがキャッシュプロキシサーバーが使用できない、キャッシュすることができます）no-cache：キャッシュされていない、サーバーが提供しますこのようなコンテンツ検証ルールで期限切れや変更などのキャッシュ検証メカニズム、no-store：すべてのコンテンツがキャッシュまたはにキャッシュされませんInternet一時ファイルには、（設定は無効のように見える、またはそれを下に説明することができます最初の偉大な神への応答には表示されませんか？ ） |
| コンテンツの言語 | ボディランゲージ応答。等（一見無効提供）zh-CNen-US |
| コンテンツタイプ | コンテンツ返しMIME種類を |
| 日付 | サーバーから送信された元のメッセージの時刻、GMT時刻形式 |
| 有効期限が切れます | 応答の有効期限の日付と時刻GMT時刻形式<meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">（一見無効に設定） |
| 最終更新日 | 要求されたリソースの最終更新時刻GMT時刻形式（一見無効に設定） |
| ロケーション | 受信者が要請されていないリダイレクトするURLリクエストまたは新しいリソース識別子満たす位置（一見無効セット） |
| リフレッシュ | あなたはページを更新する頻度を定義した後。秒で。 |
| セットクッキー | 作成cookie含まcookie名前、cookie値、有効期限を。（一見無効に設定） |
| 窓、ターゲット | 枠組みの中で独自のページを呼び出すために他の人を防ぐために。<meta http-equiv="Window-target" content="_top">（一見無効に設定） |
| プラグマ | 向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。<meta http-equiv="Pragma" content="no-cache">（设置了貌似无效） |
注意：以上都是在chrome浏览器最新版本， vue dev环境下测试的，不代表所有浏览器和服务器表现。
常见meta
指定字符编码
<meta charset="UTF-8">IE杀手，推荐所有前端工程师采用，让我们干掉IE的市场份额。<!-- renderer适用于国产双内核浏览器 --> <!-- 使用Blink（Webkit） --> <meta name="renderer" content="webkit"> <!-- IE兼容模式，使用ie低版本兼容 --> <meta name="renderer" content="ie-comp"> <!-- IE标准模式，使用ie高版本兼容 --> <meta name="renderer" content="ie-stand"> <!-- force-rendering适用于其他双内核浏览器 --> <meta name="force-rendering" content="webkit"> <!-- 强化对IE的兼容性，强制IE使用最新版标准模式渲染或者使用Chrome Frame渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">viewport常见设置，一般适用于移动端。视口宽度设为理想宽度，禁止缩放。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>meta三剑客<meta name="description" content="Tusi博客,专注大前端技术架构与分享,关注用户体验"> <meta name="keyword" content="Tusi博客,web前端,nodejs全栈,响应式,用户体验"> <meta name="author" content="Tusi">UC浏览器私有meta<!-- 横屏/竖屏 --> <meta name="screen-orientation" content="landscape|portrait"> <!-- 全屏 --> <meta name="full-screen" content="yes"> <!-- 缩放不出滚动条 --> <meta name="viewport" content="uc-fitscreen=yes|no"> <!-- 排版，fitscreen简化页面，适合阅读省流量，standard模式和标准浏览器一致 --> <meta name="layoutmode" content="fitscreen|standard" <!-- 夜间模式的启用和禁用 --> <meta name="nightmode" content="enable|disable"/> <!-- 强制图片显示 --> <meta name="imagemode" content="force"/> <!-- 强制图片显示，只作用于单图 --> <img src="..." show="force"> <!-- 应用模式,默认全屏，禁止长按菜单，禁止手势，标准排版，以及强制图片显示。 --> <meta name="browsermode" content="application">QQ浏览器X5内核私有meta（现在微信内置浏览器的内核也是X5哦）<!-- 横屏/竖屏 --> <meta name="x5-orientation" content="landscape|portrait"> <!-- 全屏 --> <meta name="x5-fullscreen" content="true"> <!-- 应用模式 --> <meta name="x5-page-mode" content="app">苹果机适配
<!-- "添加到主屏幕“后，全屏显示 --> <meta name="apple-touch-fullscreen" content="yes"> <!-- 隐藏菜单栏和状态栏，类似于应用模式 --> <meta name="apple-mobile-web-app-capable" content="yes|no"> <!-- 设置状态栏颜色，貌似只有default白色，black黑色，black-translucent灰色半透明 --> <meta name=”apple-mobile-web-app-status-bar-style” content=black”> <!-- 取消电话号码识别，防止误触拨号 --> <meta name="format-detection" content="telephone=no">其他优化和适配手段
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- robots 用来告诉搜索机器人哪些页面需要被检索 --> <!-- index 搜索引擎抓取这个页面 --> <!-- noindex 搜索引擎不抓取这个页面 --> <!-- follow 抓取外链 --> <!-- nofollow 不抓取外链 --> <meta name="robots" content="index,follow"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="noindex,nofollow"> <!-- referrer 控制http请求头的referer，暂时没想到什么实际应用场景 --> <!-- no-referrer 不发referer --> <!-- origin 只发送origin部分 --> <!-- no-referrer-when-downgrade 默认值，当目的地是先验安全的(https->https)则发送origin作为 referrer，但是当目的地是较不安全的(https->http)时则不发送referrer -->。 <!-- origin-when-crossorigin 在同源请求下，发送完整的URL(不含查询参数)，其他情况下则仅发送当前文档的origin --> <!-- unsafe-URL 在同源请求下，发送完整的URL(不含查询参数) --> origin-when-crossorigin <meta name="referrer" content="no-referrer"> <!-- og: Open Graph Protocol，一种友好的配置，让自己的网站在社交网络分享中更得心应手，更多的配置可以去自行搜索 --> <!-- og:type 告诉SNS，我这是一个什么类型的网站 --> <meta property=”og:type” content=”article”/> <!-- og:title 告诉SNS，分享时告诉用户我这个网站的标题是什么，别自己瞎搞个标题 --> <meta property=”og:title” content=”Tusi博客”/> <meta property=”og:url” content=”https://blog.wbjiang.cn”/> <!-- og:image 缩略图 --> <meta property=”og:image” content=”/static/imgs/thumbnail.png”/> <meta property=”og:description” content=”专注于大前端技术架构与分享，关注用户体验”/>
扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！
