meta标签

meta元素
标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School
介绍一篇关于meta的文章：https://segmentfault.com/a/1190000002407912
下面写一下自己理解，作为学习使用。（基本为上篇文章抄写，为了给自己加深印象，希望大家支持原文章）

meta标签
这个标签很实用定义了一些页面宏观的一些东西，比如字符集，页面搜索索引，移动设备屏幕宽度，对页面数字邮箱等的是否识别，能否缩放页面等等。
四个属性：
content（必要）： 定义与http-equiv或name属性相关的元信息。（可以理解为对他们的配置，或详细参数等）
http-equiv:把content属性关联到HTTP头部
name:把 content 属性关联到一个名称
scheme:定义用于翻译 content 属性值的格式
eg:

<meta name="author" content="author name">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

这条主要是定义网页的作者
我自己较为通俗的理解:name定义要表达什么，而content则是对name的具体描述。

页面关键词/描述
用于搜索引擎检索用

<meta name="keywords" content="abc">
<meta name="description" content="abcabc">

搜索引擎索引方式

<meta name="robots" content="index,follow" />

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
页面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />

数字代表多久后刷新，如果加url则会重定向。

字符集

<meta charset='utf-8' />

移动设备
viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
这部分我将专门写一篇文章。viewport对移动前端的还是很重要的。

启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />

添加到主屏后的标题（应用名称）

<meta name="apple-mobile-web-app-title" content="标题">

忽略数字自动识别为电话号码/忽略识别邮箱

<meta content="telephone=no" name="format-detection" /> 
<meta content="email=no" name="format-detection" />

其他

<!-- 针对手持设备优化，主要是针对一些老的不识别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">

写的不是很全面附上参考文章，想要更细致研究的朋友可以看下
http://fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c