、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
2、作用
meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:
- <meta http-equiv="charset" content="iso-8859-1">
- <meta http-equiv="expires" content="31 Dec 2008">
瀏覽器的頭部就會包括這些:
- charset:iso-8859-1
- 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有兩種寫法
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
- <!-- 頁面標題<title>標簽(head 頭部必須) -->
- <title>your title</title>
- <!-- 頁面關鍵詞 keywords -->
- <meta name="keywords" content="your keywords">
- <!-- 頁面描述內容 description -->
- <meta name="description" content="your description">
- <!-- 定義網頁作者 author -->
- <meta name="author" content="author,email address">
- <!-- 定義網頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。 -->
- <meta name="robots" content="index,follow">
viewport
viewport主要是影響移動端頁面布局的,例如:
- <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
- <!-- 優先使用最新的ie版本 -->
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <!-- 是否開啟cleartype顯示效果 -->
- <meta http-equiv="cleartype" content="on">
- <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
-
-
- <!-- Pinned Site -->
- <!-- IE 10 / Windows 8 -->
- <meta name="msapplication-TileImage" content="pinned-tile-144.png">
- <meta name="msapplication-TileColor" content="#009900">
- <!-- IE 11 / Windows 9.1 -->
- <meta name="msapplication-config" content="ieconfig.xml">
Google Chrome
- <!-- 優先使用最新的chrome版本 -->
- <meta http-equiv="X-UA-Compatible" content="chrome=1" />
- <!-- 禁止自動翻譯 -->
- <meta name="google" value="notranslate">
360瀏覽器
- <!-- 選擇使用的瀏覽器解析內核 -->
- <meta name="renderer" content="webkit|ie-comp|ie-stand">
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
- <!-- 鎖定屏幕在特定方向 -->
- <meta name="x5-orientation" content="landscape/portrait">
- <!-- 全屏顯示 -->
- <meta name="x5-fullscreen" content="true">
- <!-- 頁面將以應用模式顯示 -->
- <meta name="x5-page-mode" content="app">
Apple iOS
- <!-- Smart App Banner -->
- <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
-
-
- <!-- 禁止自動探測并格式化手機號碼 -->
- <meta name="format-detection" content="telephone=no">
-
-
- <!-- Add to Home Screen添加到主屏 -->
- <!-- 是否啟用 WebApp 全屏模式 -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!-- 添加到主屏后的標題 -->
- <meta name="apple-mobile-web-app-title" content="App Title">
Google Android
- <meta name="theme-color" content="#E64545">
- <!-- 添加到主屏 -->
- <meta name="mobile-web-app-capable" content="yes">
- <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
App Links
- <!-- iOS -->
- <meta property="al:ios:url" content="applinks://docs">
- <meta property="al:ios:app_store_id" content="12345">
- <meta property="al:ios:app_name" content="App Links">
- <!-- Android -->
- <meta property="al:android:url" content="applinks://docs">
- <meta property="al:android:app_name" content="App Links">
- <meta property="al:android:package" content="org.applinks">
- <!-- Web Fallback -->
- <meta property="al:web:url" content="http://applinks.org/documentation">
- <!-- More info: http://applinks.org/documentation/ -->
最后——移動端常用的meta
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="format-detection"content="telephone=no, email=no" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
- <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話,忽略email識別 -->
- <!-- 啟用360瀏覽器的極速模式(webkit) -->
- <meta name="renderer" content="webkit">
- <!-- 避免IE使用兼容模式 -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
- <meta name="HandheldFriendly" content="true">
- <!-- 微軟的老式瀏覽器 -->
- <meta name="MobileOptimized" content="320">
- <!-- uc強制豎屏 -->
- <meta name="screen-orientation" content="portrait">
- <!-- QQ強制豎屏 -->
- <meta name="x5-orientation" content="portrait">
- <!-- UC強制全屏 -->
- <meta name="full-screen" content="yes">
- <!-- QQ強制全屏 -->
- <meta name="x5-fullscreen" content="true">
- <!-- UC應用模式 -->
- <meta name="browsermode" content="application">
- <!-- QQ應用模式 -->
- <meta name="x5-page-mode" content="app">
- <!-- windows phone 點擊無高光 -->
- <meta name="msapplication-tap-highlight" content="no">
- <!-- 適應移動端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的
>從內心講,我們也很希望能夠自主研發,但事實是,全球化的今天工程上并不要求產品必須是凈室開發的流程,今天有能力實現關鍵核心技術自主可控的公司,如華為對4G\5G,360對瀏覽器,都是因為有了巨大的市場份額,基于市場分額折換回來的話語權和主動權。我們希望能夠利用這種話語權和主動權,更好地服務用戶,服務國產操作系統。