网页页面下各种标签的含义

1、charset：

编码格式 告诉给浏览器用什么方式来都这页代码，，这里是用UTF-8编码的，utf-8是国际编码，实用性比较强推荐使用。

 <meta charset="UTF-8">

2、X-UA-Compatible：

这个标签是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

<meta http-equiv="X-UA-Compatible" content="IE=7"> #以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 
<meta http-equiv="X-UA-Compatible" content="IE=8"> #以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> #以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

注意事项：
(1).根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用
(2).content的内容是IE=8，或者IE=edge等值，注意不是IE8或者直接写个edge的值，否则不起作用

3、canonical ：

这个标签是 Google、雅虎、微软等搜索引擎一起推出的一个标签，它的主要作用是用来解决由于网址形式不同内容相同而造成的内容重复问题。这个标签对搜索引擎作用非常大，简单的说它可以让搜索引擎只抓取你想要强调的内容。

复制内容或复制网页是指相同或十分相近的内容却有多个不同的URL，如打印页、含sessionid的URL等。可在副本网页的头部（head）加一个link标签，指定首选URL，声明一个权威网页做为复制网页的规范版本，SE将把链接等信息都转移到这个首选版本上，当然搜索结果中也显示权威网页。

<link rel="canonical" />

* href可以是绝对地址或相对地址，就可以使用rel="canonical" 链接元素指定希望百度收录域的网址。
*link rel="canonical"属性可以被传递，即A页面声明B为权威链接，B声明C为权威网页，则SE会认为C是A和B共同的首选权威版本。
*此标签只是建议，不是命令，意思是如果设置的不合理，SE仍会按正常的方式确实首选的网页；如权威页指向404页，或指像的页面返回错误，SE仍会索引这个页的内容。

http://blog.hepeichao.com/250.htmlhttp://blog.hepeichao.com/250.html?comments=truehttp://blog.hepeichao.com/250.html?postcomment=true

像上面的状况，我们只需要在网址的 head 区域添加如下代码：

<link rel='canonical' href='http://blog.hepeichao.com/250.html' />

这样的话 Google 等搜索引擎最终都会只收录 canonical 标签指定的这个网址

4、dns-prefetch：

做DNS预获取提高前端性能，另外一点，就是减少DNS查询的次数加快网页访问速度。默认情况下浏览器会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取，那么就要使用显示的DNS　Prefetch了，也就是使用link标签：

 <link rel='dns-prefetch' href='//libs.baidu.com' />

注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数

5、keywords

作为一种描述性标签，出现在name属性中，使用content属性为网页定义一组多个关键字或关键词，在页面主体内容缺乏时，向搜索引擎说明该网页的简要内容。

 <meta name="keywords" content="关键词1, 关键词2, 关键词3">

6、viewport

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

7、description

 <meta name="description" content="">

（1）Description字数建议75个字，150个字符以内，这样搜索引擎刚好能够编入索引被用户查看到，超过该字数用户是看不到的也没有实际作用。
（2）页面要做的关键词要把放入Description中，并且要把标题里面没有包含的关键词写入进去。Description含有关键词对于该关键词排名是有利的。
（3）Description需要符合用户体验优化，另外，我们也要把我们写入Description的关键词进行位置排列，越重要的关键词越要靠前放置。Description就是我们的页面简介，只需要把页面的核心写出来就行了。