、定义

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2、作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：

1. 
   
2. <meta http-equiv="charset" content="iso-8859-1">
3. <meta http-equiv="expires" content="31 Dec 2008">

浏览器的头部就会包括这些:

1. 
   
2. charset:iso-8859-1
3. expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：

必需属性

<meta name="keywords" content="HTML,ASP,PHP,SQL">

这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

可选属性

在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子

name

第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:

<meta name="renderer" content="webkit">

这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦，我会尽可能的做到全

charset

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法

1. 
   
2. <meta charset="utf-8">
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分

1. 
   
2. <!-- 页面标题<title>标签(head 头部必须) -->
3. <title>your title</title>
4. <!-- 页面关键词 keywords -->
5. <meta name="keywords" content="your keywords">
6. <!-- 页面描述内容 description -->
7. <meta name="description" content="your description">
8. <!-- 定义网页作者 author -->
9. <meta name="author" content="author,email address">
10. <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
11. <meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的，例如：

1. 
   
2. <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)

各浏览器平台

Microsoft Internet Explorer

1. 
   
2. <!-- 优先使用最新的ie版本 -->
3. <meta http-equiv="x-ua-compatible" content="ie=edge">
4. <!-- 是否开启cleartype显示效果 -->
5. <meta http-equiv="cleartype" content="on">
6. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
9. <!-- Pinned Site -->
10. <!-- IE 10 / Windows 8 -->
11. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
12. <meta name="msapplication-TileColor" content="#009900">
13. <!-- IE 11 / Windows 9.1 -->
14. <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome

1. 
   
2. <!-- 优先使用最新的chrome版本 -->
3. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
4. <!-- 禁止自动翻译 -->
5. <meta name="google" value="notranslate">

360浏览器

1. 
   
2. <!-- 选择使用的浏览器解析内核 -->
3. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

UCBrowser_U3_API

QQ手机浏览器

1. 
   
2. <!-- 锁定屏幕在特定方向 -->
3. <meta name="x5-orientation" content="landscape/portrait">
4. <!-- 全屏显示 -->
5. <meta name="x5-fullscreen" content="true">
6. <!-- 页面将以应用模式显示 -->
7. <meta name="x5-page-mode" content="app">

Apple iOS

1. 
   
2. <!-- Smart App Banner -->
3. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
6. <!-- 禁止自动探测并格式化手机号码 -->
7. <meta name="format-detection" content="telephone=no">
10. <!-- Add to Home Screen添加到主屏 -->
11. <!-- 是否启用 WebApp 全屏模式 -->
12. <meta name="apple-mobile-web-app-capable" content="yes">
13. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
15. <!-- 添加到主屏后的标题 -->
16. <meta name="apple-mobile-web-app-title" content="App Title">

Google Android

1. 
   
2. <meta name="theme-color" content="#E64545">
3. <!-- 添加到主屏 -->
4. <meta name="mobile-web-app-capable" content="yes">
5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links

1. 
   
2. <!-- iOS -->
3. <meta property="al:ios:url" content="applinks://docs">
4. <meta property="al:ios:app_store_id" content="12345">
5. <meta property="al:ios:app_name" content="App Links">
6. <!-- Android -->
7. <meta property="al:android:url" content="applinks://docs">
8. <meta property="al:android:app_name" content="App Links">
9. <meta property="al:android:package" content="org.applinks">
10. <!-- Web Fallback -->
11. <meta property="al:web:url" content="http://applinks.org/documentation">
12. <!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta

1. 
   
2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
3. <meta name="apple-mobile-web-app-capable" content="yes" />
4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
5. <meta name="format-detection"content="telephone=no, email=no" />
6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
7. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
9. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
10. <!-- 启用360浏览器的极速模式(webkit) -->
11. <meta name="renderer" content="webkit">
12. <!-- 避免IE使用兼容模式 -->
13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
14. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
15. <meta name="HandheldFriendly" content="true">
16. <!-- 微软的老式浏览器 -->
17. <meta name="MobileOptimized" content="320">
18. <!-- uc强制竖屏 -->
19. <meta name="screen-orientation" content="portrait">
20. <!-- QQ强制竖屏 -->
21. <meta name="x5-orientation" content="portrait">
22. <!-- UC强制全屏 -->
23. <meta name="full-screen" content="yes">
24. <!-- QQ强制全屏 -->
25. <meta name="x5-fullscreen" content="true">
26. <!-- UC应用模式 -->
27. <meta name="browsermode" content="application">
28. <!-- QQ应用模式 -->
29. <meta name="x5-page-mode" content="app">
30. <!-- windows phone 点击无高光 -->
31. <meta name="msapplication-tap-highlight" content="no">
32. <!-- 适应移动端end -->

览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

（1）Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。二次开发

（5） Presto(Opera)

Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

手机浏览器

Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的