整理 H5 meta 標籤的詳解

 持續會添加一些新的內容:

<meta charset="UTF-8">
<!--
設置 H5 的編碼格式
charset 是字符集的意思
設置 UTF-8 編碼
需要使用 charset 爲網頁提供了一種編碼方式,否則頁面很可能出現亂碼。
UTF-8 是一種字符編碼,除此之外在國內網站常用的還有GB2312和GBK。
GB2312 和 GBK 主要用於漢字編碼,utf-8 是國際編碼,實用性比較強。
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--
viewport 意思是視圖
width 設置視覺窗口的寬度,爲一個正整數,或字符串"width-device"
initial-scale 設置頁面的初始縮放值,爲一個數字,可以帶小數
minimum-scale 允許用戶的最小縮放值,爲一個數字,可以帶小數
maximum-scale 允許用戶的最大縮放值,爲一個數字,可以帶小數
height 設置視覺窗口的高度,這個屬性對我們並不重要,很少使用
user-scalable 是否允許用戶進行縮放,值爲"no"或"yes", no 代表不允許,yes代表允許
-->

 

 meta中的name屬性

<!--用以說明生成工具-->
<meta name="Generator" content="">     
 <!--向搜索引擎說明你的網頁的關鍵詞-->
<meta name="Keywords" content=""> 
<!-- 告訴搜索引擎你的站點的主要內容-->
<meta name="Description" content=""> 
<!-- 告訴搜索引擎你的站點的製作的作者 -->    
<meta name="Author" content="你的姓名">
<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
<!--  
設定爲all:文件將被檢索,且頁面上的鏈接可以被查詢;     
設定爲none:文件將不被檢索,且頁面上的鏈接不可以被查詢;     
設定爲index:文件將被檢索;     
設定爲follow:頁面上的鏈接可以被查詢;     
設定爲noindex:文件將不被檢索,但頁面上的鏈接可以被查詢;     
設定爲nofollow:文件將不被檢索,頁面上的鏈接可以被查詢。
-->

 

 meta中的 http-equiv屬性

<!--設置字符編碼和文件格式-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--設置定時刷新-->
<meta http-equiv="Refresh" content="8;url=http://">
<!-- 告訴瀏覽器不要緩存頁面-->
<meta http-equiv="Pragma" content="no-cache">
<!-- 告訴瀏覽器不要緩存頁面 -->
<meta http-equiv="cache-control" content="no-cache">
<!--禁用瀏覽器緩存此頁面-->
<meta http-equiv="expires" content="0">
<!--設置ie的文檔兼容模式,設置IE7+的瀏覽器以IE7的兼容模式查看頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=7">

 

html5中更多的meta與link

<!DOCTYPE html> <!-- HTML5 doctype 不區分大小寫 -->
<html lang="zh"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
 
<head>
<meta charset="UTF-8">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 瀏覽器內核控制 -->
<!--
content的取值爲webkit,ie-comp,ie-stand之一,區分大小寫,分別代表用webkit內核,IE兼容內核,IE標準內核。
若頁面需默認用極速核,增加標籤:<meta name="renderer" content="webkit"> 
若頁面需默認用ie兼容內核,增加標籤:<meta name="renderer" content="ie-comp"> 
若頁面需默認用ie標準內核,增加標籤:<meta name="renderer" content="ie-stand">
-->

<!-- width=device-width 會導致 iPhone 5 添加到主屏後以 WebAPP 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
<meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏時的標題 -->
 
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啓用 WebAPP 全屏模式 -->
 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 狀態條顏色 -->
 
<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽數字自動識別爲電話號碼 -->

<!-- favicon 圖標 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>

<!-- iOS 圖標 begin -->
<!--默認 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 圖標 end -->
 
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->

<!-- SEO 優化 -->
<meta name="description" content="" /> <!-- 頁面描述 -->
<meta name="keywords" content=""/> <!-- 頁面關鍵詞 -->
<title>頁面標題</title>

<!-- iOS 應用啓動界面設置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 應用啓動界面設置 end -->

</head>

 

 基本的meta設置:

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width">
<meta content="telephone=no" name="format-detection">
<meta name="applicable-device" content="mobile">
<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 charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 啓用webAPP全屏模式-->
<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">
<!--控制緩存的失效日期 -->
<meta http-equiv="Expires" content="-1">
<!-- 禁止轉碼-->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- 禁止緩存訪問頁面-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- X5內核下強制橫屏或者豎屏-->
<meta name="x5-orientation" content="portrait" />
<!--X5下設置全屏-->
<meta name="x5-fullscreen" content="true" />
<!-- UC強制豎屏或橫屏-->
<meta name="screen-orientation" content="portrait">
<!-- UC全屏顯示-->
<meta name="full-screen" content="yes">
<!--禁止識別電話號碼和郵箱-->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 頁面關鍵詞-->
<meta content="" name="keywords">
<meta name="description" content="">

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章