HTML中meta标签都有什么作用？
一直以来，对HTML中的meta标签一知半解，这次抽时间好好总结一下
meta标签
定义： meta元素提供有关页面的元信息(meta-information), 比如针对 搜索引擎和更新频度的描述和关键词,搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等
1、所有的浏览器都支持meta标签
2、标签不用关闭
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
<meta name="author" content="xiaozi">
3、必需属性：content
| < meta charset="iso-8859-1" > |
| < meta http-equiv="charset" content="iso-8859-1"> |
| 属性 | 值 | 备注 |
|---|---|---|
| content | value | 定义一些与http-equiv或name属性相关的元信息 |
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
4、可选属性: http-equiv、name、scheme
| 属性 | 值 | 备注 |
|---|---|---|
| http-equiv | content-type、expires、refresh、set-cookie | 把 content 属性关联到 HTTP 头部。 |
| name | author、description、keywords、generator、revised、others、viewport、apple-mobile-web-app-title、format-detection、format-detection、apple-mobile-web-app-capable、apple-mobile-web-app-status-bar-style | 把 content 属性关联到一个名称。 |
| scheme | some_text | 不再支持。 |
| property | some_text | 定义用于翻译 content 属性值的格式。 |
http-equive 指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
<meta http-equiv="content-type" content="text/html;charset=gbk">
<meta http-equiv="expires" content="31 Dec 2008">
服务器发送给浏览器的头部就会包含：
content-type: text/html
charset: gbk
expires: 31 Dec 2008
refresh：重定向,在规定的时间之后跳转到另一页面
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Pics-label" content="(PICS－1.1'http://www.rsac.org/ratingsv01.html'I gen comment 'RSACi North America Sever' by '[email protected]'for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">
<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn" />
<meta http-equiv="content-language" content="zh-CN">
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
<meta http-equiv="windows-target" content="_top">
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" content="revealTrans(duration=20，transtion=6)">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
scheme 不再支持
app-mobile-web-app-capable 控制苹果工具栏和菜单栏, 需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
property=og: open graph protocol开放内容协议 让网页成为一个“富媒体对象”， 你同意了网页内容可以被其他社会化网站引用，
name 属性提供了名称/值对中的名称，HTML 和 XHTML 标签都没有指定任何预先定义的 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
- keywords： 搜索的时候匹配到页面
| < meta name="keywords" content="浏览器工作原理(22) - JavaScript是如何影响DOM树构建的？" > |
- description： 页面描述
| < meta name="description" content="上一篇文章我们讲了chrome性能面板的使用，了解了请求过程中的几个性能指标，这篇文章我们一起来看一下DOM树是如何生成的，" > |
- robots robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
| < meta name="robots" content="none" > |
- author 标注网页的作者
| < meta name="author" content="[email protected]" > |
- generator 说明网站的采用的什么软件制作
| < meta name="generator" content="信息参数" > |
- copyright 说明网站版权信息
| < meta name="copyright" content="信息参数" > |
- renderer 告诉浏览器用webkit内核解析
| < meta name="renderer" content="webkit" > |
- viewport 主要用于移动端，用来控制页面适配和响应各种不同分辨率的移动设备
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
| 1 概念：设备的屏幕上能用来显示网页的那一块区域，或者说是一个webview用来显示网页的那一部分，一般来说会把viewport的值设为大于屏幕，用来兼容为PC编写的网页 |
| 2 css中的1px并不等于设备的1px，桌面浏览器的css中1个像素往往对应着电脑屏幕的1个物理像素，在移动端就不一定了，window.devicePixelRatio属性意义：设备物理像素和设备独立像素的比例，css就是独立像素，devicePixelRatio代表设备上的一个css像素代表多少个物理像素，但是这个东西有兼容性，所以不能完全依赖。 另一个是用户缩放也会改变设备物理像素大小。为了让页面在不同的手机上显示同样的大小，可以将页面宽度固定，然后获取设备的宽度device-width，可以得到一个比例，再使用HTML5中viewport来对页面进行缩放，并固定不允许用户缩放 |
| 属性名 | 描述 |
|---|---|
| width | 设置layout viewport的宽度为设备宽度 |
| initial-scale | 设置页面的初始缩放值 |
| minimum-scale | 允许用户的最小缩放值 |
| maximum-scale | 允许用户的最大缩放值 |
| user-scalable | 是否允许用户进行缩放 |
<head>
<title>Test Pagetitle>
<script>
var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度
var deviceScale = deviceWidth / 640; //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px
var ua = navigator.userAgent;
//获取当前设备类型（安卓或苹果）
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('+ deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
} else {
document.write('');
}
} else {
document.write('');
}
script>
head>
| 3 三个viewport:layout viewport 值为 document.documentElement.clientWidth. visual viewport 值为 window.innerWidth |
| 3 三个viewport:还有一个理想viewport,能完美适配移动设备的viewport, ideal viewport所有的ideal viewport宽度都是320px，无论实际宽度是多少，在iPhone中，css中的320px就代表iPhone屏幕的宽度 |
| 4 利用meta标签来设置viewport，移动端默认的viewport是layout viewport, 但是我们想要ideal viewport, 怎么设置idea viewport呢，需要使用meta标签了，把viewport设置为设备宽度，就不会出现横向滚动条了 |