、定義

<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 -->

題來源：

在微信公眾號開發指定回復消息為文本格式的時候，嘗試了幾種換行方式都不行，最終了解即 XML 的換行應使用：

是字符實體編號（16進制），可以用于處理XML中文本的換行。

對應的正確代碼在第9行（部分文字有修改）：

<xml>
 <ToUserName><![CDATA[<%= toUserName %>]]></ToUserName>
 <FromUserName><![CDATA[<%= fromUserName %>]]></FromUserName>
 <CreateTime><% createTime %></CreateTime>
 <MsgType><![CDATA[<%= msgType %>]]></MsgType>
 <% if (msgType === 'text') { if(content!=="zs") { %>
 <Content><![CDATA[<%= content %>]]></Content>
 <% } else { %>
 <Content>歡迎來到報名圖書館暑假工！
報名步驟：
①將招聘推文轉發至朋友圈或者40人以上的群，讓更多同學了解本招聘。為招聘方宣傳以找到更多優質學生員工。
→<a >點此進入招聘推文</a>
②回復你的資料：報名+姓名+電話號碼+深圳哪個區+可上班時間
</Content>
 <% }} else if (msgType === 'zs') { %>
 <Content><a >ddwadwada</a></Content>
 <% } else if (msgType === 'image') { %>
 <Image>
 <MediaId><![CDATA[<%= content.mediaId %>]]></MediaId>
 </Image>
 ...
</xml>

由這個問題，我們想到web開發中還有一些類似的“亂碼”，這些亂碼又有哪些規律呢？

字符實體

字符實體是XML和HTML中的字符編碼方式，也就是上面事例中提到的，格式為：

& + 實體名稱 + ;
& + (# + unicode編碼) + ;

實體名稱一般是有意義的詞，方便大家記憶，比如小于號<的實體名稱是lt，也就是less than的縮寫。只有部分符號是有實體名稱的，使用unicode編碼是更通用的寫法。

像文字類一般不會采用這種編碼方式，主要用于在HTML或XML文檔中輸出一些保留字符和空格，比如我想在HTML中展示一段html代碼就需要使用字符實體

比如我們要展示`<p>情深深雨蒙蒙</p>` 以下兩種表示是等效的
?
<pre>
 <p>情深深雨蒙蒙</p>
 <p>情深深雨蒙蒙</p>
</pre>

總而言之，字符實體是HTML和XML中的編碼方式，比如在HTML文檔中寫入：我，那么最終頁面上看到的是我這個漢字。

unicode字符

編程語言中的unicode字符的格式為：

\u + 16進制unicode編碼

絕大多數編程語言，包括CSS中都支持unicode字符，不過HTML和XML是不支持的。那么什么時候使用unicode字符呢？一般來說有兩種場景：

1. 避免文件保存時采用不同編碼導致的亂碼，因為\u已經聲明了是unicode。
2. 正則匹配中的一些應用：Unicode編碼及在正則表達式中的使用

在JS中可以使用charCodeAt()獲取字符串的10進制unicode編碼

URL編碼

類似%E6%88%91這樣的，叫做URL編碼，在鏈接的參數里非常常見

網絡標準RFC 1738做了硬性規定：

“只有字母和數字[0-9a-zA-Z]、一些特殊符號”$-_.+!*'(),”[不包括雙引號]、以及某些保留字，才可以不經過編碼直接用于URL。”

所以像漢字，空格這些都必須經過轉碼。上面講的unicode字符，字符實體用的都是unicode編號，而URL編碼用的則是utf-8, 規則是將utf-8編碼每隔兩個字符加一個%

UTF 是英文 Unicode Transformation Format 的縮寫，意為把 Unicode 字符轉換為某種格式。unicode和utf-8并不是同一種東西，但是又存在著聯系：unicode是信源編碼，對字符集數字化; utf-8，utf-16這些是信道編碼，為更好的存儲和傳輸。

簡單說，unicode就是一組數字，每一個數字對應一個字符。utf-8就是對字符的傳輸和保存時的規則。比如說“我”這個字，unicode碼（16進制）是6211，utf-8是E68891, 那么對應的URL編碼就是%E6%88%91;

{
 Unicode編碼: 0x6211,
 UTF8編碼: E68891,
 UTF16編碼: FEFF6211,
 UTF32編碼: 0000FEFF00006211
 URL編碼: %E6%88%91
}

更多細節可以參考《阮一峰：關于URL編碼》

總結

Web開發中常見的幾種亂碼包括：Unicode字符、字符實體、URL編碼。如以下情況都表示“我”：

Unicode字符： \u6211
字符實體編號（16進制）：我
字符實體編號（10進制）：我
URL編碼：%E6%88%91

這些編碼規則的本質都是一些特殊符號 + Unicode編碼 所組成。

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注 ｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信 我 回復“教程”

原文鏈接：http://eux.baidu.com/blog/fe/web%E5%BC%80%E5%8F%91%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%B1%E7%A0%81

作者： 鄭佳潤

文將介紹一種Java Web/Api 開發常見的亂碼問題。

前提摘要：在學習Java Web的過程中，亂碼問題是經常遇到的，無論是頁面亂碼還是數據庫亂碼。本文將羅列筆者在開發過程中常常遇到幾種亂碼場景。

一、JSP頁面亂碼

因為網頁默認的編碼格式為ISO-8859-1，該編碼格式不支持漢字，所以在網頁上顯示為亂碼???.

解決方案

在文件頂部添加header上添加

<pre>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

</pre>

二、ajax請求時 request.getParams亂碼

在你的tomcat server.xml中配置

 <Connector port="8080" protocol="HTTP/1.1"

</pre>

即添加

如果你想學習java可以來這個群，五三二，二五九，九五二，里面有大量的學習資料可以下載。 URIEconding="UTF-8" useBodyEncodingForURI="true"

三、ajax請求時 response出去為亂碼

在使用Spring MVC時 須在web.xml 配置

<filter>

mvc注釋 RequestMapping 聲明 增加utf-8聲明如

@RequestMapping(method = RequestMethod.POST, produces = "application/json; charset=utf-8")

如果是普通的servlet時，則須代碼編碼之后輸出

response.setContentType("text/html;charset=UTF-8");

三、文件亂碼

經常在拿到別人的工程文件時，由于他不同的編碼例如GBK之類的編碼，需要在IDE中將文件編碼統一成UTF-8 即可.

window平臺下，可以實用notepad++進行編轉化替換即可。

四、終端亂碼

如果是 System.out.println 打印顯示亂碼 則 VM options 里 添加 -Dfile.encoding=UTF-8 參數

五、數據庫亂碼

• jdbc鏈接utf-8聲明

jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf-8

• 新建數據庫時，選擇utf-8/utf-8mb4編碼

六、emoji亂碼支持

• 新建數據庫選擇utf-8mb4

• 數據庫的字符集配置 參考mysql/Java服務端對emoji的支持

• mysql-connector-java 版本升級至 5.1.22,此版本筆者親測 Ok！

如果你想學習java可以來這個群 532259952