HTML中的meta標籤
阿新 • • 發佈:2019-01-04
常用meta
<meta charset='utf-8'> <!--宣告文件使用的字元編碼-->
<meta name="description" content="不超過150個字元"/> <!--頁面描述-->
<meta name="keywords" content=""/> <!--頁面關鍵詞-->
<meta name="author" content="name, [email protected]"/> <!--網頁作者-->
< meta name="robots" content="all|none|index|noindex|follow|nofollow"/>
<!--搜尋引擎抓取 其中的屬性說明如下: -->
<!--設定為all:檔案將被檢索,且頁面上的連結可以被查詢;-->
<!--設定為none:檔案將不被檢索,且頁面上的連結不可以被查詢; -->
<!--設定為index:檔案將被檢索; -->
<!--設定為follow:頁面上的連結可以被查詢; -->
<!--設定為noindex:檔案將不被檢索,但頁面上的連結可以被查詢; -->
<!--設定為nofollow:檔案將不被檢索,頁面上的連結可以被查詢。 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<!--為移動裝置新增 viewport-->
<meta name="format-detection" content="telphone=no, email=no"/> <!--格式檢測-->
<!--
主要作用是是否設定自動將你的數字轉化為撥號連線
telephone=no 禁止把數字轉化為撥號連結
telephone=yes 開啟把數字轉化為撥號連結,預設開啟
告訴裝置不識別郵箱,點選之後不自動傳送
email=no 禁止作為郵箱地址
email=yes 開啟把文字預設為郵箱地址,預設情況開啟
adress=no 禁止跳轉至地圖
adress=yes 開啟點選地址直接跳轉至地圖的功能, 預設開啟
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 控制瀏覽器核心(國內主流瀏覽器都是雙核)目前360安全瀏覽器支援該功能 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--指定IE瀏覽器的渲染模式 在不改變IE外觀的情況下使用Chrome核心 基於Chrome Frame 2014年開始chrome不再提供Chrome Frame服務,所以使用該標籤是必須客戶端現在並安裝Chrome Frame; IE8及以上版本支援 個人覺得沒有大的實用價值-->
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 指定請求和響應遵循的快取機制 -->
<!--no-cache: 先發送請求,與伺服器確認該資源是否被更改,如果未被更改,則使用快取。
no-store: 不允許快取,每次都要去伺服器上,下載完整的響應。(安全措施)
public : 快取所有響應,但並非必須。因為max-age也可以做到相同效果
private : 只為單個使用者快取,因此不允許任何中繼進行快取。(比如說CDN就不允許快取private的響應)
maxage : 表示當前請求開始,該響應在多久內能被快取和重用,而不去伺服器重新請求。例如:max-age=60表示響應可以再快取和重用 60 秒。
no-siteapp:禁止當前頁面在移動端瀏覽時,被百度自動轉碼。
-->
<meta name="screen-orientation" content="portrait"> <!--uc強制豎屏-->
<meta name="x5-orientation" content="portrait"> <!--QQ強制豎屏-->
<meta name="full-screen" content="yes"> <!--UC強制全屏-->
<meta name="x5-fullscreen" content="true"> <!--QQ強制全屏-->
<meta name="browsermode" content="application"> <!--UC應用模式-->
<meta name="x5-page-mode" content="app"> <!--QQ應用模式-->
<meta name="format-detection" content="telephone=no"> <!--禁止自動探測並格式化手機號碼-->
頁面重新整理
<meta http-equiv="refresh" content="1"> <!--當前頁面每一秒後重新整理一下-->
<meta http-equiv="refresh" content="0;url='/'"> <!--當前頁面一秒後跳轉到首頁-->
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'"> <!--當前頁面一秒後跳轉到百度-->
控制頁面快取
<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
webapp meta標籤
<meta name="apple-mobile-web-app-title" content="標題"> <!--新增到IOS主屏後的標題。-->
<meta name="apple-mobile-web-app-capable" content="yes"/> <!--是否啟用 WebApp 全屏模式,刪除蘋果預設的工具欄和選單欄(iOS 6 新增)-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!--新增智慧 App 廣告條 Smart App Banner(iOS 6+ Safari)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--制定iphone中safari頂端的狀態條的樣式(default:白色,black:黑色,black-translucent:半透明)只有在 “apple-mobile-web-app-capable” content=”yes” 時生效-->
<!--保留歷史記錄以及動畫效果-->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<!--新增到主屏後的標題-->
<meta name="apple-mobile-web-app-title" content="App Title">