一、http-equiv
1.Content-Type（内容类型）
告诉浏览器当前访问的资源类型 并声明编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2.refresh（重定向）
重定向（以下示例5秒后会跳转到：http://baidu.com）
<meta http-equiv="refresh" content="5;url="http://baidu.com" />
3.Set-Cookie（cookie设定）
网页过期则cookie将会被删除(必须是GMT的时间格式)
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday,21-Oct-98 16:14:21 GMT;path=/">
4.Window-target（窗口设置）
强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面
<meta http-equiv="Window-target" content="_top">
5.expires(期限)
用于设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅(必须使用GMT的时间格式)
<meta http-equiv="expires" content="Wed, 26 Feb 2016 08:21:57GMT">
6.Pragma(cache模式)
禁止浏览器从本地机的缓存中调阅页面内容(访问者无法脱机浏览)
<meta http-equiv="Pragma" content="no-cache">
二、name
1.keywords
页面的关键字，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">
2.description
页面的描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开
<meta name="description" content="html meta标签大全,整理一下加强记忆">
3.robots(机器人向导)
robots用来告诉搜索机器人，哪些页面需要索引，哪些不需要。
用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。
<meta name="robots" content="none">
content：
all：默认值，文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
4.author(作者)
标注网页的作者
<meta name="author" content="johnson">
content：
自定义：自定义的作者名；
notranslate：让Google不提供一个翻译链接；
4.viewport(视口)
针对移动端视口进行宽高和缩放的设置
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
content：
width 宽度(数值/device-width)
height 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
<blockquote>
PS：部分老浏览器不支持 viewport，使用如下 meta 对其进行设备优化
</blockquote>
<meta name="HandheldFriendly" content="true">
5.format-detection（禁止默认）
禁止将文本提示为手机号、邮箱、地图链接，否则点击文本将触发默认事件
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
content：
telephone=no 禁止将文本提示为手机号码
email=no 禁止将文本提示为邮箱地址
adress=no 禁止将文本提示为地图链接
6.msapplication-tap-highlight（禁止链接高亮）
禁止链接高亮
<meta name="msapplication-tap-highlight" content="no">
content：
（yes | no）
7.apple-mobile-web-app-title（添加到主屏后的标题）
添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />
content：
自定义标题
8.工具栏设置
设置工具栏的颜色、透明度
<meta name="apple-mobile-web-app-capable" content="yes" /> // webapp全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> // 在 apple-mobile-web-app-capable 为 yes 的前提下进行设置
apple-mobile-web-app-status-bar-style
content：
default 默认值，网页内容从状态栏底部开始
black 状态栏背景是黑色，网页内容从状态栏底部开始
black-translucent 状态栏背景是黑色半透明，网页内容充满整个屏幕，顶部会被状态栏遮挡
9.UC浏览器设置
uc强制竖屏
<meta name="screen-orientation" content="portrait">
UC缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
UC强制全屏
<meta name="full-screen" content="yes">
UC强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。
<meta name="imagemode" content="force"/> // 对该页面全部图片设置
<img src="" show="force"> // 对单个图片的设置
UC应用模式：默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="browsermode" content="application"/>
10.QQ浏览器设置
QQ强制屏幕方向：portrait 竖屏，landscape 横屏
<meta name="x5-orientation" content="portrait|landscape" />
QQ强制全屏
<meta name="x5-fullscreen" content="true" />
QQ应用模式
<meta name="x5-page-mode" content="app" />
三、PC端常用
<!-- 使用 IE 标准模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 强制 IE 使用 Chrome Frame 渲染 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- 360 浏览器 -->
<meta name="renderer" content="webkit"> // 默认webkit内核
<meta name="renderer" content="ie-comp"> // 默认IE兼容模式
<meta name="renderer" content="ie-stand"> // 默认IE标准模式
四、移动端常用
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true" />
网友评论