整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          最全Html標簽Meta介紹,全面總結,學HTML這

          最全Html標簽Meta介紹,全面總結,學HTML這一篇夠了

          天查Html手冊時,又有了新的發(fā)現(xiàn)。也就這機會,好好總結下HTML中Meta的使用。

            HTML <meta> 標簽,所有瀏覽器都支持 <meta> 標簽。它提供關于HTML文檔的元數據。元數據不會顯示在頁面上,但是對于機器是可讀的。它可用于瀏覽器(如何顯示內容或重新加載頁面),對搜索引擎和更新頻度的描述和關鍵詞,或其他 web 服務。

            <meta> 標簽位于文檔的頭部,不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯(lián)的名稱/值對。

            在 HTML 中,<meta> 標簽沒有結束標簽,在 XHTML 中,<meta> 標簽必須被正確地關閉。

          必要屬性

          屬性值描述contentsome text定義與http-equiv或name屬性相關的元信息

          可選屬性

          屬性值描述http-equivcontent-type / expire / refresh / set-cookie把content屬性關聯(lián)到HTTP頭部。nameauthor / description / keywords / generator / revised / others把 content 屬性關聯(lián)到一個名稱。contentsome text定義用于翻譯 content 屬性值的格式。

          • SEO優(yōu)化

              關鍵詞:類似這樣的 meta 標簽可能對于進入搜索引擎的索引有幫助.使用人們可能會搜索,并準確描述網頁上所提供信息的描述性和代表性關鍵字及短語。標記內容太短,則搜索引擎可能不會認為這些內容相關,標記不應超過 874 個字符。

              <meta name="keywords" content="HTML,ASP,PHP,SQL">

              頁面描述,每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽

            <meta name="description" content="your description">

              搜索引擎索引方式,robotterms是一組使用逗號(,)分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。確保正確使用nofollow和noindex屬性值。

            

          <meta name="robots" content="index,follow" />
          <!--
          all:文件將被檢索,且頁面上的鏈接可以被查詢;
          none:文件將不被檢索,且頁面上的鏈接不可以被查詢;
          index:文件將被檢索;
          follow:頁面上的鏈接可以被查詢;
          noindex:文件將不被檢索;
          nofollow:頁面上的鏈接不可以被查詢。
          -->

            頁面重定向和刷新:content內的數字代表時間(秒),既多少時間后刷新。如果加url,則會重定向到指定網頁(搜索引擎能夠自動檢測,也很容易被引擎視作誤導而受到懲罰)。

            <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--5秒鐘后跳轉到http://www.w3school.com.cn-->

            <meta http-equiv="Refresh" content="5;" /><!--每5秒鐘刷新一下頁面-->

          • 移動設備

             viewport:能優(yōu)化移動瀏覽器的顯示。如果不是響應式網站,不要使用initial-scale或者禁用縮放。大部分4.7-5寸設備的viewport寬設為360px;5.5寸設備設為400px;iphone6設為375px;ipone6 plus設為414px。很多人使用initial-scale=1到非響應式網站上,這會讓網站以100%寬度渲染,用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1,則用戶將不能放大/縮小網頁來看到全部的內容。

                content 參數:

                  width viewport 寬度(數值/device-width)
                  height viewport 高度(數值/device-height)
                  initial-scale 初始縮放比例
                  maximum-scale 最大縮放比例
                  minimum-scale 最小縮放比例
                  user-scalable 是否允許用戶縮放(yes/no)

            

          <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
          <!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 -->

            

            各瀏覽器平臺


            Microsoft Internet Explorer

          <!-- 優(yōu)先使用最新的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">

          <!-- 關于X-UA-Compatible -->
          <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
          <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
          <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

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

          <!-- 優(yōu)先使用最新的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手機瀏覽器

            <!-- 將屏幕鎖定在特定的方向 -->
          <meta name="screen-orientation" content="landscape/portrait">
          <!-- 全屏顯示頁面 -->
          <meta name="full-screen" content="yes">
          <!-- 強制圖片顯示,即使是"text mode" -->
          <meta name="imagemode" content="force">
          <!-- 應用模式,默認將全屏,禁止長按菜單,禁止手勢,標準排版,強制圖片顯示。 -->
          <meta name="browsermode" content="application">
          <!-- 禁止夜間模式顯示 -->
          <meta name="nightmode" content="disable">
          <!-- 使用適屏模式顯示 -->
          <meta name="layoutmode" content="fitscreen">
          <!-- 當頁面有太多文字時禁止縮放 -->
          <meta name="wap-font-scale" content="no">

            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">
          <!-- 設置狀態(tài)欄的背景顏色,只有在 “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">
          <!-- 針對手持設備優(yōu)化,主要是針對一些老的不識別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 -->

          • 網頁相關

            網頁編碼:以下兩種charset定義方式均可


          <meta charset="utf-8">
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            禁止緩存:禁止瀏覽器從本地機的緩存中調閱頁面內容,網頁不保存在緩存中,每次訪問都刷新頁面。這樣設定,訪問者將無法脫機瀏覽

          <meta http-equiv="Pragma" content="no-cache">

            網頁過期:指定網頁在緩存中的過期時間,一旦網頁過期,必須到服務器上重新調閱。注意:必須使用GMT的時間格式,或直接設為0(數字表示多少時間后過期)

          <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

            Cookie設置:注意:必須使用GMT的時間格式

          <Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

            顯示窗口的設定:強制頁面在當前窗口以獨立頁面顯示,這個屬性是用來防止別人在框架里調用你的頁面。Content選項:_blank、_top、_self、_parent.

          <Meta http-equiv="Widow-target" Content="_top">

            進入與退出:這個是頁面被載入和調出時的一些特效。這個有好多特效,可以查詢Page-Exit去了解更多。

            <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

          • 安全相關

            內容安全策略CSP(Content-Security-Policy),可以參考https://blog.csdn.net/u014465934/article/details/84199171

          <meta http-equiv="Content-Security-Policy" content="script-src 'self'">



          喜歡小編的可以點個贊關注小編哦,小編每天都會給大家分享文章。

          我自己是一名從事了多年的前端老程序員,小編為大家準備了新出的前端編程學習資料,免費分享給大家!

          如果你也想學習前端,可以觀看【置頂】文章。也可以私信【1】拿

          來看下常用的標簽列表,后文會一一介紹:

          <!DOCTYPE html> <!-- 使用 HTML5 doctype,不區(qū)分大小寫 -->

          <html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

          <head>

          <meta charset='utf-8'> <!-- 聲明文檔使用的字符編碼 -->

          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->

          <meta name="description" content="不超過150個字符" /> <!-- 頁面描述 -->

          <meta name="keywords" content=""/> <!-- 頁面關鍵詞 -->

          <meta name="author" content="name, email@gmail.com" /> <!-- 網頁作者 -->

          <meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->

          <!-- 為移動設備添加 viewport -->

          <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->

          <!-- iOS 設備 begin -->

          <meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏后的標題(iOS 6 新增) -->

          <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebApp 全屏模式 -->

          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 設置狀態(tài)欄的背景顏色,只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->

          <meta name="format-detection" content="telephone=no" /> <!-- 禁止數字識自動別為電話號碼 -->

          <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->

          <!-- iOS 圖標 begin -->

          <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默認 57x57 像素,必須有 -->

          <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->

          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->

          <!-- iOS 圖標 end -->

          <!-- iOS 啟動畫面 begin -->

          <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 豎屏 768 x 1004(標準分辨率) -->

          <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 豎屏 1536x2008(Retina) -->

          <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 橫屏 1024x748(標準分辨率) -->

          <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 橫屏 2048x1496(Retina) -->

          <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->

          <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->

          <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->

          <!-- iOS 啟動畫面 end -->

          <!-- iOS 設備 end -->

          <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->

          <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->

          <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->

          <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

          <title>標題</title>

          </head>

          基本標簽

          使用 HTML5 doctype,不區(qū)分大小寫。

          <!DOCTYPE html> <!-- 使用 HTML5 doctype,不區(qū)分大小寫 -->

          聲明文檔使用的字符編碼

          <meta charset='utf-8'> <!-- 聲明文檔使用的字符編碼 -->

          更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

          • 簡體中文
          • <html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
          • 繁體中文
          • <html lang="zh-cmn-Hant"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

          很少情況才需要加地區(qū)代碼,通常是為了強調不同地區(qū)漢語使用差異,例如:

          <p lang="zh-cmn-Hans">

          <strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同,且新加坡、馬來西亞一帶的稱謂也是不同的,稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。

          </p>

          優(yōu)先使用 IE 最新版本和 Chrome

          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->


          SEO 優(yōu)化

          頁面描述

          每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。文檔

          <meta name="description" content="不超過150個字符" /> <!-- 頁面描述 -->

          頁面關鍵詞

          <meta name="keywords" content=""/> <!-- 頁面關鍵詞 -->

          定義頁面標題

          <title>標題</title>

          定義網頁作者

          <meta name="author" content="name, email@gmail.com" /> <!-- 網頁作者 -->

          定義網頁搜索引擎索引方式,robotterms是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。文檔

          <meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->


          可選標簽

          為移動設備添加 viewport

          <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->

          content 參數:

          • width viewport 寬度(數值/device-width)
          • height viewport 高度(數值/device-height)
          • initial-scale 初始縮放比例
          • maximum-scale 最大縮放比例
          • minimum-scale 最小縮放比例
          • user-scalable 是否允許用戶縮放(yes/no)
          • minimal-ui iOS 7.1 beta 2 中新增屬性(注意:iOS8 中已經刪除),可以在頁面加載時最小化上下狀態(tài)欄。這是一個布爾值,可以直接這樣寫:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

          iOS 設備

          添加到主屏后的標題(iOS 6 新增)

          <meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏后的標題(iOS 6 新增) -->

          是否啟用 WebApp 全屏模式

          <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebApp 全屏模式 -->

          設置狀態(tài)欄的背景顏色

          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 設置狀態(tài)欄的背景顏色,只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->

          content 參數:

          • default 默認值。
          • black 狀態(tài)欄背景是黑色。
          • black-translucent 狀態(tài)欄背景是黑色半透明。

          如果設置為 default 或 black ,網頁內容從狀態(tài)欄底部開始。

          如果設置為 black-translucent ,網頁內容充滿整個屏幕,頂部會被狀態(tài)欄遮擋。

          禁止數字識自動別為電話號碼

          <meta name="format-detection" content="telephone=no" /> <!-- 禁止數字識自動別為電話號碼 -->

          iOS 圖標

          rel 參數:

          apple-touch-icon 圖片自動處理成圓角和高光等效果。

          apple-touch-icon-precomposed 禁止系統(tǒng)自動添加效果,直接顯示設計原圖。

          iPhone 和 iTouch,默認 57x57 像素,必須有

          <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默認 57x57 像素,必須有 -->

          iPad,72x72 像素,可以沒有,但推薦有

          <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad,72x72 像素,可以沒有,但推薦有 -->

          Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有

          <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->

          Retina iPad,144x144 像素,可以沒有,但推薦有

          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->

          iOS 啟動畫面

          官方文檔:https://developer.apple.com/library/ios/qa/qa1686/_index.html

          參考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

          iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。

          iPad 豎屏 768 x 1004(標準分辨率)

          <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 豎屏 768 x 1004(標準分辨率) -->

          iPad 豎屏 1536x2008(Retina)

          <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 豎屏 1536x2008(Retina) -->

          iPad 橫屏 1024x748(標準分辨率)

          <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 橫屏 1024x748(標準分辨率) -->

          iPad 橫屏 2048x1496(Retina)

          <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 橫屏 2048x1496(Retina) -->

          iPhone 和 iPod touch 的啟動畫面是包含狀態(tài)欄區(qū)域的。

          iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

          <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->

          iPhone/iPod Touch 豎屏 640x960 (Retina)

          <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->

          iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

          <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->

          添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari)文檔

          <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->


          Android

          Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽,用來控制選項卡顏色。

          http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

          <meta name="theme-color" content="#db5945">


          Windows 8

          Windows 8 磁貼顏色

          <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->

          Windows 8 磁貼圖標

          <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->


          其他

          添加 RSS 訂閱

          <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->

          添加 favicon icon

          <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

          禁止 Chrome 瀏覽器中自動提示翻譯

          lt;meta> 元素可提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞。

          <meta> 標簽位于文檔的頭部,不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯(lián)的名稱/值對。

          content屬性用來存儲meta信息的內容,這是一個必需的屬性,定義與 http-equiv 或 name 屬性相關的元信息,所有的主流瀏覽器都支持它,但它一般很少單獨使用,我們一般使用http-equiv或name來定義content屬性信息(或值)的名稱,http-equiv和name在一個meta中通常只能用其中一個。

          正常我們這樣寫

          <meta charset="utf-8">
          

          視窗的寬度,經常用于收集適配

          <meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
          

          http-equiv :

          http-equiv 屬性為名稱/值對提供了名稱。并指示服務器在發(fā)送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。

          當服務器向瀏覽器發(fā)送文檔時,會先發(fā)送許多名稱/值對。雖然有些服務器會發(fā)送許多這種名稱/值對,但是所有服務器都至少要發(fā)送一個:content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。

          使用帶有 http-equiv 屬性的 <meta> 標簽時,服務器將把名稱/值對添加到發(fā)送給瀏覽器的內容頭部。例如,添加:

          <meta http-equiv="charset" content="iso-8859-1">
          <meta http-equiv="expires" content="31 Dec 2008">
          

          這樣發(fā)送到瀏覽器的頭部就應該包含:

          content-type: text/html
          charset:iso-8859-1
          expires:31 Dec 2008
          

          "keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜索引擎在遇到這些關鍵字時,會用這些關鍵字對文檔進行分類。

          強制刷新,自動刷新并指向新頁面。

          <meta http-equiv="refresh" content="3">
          

          移動端的 蘋果設備的設置

          // 下面代碼來自天貓移動web
          <meta name="apple-mobile-web-app-capable" content="yes"/> // 可以讓app運行于全屏模式
          <meta name="apple-mobile-web-app-title" content="TMALL"/> // 可以讓app的標題不同于頁標題
          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> // 配置app的狀態(tài)欄,可設置為default, black, 和 black-translucent。
          

          淘寶首頁的設置:


          主站蜘蛛池模板: 国产成人片视频一区二区| 无码人妻精品一区二区三区不卡| 亚洲午夜一区二区三区| 精品一区二区ww| 国产亚洲一区二区三区在线观看 | 成人毛片一区二区| 国产成人精品久久一区二区三区av| 91video国产一区| 中文字幕一区二区人妻性色| 国产一区二区三区美女| 亚洲综合av一区二区三区| 久久综合精品不卡一区二区 | 国产成人免费一区二区三区| 精品无码国产一区二区三区AV| 大伊香蕉精品一区视频在线| 日韩精品电影一区| 中文字幕无线码一区二区| 日产亚洲一区二区三区| 中文字幕VA一区二区三区| 国产精品福利区一区二区三区四区| 无码视频免费一区二三区| 国产手机精品一区二区| 亚洲福利一区二区| 亚洲一区动漫卡通在线播放| 亚洲一区二区三区电影| 国产亚洲一区二区三区在线| 国产日韩一区二区三区在线观看 | 91在线精品亚洲一区二区| 国产激情з∠视频一区二区| 亚洲色精品aⅴ一区区三区| 久久久久国产一区二区三区| 国产精品亚洲高清一区二区| 国产精品小黄鸭一区二区三区| 亚洲国产精品一区二区三区久久| 高清无码一区二区在线观看吞精| 国产丝袜一区二区三区在线观看| 精品国产免费观看一区| 国产一区二区三区在线观看影院| 日本一区二区三区免费高清在线 | 国产成人免费一区二区三区| 丝袜美腿一区二区三区|