单标签
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
meta标签都有哪些属性？
必须的属性content,属性值是some_text,其意义是定义与http-equiv或name属性相关的元信息。
| 属性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-type，expires，refresh，set-cookie | 把 content 属性关联到 HTTP 头部。 |
| name | - author, description, keywords, generator,revised,others | 把content属性关联到一个名称。 |
| scheme | some_text | 定义用于翻译 content 属性值的格式。 |
http-equiv属性
该属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前现在要传送给服务器的 MIME文档头部包含名称/值对
当服务器向浏览器发送文档时，会先发送许多名称/值对. 虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备介绍一个HTML文档
使用带有http-equiv属性的<meta>标签时，浏览器将把名称/值对添加到发送给服务器的内容头部。
例如：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type: text/html
charset: iso-8859-1
expires: 31 Dec 2018
当然只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
name属性
该属性提供了名称/值对中的名称。HTML和XHTML标签都没有指定任何预先定义的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的meta标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供name属性，name名称/值对中的名称会采用http-equiv属性中的值。
content属性
该属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content属性始终要和name属性或http-equiv属性一起使用。
scheme属性
该属性用于指定要用来翻译属性值的方案。此方案应该在由
<head>标签的profile属性指定的概况文件中进行了定义。
// 告诉http头部，文档类型为text/html,字符集gb2312
<meta http-equiv="Content-type" content="text/html" charset="gb2312">
// 定义页面作者
<meta name="author" content="qdgithub.com">
// 修订信息
<meta name="revised" content="David Yang,8/1/07">
// 该文件是用什么生成的
<meta name="generator" content="Dreamweaver 8.0en">
// 定义web页面描述
<meta name="description" content="HTML examples">
// 定义文档关键词，用于搜索引擎
<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript,VBScript">
// 每30秒刷新页面
<meta http-equiv="refresh" content="30">
// 该文档已经变更，将用户重定向到新的地址
<meta http-equiv="Refresh" content="5;url=http://www.qdgithub.com">
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
meta属性在HTML4.01和HTML5之间的差异
1.HTML5不支持scheme属性
2.在HTML5中有一个新的charset属性，它使字符集的定义更加容易：
- HTML4.01：
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> - HTML5:
<meta charset="UTF-8">
3.还有一个viewport属性，用于移动端显示优化的。其有六个属性。
| 属性 | 值描述 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"device-width" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许 |
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
因为移动端设备的尺寸类型太多,所以我们如果直接将网页版放置在移动设备上,会导致所有的
内容被压缩,用户体验差。
viewport,是一个布局用的虚拟窗口,我们只需要适配移动端的网页上加上view,纯pc端不需要viewport.添加上viewport之后,网页上正常显示,不会被压缩。但是需要用户滑动超出设备区域区域外的内容，viewport是一个属性,需要写在meta标签内.
viewport里的几个重要属性
1.width:viewport(虚拟区域的宽度)
2.initial-scale:原始缩放比例,一般写成1
3.minimum-scale:允许缩放的最小比例(不能小于0.01)
4.maximum-scale:允许缩放的最大比例(不超过10,一般2~3倍)
5.user-scalable:是否允许用户进行缩放,yes或者1代表允许;
no或者0代表不允许
总结：meta标签常用来干什么？
- 字符集的编码格式，系统默认是拉丁文的编码格式。但是我们在使用的时候编码格式使用的是万国码UTF-8，如果只想显示中文，可以使用gb2312或者GBK
- 还可以设置当前文档的关键字，用于SEO优化。
- 还可以设置viewport，用于移动端的显示优化。
- 还可以设置当前文档的作者信息，不过一般公司不会让你这么干。