、定義

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

覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

渲染引擎它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。

JS 引擎則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

（1）Trident(IE內核)

國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。

Window10 發布后，IE 將其內置瀏覽器命名為 Edge，Edge 最顯著的特點就是新內核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 內核)： Mozilla FireFox(火狐瀏覽器) 采用該內核，Gecko 的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。 可惜這幾年已經沒落了， 比如 打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

（3） webkit(Safari)

Safari 是蘋果公司開發的瀏覽器，所用瀏覽器內核的名稱是大名鼎鼎的 WebKit。

現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。

代表瀏覽器：傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，

（4） Chromium/Blink(chrome)

在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。

大部分國產瀏覽器最新版都采用Blink內核。二次開發

（5） Presto(Opera)

Presto（已經廢棄） 是挪威產瀏覽器 opera 的 "前任" 內核，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

手機瀏覽器

Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。

iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的