<meta> 标签供应关于 HTML 文档的元数据。它不会显示在页面上，但是对付机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 做事。
2、浸染
meta里的数据是供机器解读的，见告机器该如何解析这个页面，还有一个用场是可以添加做事器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：
浏览器的头部就会包括这些:
charset:iso-8859-1expires:31 Dec 2008只有浏览器可以接管这些附加的头部字段，并能以适当的办法利用它们时，这些字段才故意义。
3、meta的必需属性和可选属性
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行解释。例如：
必需属性
<meta name=\公众keywords\公众 content=\"大众HTML,ASP,PHP,SQL\公众>
这里面content里的属性便是对keywords进行的解释，以是呢也可以理解成一个键值对吧，便是{keywords:\"大众HTML,ASP,PHP,SQL\"大众}。
可选属性
在W3school中，对付meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，以是就只说下前两个属性吧。
http-equiv
http-equiv属性是添加http头部内容，对一些自定义的，或者须要额外添加的http头部内容，须要发送到浏览器中，我们就可以是利用这个属性。在上面的meta浸染中也有大略的解释，那么现在再举个例子。例如我们不想利用js来重定向，用http头部内容掌握，那么就可以这样掌握：
<meta http-equiv=\公众Refresh\公众 content=\"大众5;url=http://blog.yangchen123h.cn\"大众 />
在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子
name
第二个可选属性是name，这个属性是供浏览器进行解析，对付一些浏览器兼容性问题，name属性是最常用的，当然有个条件便是浏览器能够解析你写进去的name属性才可以，不然便是没故意义的。还是举个例子吧:
<meta name=\"大众renderer\"大众 content=\"大众webkit\"大众>
这个meta标签的意思便是见告浏览器，用webkit内核进行解析，当然条件是浏览器有webkit内核才可以，不然便是没故意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个便是在对应的浏览器的开拓文档里就会有表明的，例如这个renderer是在360浏览器里解释的。360浏览器内核掌握Meta标签解释文档
常用meta标签大总结
接下来便是常用的meta标签大总结啦，我会尽可能的做到全
charset
charset是声明文档利用的字符编码，办理乱码问题紧张用的便是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
charset有两种写法
<meta charset=\"大众utf-8\公众><meta http-equiv=\"大众Content-Type\公众 content=\"大众text/html; charset=utf-8\"大众>两个都是等效的。
百度禁止转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv=\"大众Cache-Control\"大众 content=\"大众no-siteapp\公众 />
SEO 优化部分
<!-- 页面标题<title>标签(head 头部必须) --><title>your title</title><!-- 页面关键词 keywords --><meta name=\"大众keywords\"大众 content=\公众your keywords\"大众><!-- 页面描述内容 description --><meta name=\公众description\"大众 content=\"大众your description\公众><!-- 定义网页作者 author --><meta name=\"大众author\公众 content=\"大众author,email address\"大众><!-- 定义网页搜索引擎索引办法，robotterms 是一组利用英文逗号「,」分割的值，常日有如下几种取值：none，noindex，nofollow，all，index和follow。 --><meta name=\公众robots\公众 content=\"大众index,follow\"大众>viewport
viewport紧张是影响移动端页面布局的，例如：
<meta name=\"大众viewport\公众 content=\"大众width=device-width, initial-scale=1.0\"大众>content 参数：
width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否许可用户缩放(yes/no)各浏览器平台
Microsoft Internet Explorer
<!-- 优先利用最新的ie版本 --><meta http-equiv=\"大众x-ua-compatible\公众 content=\"大众ie=edge\公众><!-- 是否开启cleartype显示效果 --><meta http-equiv=\公众cleartype\"大众 content=\"大众on\公众><meta name=\"大众skype_toolbar\"大众 content=\公众skype_toolbar_parser_compatible\"大众> <!-- Pinned Site --><!-- IE 10 / Windows 8 --><meta name=\"大众msapplication-TileImage\"大众 content=\公众pinned-tile-144.png\"大众><meta name=\公众msapplication-TileColor\公众 content=\"大众#009900\"大众><!-- IE 11 / Windows 9.1 --><meta name=\"大众msapplication-config\"大众 content=\"大众ieconfig.xml\"大众>Google Chrome
<!-- 优先利用最新的chrome版本 --><meta http-equiv=\"大众X-UA-Compatible\"大众 content=\公众chrome=1\"大众 /><!-- 禁止自动翻译 --><meta name=\"大众google\"大众 value=\"大众notranslate\"大众>360浏览器
<!-- 选择利用的浏览器解析内核 --><meta name=\"大众renderer\公众 content=\"大众webkit|ie-comp|ie-stand\"大众>UC手机浏览器
UCBrowser_U3_API
QQ手机浏览器
<!-- 锁定屏幕在特定方向 --><meta name=\"大众x5-orientation\"大众 content=\"大众landscape/portrait\公众><!-- 全屏显示 --><meta name=\公众x5-fullscreen\"大众 content=\公众true\"大众><!-- 页面将以运用模式显示 --><meta name=\"大众x5-page-mode\"大众 content=\"大众app\"大众>Apple iOS
<!-- Smart App Banner --><meta name=\"大众apple-itunes-app\"大众 content=\公众app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT\"大众> <!-- 禁止自动探测并格式化手机号码 --><meta name=\公众format-detection\公众 content=\"大众telephone=no\"大众> <!-- Add to Home Screen添加到主屏 --><!-- 是否启用 WebApp 全屏模式 --><meta name=\"大众apple-mobile-web-app-capable\"大众 content=\"大众yes\"大众><!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 --><meta name=\公众apple-mobile-web-app-status-bar-style\公众 content=\"大众black\"大众><!-- 添加到主屏后的标题 --><meta name=\"大众apple-mobile-web-app-title\"大众 content=\公众App Title\公众>Google Android
<meta name=\"大众theme-color\公众 content=\"大众#E64545\"大众><!-- 添加到主屏 --><meta name=\公众mobile-web-app-capable\"大众 content=\"大众yes\"大众><!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->App Links
<!-- iOS --><meta property=\公众al:ios:url\公众 content=\"大众applinks://docs\公众><meta property=\"大众al:ios:app_store_id\"大众 content=\公众12345\"大众><meta property=\"大众al:ios:app_name\"大众 content=\公众App Links\"大众><!-- Android --><meta property=\公众al:android:url\公众 content=\"大众applinks://docs\"大众><meta property=\"大众al:android:app_name\"大众 content=\"大众App Links\"大众><meta property=\"大众al:android:package\"大众 content=\公众org.applinks\"大众><!-- Web Fallback --><meta property=\"大众al:web:url\"大众 content=\"大众http://applinks.org/documentation\"大众><!-- More info: http://applinks.org/documentation/ -->末了——移动端常用的meta
<meta name=\"大众viewport\"大众 content=\"大众width=device-width, initial-scale=1, user-scalable=no\"大众 /><meta name=\公众apple-mobile-web-app-capable\公众 content=\"大众yes\公众 /><meta name=\"大众apple-mobile-web-app-status-bar-style\"大众 content=\"大众black\公众 /><meta name=\公众format-detection\"大众content=\"大众telephone=no, email=no\"大众 /><meta name=\"大众viewport\"大众 content=\"大众width=device-width, initial-scale=1, user-scalable=no\"大众 /><meta name=\"大众apple-mobile-web-app-capable\"大众 content=\公众yes\公众 /><!-- 删除苹果默认的工具栏和菜单栏 --><meta name=\"大众apple-mobile-web-app-status-bar-style\"大众 content=\"大众black\"大众 /><!-- 设置苹果工具栏颜色 --><meta name=\"大众format-detection\公众 content=\"大众telphone=no, email=no\"大众 /><!-- 忽略页面中的数字识别为电话，忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) --><meta name=\"大众renderer\公众 content=\公众webkit\"大众><!-- 避免IE利用兼容模式 --><meta http-equiv=\"大众X-UA-Compatible\"大众 content=\"大众IE=edge\"大众><!-- 针对手持设备优化，紧张是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name=\公众HandheldFriendly\公众 content=\"大众true\"大众><!-- 微软的老式浏览器 --><meta name=\"大众MobileOptimized\"大众 content=\"大众320\公众><!-- uc逼迫竖屏 --><meta name=\"大众screen-orientation\"大众 content=\"大众portrait\公众><!-- QQ逼迫竖屏 --><meta name=\公众x5-orientation\公众 content=\公众portrait\"大众><!-- UC逼迫全屏 --><meta name=\"大众full-screen\"大众 content=\"大众yes\公众><!-- QQ逼迫全屏 --><meta name=\"大众x5-fullscreen\公众 content=\"大众true\公众><!-- UC运用模式 --><meta name=\"大众browsermode\公众 content=\"大众application\公众><!-- QQ运用模式 --><meta name=\"大众x5-page-mode\"大众 content=\"大众app\公众><!-- windows phone 点击无高光 --><meta name=\"大众msapplication-tap-highlight\"大众 content=\"大众no\"大众><!-- 适应移动端end -->
