整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、定義
<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小時內與您取得聯系。
