整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、定义
<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
2、作用
meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：
浏览器的头部就会包括这些:
只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
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有两种写法
两个都是等效的。
百度禁止转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 优化部分
viewport
viewport主要是影响移动端页面布局的，例如：
content 参数：
各浏览器平台
Microsoft Internet Explorer
Google Chrome
360浏览器
UC手机浏览器
UCBrowser_U3_API
QQ手机浏览器
Apple iOS
Google Android
App Links
最后——移动端常用的meta
多网站前端设计师在设计网站的时候，都会碰到网站在快速浏览器下显示正常，在ie下可能就会出现错位的情况！所以我们在设计网站之前一定要先了解IE兼容性问题。
关于CSS对IE的兼容问题一直是DIV+CSS的一个大问题，因为不通浏览器识别代码产生的效果是不同的，所以造成了很多浏览器对相同的CSS，产生不同的效果，这样就产生了网站的错位，个人理解是这样的。
网站设计
先来了解下浏览器的内核：
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
各个浏览器内核不同，就可能造成不兼容的情况出现。
常见的兼容性问题：
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;
3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
4、图片默认有间距
解决方案：使用float 为img 布局
5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer
8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
关于浏览器兼容性的这种错位，因为浏览器的种类越来越多，从IE5，6，7，8，9，10这些都是比较常用的浏览器，但是正因为各种浏览器的出现，为了更好的兼容各个版本的浏览器，我们就需要学习如何来处理IE的兼容问题。从而网络上出现了很多所谓的HACK ，其实也就是针对各个浏览器的特点，来对各种浏览器的不同嗜好，产生的不同效果，实现的一种兼容各个版本浏览器的效果。
这个地方我们我们不是来讲各种可见的HACK效果，这些大家，可以在百度上来一下，就能找到我们所要的结果。
因为IE从6开始为了适应各个版本，就自身有了一个兼容性，所以我们可以指定给网页一个兼容特性；
比如 网页在IE7下无错位，但在IE6 和 IE8下有错位，那么我们就可以指定当用户使用IE6和IE8的时候直接指定给IE6 和 IE8采用IE7的兼容模式来实现网页的不错位。
但是这样一来，网页的兼容特性只是实现了，IE6，IE7，IE8的一个兼容，为了同时兼容FF，我们这个时候就需要使用HACK来达到兼容FF的效果。
这样我们使用IE自身的特性和HACK之间的特性就达到了网页的兼容效果，我认为这样实现兼容效果是最简单最方便的。这样我们其实就是对一种IE和FF之间的HACK在起作用，相对的写了很少的代码，也很实用和方便。
兼容性的问题越来越重要了，特别是IE8的出现让当时大半的网页都出现错位等现象，而解决的办法，我们来看一个网上的例子：
“css兼容IE8
微软在IE8提供三种解析页面的模式：
IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定
IE7 Standards Modes ：IE7现在用的解析网页的模式，开起机关是在<head>中加入 <meta http-equiv="X-UA-Compatible" content="IE=7">
Quirks Modes ：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
注意：不同模式间的网页在IE8中可以互相 frame ，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv="x-ua-compatible" content="ie=7" />”
加了以上这个代码，就可以比较完美的解决一般的兼容性问题了。
clipse运行页面显示中文乱码
页面源码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>客户列表-BootCRM</title>
</head>
<body>
<h1>解决中文乱码</h1>
</body>
</html>
tomcat运行后
打开浏览器地址栏打就会出现乱码现象
分析问题
首先排查一下服务器是否启动，回看console最下面 server startup 表示服务器已经启动了 没有问题也没有报错。
其次查看页面源码，发现有三处编码为ISO-8859-1。
注意：数字英文都正常显示，只是中文乱码，是因为ISO-8859-1是单字节编码，此字符集支持部分于欧洲使用的语言，这个编码不支持中文，所以要换支持的编码啦，现在一般都通用UTF-8，因为ISO-8859-1是一个8位的容器。因为只有8位, 没那么多地方可以表示中文，但是，由于是单字节编码,和计算机最基础的表示单位一致,所以很多时候,仍旧使用 ISO-8859-1编码来表示。而且在很多协议上,默认使用该编码。
解决办法
将代码中三处的ISO-8859-1 改成UTF-8就好了。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>客户列表-BootCRM</title>
</head>
<body>
<h1>解决中文乱码</h1>
</body>
</html>
此时运行结果就正常了
*请认真填写需求信息，我们会在24小时内与您取得联系。
