1.1 meta标签的定义
元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
1.2 meta分为必需属性和可选属性
必需属性
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明；
<meta name="keywords" content="HTML,ASP,PHP,SQL"> 相当于一个键值对：{keywords: HTML,ASP,PHP,SQL}
可选属性
http-equiv：http-equiv属性是添加http头部内容
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 后面的content属性是用前面http-equiv的内容
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> 还可以用来执行js重定向的功能
1.3 meta作用笔记
百度禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
seo优化部分
<!-- 页面关键词 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
<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)
IE浏览器
<meta http-equiv="X-UA-Compatible" content="IE=7"> #以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=8"> #以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=edge"> #以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> #以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.
谷歌浏览器
<!-- 优先使用最新的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手机浏览器
<!-- 将屏幕锁定在特定的方向 --> <meta name="screen-orientation" content="landscape/portrait"> <!-- 全屏显示页面 --> <meta name="full-screen" content="yes"> <!-- 强制图片显示，即使是"text mode" --> <meta name="imagemode" content="force"> <!-- 应用模式，默认将全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示。 --> <meta name="browsermode" content="application"> <!-- 禁止夜间模式显示 --> <meta name="nightmode" content="disable"> <!-- 使用适屏模式显示 --> <meta name="layoutmode" content="fitscreen"> <!-- 当页面有太多文字时禁止缩放 --> <meta name="wap-font-scale" content="no">
QQ手机浏览器
<!-- 锁定屏幕在特定方向 --> <meta name="x5-orientation" content="landscape/portrait"> <!-- 全屏显示 --> <meta name="x5-fullscreen" content="true"> <!-- 页面将以应用模式显示 --> <meta name="x5-page-mode" content="app">
IOS 移动端
<meta name="theme-color" content="#E64545"> <!-- 添加到主屏 --> <meta name="mobile-web-app-capable" content="yes"> <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
safari浏览器
<!-- 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">
安卓手机浏览器
<meta name="theme-color" content="#E64545"> <!-- 添加到主屏 --> <meta name="mobile-web-app-capable" content="yes"> <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
移动端常用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 -->