meta——html中磨人的小妖精

引子

写作也好，创作也好，都是需要灵感，或是说那一瞬间情感的爆发，就像子弹击穿靶心，也好像在大脑开了一个洞。<meta>，突然就像写点关于你的事情，对html经久期年的浸淫，时常温柔的抚摸你，知道你的灵活多变，知道你的贪玩淘气，我们曾经无比亲密，以后也会永不分离。

前言

<meta>标签是html语言中head区的一个辅助标签，大多数的初学者可能都会知道要对她进行如下的修饰，也以为这是个可有可无的标签，却很少去探寻她深处的秘密花园。如何运用的恰当，运用的自如，让她展现出美丽诱人的身姿，兹以本文记录她的功能和使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

<meta>

基于对w3c深度理解，<meta> 拥有搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等多种功能。深思之后，才发现

我的天呐，这么多功能，原来我还是不够懂你。

其实<meta>很简单：
<meta>拥有俩个属性，name属性，http-equiv属性

A.name属性

标准格式：

<meta name=”参数”content=”具体的参数值”>

主要参数如下：

1. keyword 关键字

使用方法： keyword 告诉搜索引擎网页关键字是什么。

实例：

<meta name=”keywords”content=”meta总结,html meta,meta属性,meta跳转”>

2. description 摘要

使用方法： description 很明显，字面意思就是该页面的主要内容。

实例：

<meta name=”description”content=”jiameng15博客,html的meta总结，meta是html语言head区的一个辅助性标签。”>

3. robots 机器人向导

使用方法：可以告诉搜索机器人页面需要，哪些页面不需要，乍一看就是出镜率很低的属性。

实例：

<meta name=”robots”content=”none”>

参数：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

4. author 作者

使用方法： 简单明了，表明作者等信息

实例：

<meta name=”author”content=”jiameng15,[email protected]”>

5. revisit 编辑日期

使用方法：直接写日期就好了。

实例：

<meta name=”revised” content=”12/5/2016”>

6. revisit-after 搜索引擎重访

使用方法：可以控制搜索引擎住区网站的频率，下面的实例设置7 days为7天重访,当然也可以写1 month。

实例：

<meta name=”revisit-after”content=”7 days”>

7. generator 编辑软件

使用方法：简单的使用方法，用什么敲代码就写什么，又是可有可无的感觉呢。

实例：

<meta name=”generator”content=”webstorm”/>

B.http-equiv属性

标准格式：

<meta http-equiv=”参数”content=”参数变量值”>

主要参数如下：

1. expires 过期时间

使用方法：用于设定网页过期时间，一旦过期，则需要重新从服务器获取。

实例：

<meta http-equiv=”expires”content=”Mon,5Dec208818:18:18GMT”>

2. pargma cache模式

使用方法：禁止浏览器从本地缓存访问页面内容。

实例：

<meta http-equiv=”Pragma”content=”no-cache”>

3. refresh 刷新

使用方法：自动刷新并指向新,content中需要跳转时间和路径，用；隔开。

实例：

<meta http-equiv=”refresh”content=”2;url=http://blog.csdn.net/jiameng15/article/details/53449181“>

4. set-cookie 设置cookie

使用方法：遵循cookie删除规则，可设置过期时间，必须使用GMT表示。

实例：

<meta http-equiv=”Set-Cookie”content=”cookievalue=xxx;expires=”“;path=/”>

5.window.target 独立窗口显示

使用方法：强制页面在当前窗口以独立页面显示,可以防止他人在框架中调用该页面。

实例：

<meta http-equiv=”window-target”content=”_top”>

6.content-type 独立窗口显示

使用方法：强制页面在当前窗口以独立页面显示,可以防止他人在框架中调用该页面。

实例：

<meta http-equiv=”content-Type”content=”text/html;charset=utf-8”>

参数：

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

2017.1.16更新
这是一个，文档兼容模式的定义。
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用以下代码强制 IE 使用 Chrome Frame 渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

提示 IE 用户安装 Google Frame
Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>

最佳的兼容模式方案，结合考虑以上两种：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2017.1.17更新
频繁使用的viewport属性，放在这里，方便使用，省的总是从别人的页面现找

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

稍后解释content中的值

暂时先写到这里，未完。。。