DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5中meta屬性的使用方法
HTML5中meta屬性的使用方法
編輯：HTML5詳解     

meta屬性在Html中占據了很重要的位置。如：針對搜索引擎的SEO，文檔的字符編碼，設置刷新緩存等。雖然一些網頁可能沒有使用meta，但是作為正規軍，我們還是有必要了解一些meta的屬性，並且能夠熟練使用它們。

1、聲明文檔使用的字符編碼

XML/Html Code復制內容到剪貼板
  1. <meta charset='utf-8'>  
  2.   

2、聲明文檔的兼容模式

XML/Html Code復制內容到剪貼板
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高模式顯示內容   
  2. <meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />指示IE使用 <!DOCTYPE> 指令確定如何呈現內容。標准模式指令以IE7 標准模式顯示，而 Quirks 模式指令以 IE5 模式顯示。   
  3.   

3、SEO 優化

XML/Html Code復制內容到剪貼板
  1. <meta name="description" content="不超過150個字符" />頁面描述   
  2. <meta name="keyWords" content="Html5, CSS3, 關鍵字"/>頁面關鍵詞   
  3. <meta name="author" content="魔法小棧" />定義網頁作者   
  4. <meta name="robots" content="index,follow" />定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。   
  5.   

4、為移動設備添加 vIEwport

XML/Html Code復制內容到剪貼板
  1. <meta name ="vIEwport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
  2.     content 參數解釋：   
  3.     width  　　　　 vIEwport 寬度(數值/device-width)   
  4.     height            vIEwport 高度(數值/device-height)   
  5.     initial-scale  初始縮放比例   
  6.     maximum-scale  最大縮放比例   
  7.     minimum-scale  最小縮放比例   
  8.     user-scalable  是否允許用戶縮放(yes/no)   
  9.     minimal-ui      iOS 7.1 beta 2 中新增屬性，可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：   
  10. <meta name="vIEwport" content="width=device-width, initial-scale=1, minimal-ui">  
  11.   

5、iOS 設備

XML/Html Code復制內容到剪貼板
  1. <meta name="apple-mobile-web-app-title" content="標題">添加到主屏後的標題（iOS 6 新增）   
  2. <meta name="apple-mobile-web-app-capable" content="yes" />是否啟用 WebApp 全屏模式   
  3. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />設置狀態欄的背景顏色   
  4.     只有在 "apple-mobile-web-app-capable" content="yes" 時生效   
  5.     content 參數：   
  6.     default 默認值。   
  7.     black 狀態欄背景是黑色。   
  8.     black-translucent 狀態欄背景是黑色半透明。   
  9.     設置為 default 或 black ,網頁內容從狀態欄底部開始。   
  10.     設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。   
  11.   

6、iOS 圖標 rel 參數

XML/Html Code復制內容到剪貼板
  1. apple-touch-icon 圖片自動處理成圓角和高光等效果。   
  2. apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。   
  3. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone 和 iTouch，默認 57x57 像素，必須有   
  4. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad，72x72 像素，可以沒有，但推薦有   
  5. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有   
  6. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad，144x144 像素，可以沒有，推薦大家使用   
  7. <meta name="apple-mobile-web-app-title" content="標題">title最好限制在六個中文長度內，超長的內容會被隱藏，添加到主屏後的標題（iOS 6 新增）   
  8.   

7、iOS 啟動畫面

XML/Html Code復制內容到剪貼板
  1. iPad 的啟動畫面是不包括狀態欄區域的。   
  2. iPad 豎屏 768 x 1004（標准分辨率）   
  3. <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad 豎屏 1536x2008（Retina）   
  4. <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad 橫屏 1024x748（標准分辨率）   
  5. <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad 橫屏 2048x1496（Retina）   
  6. <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />  
  7. iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。   
  8. iPhone/iPod Touch 豎屏 320x480 (標准分辨率)   
  9. <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch 豎屏 640x960 (Retina)   
  10. <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)   
  11. <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />  
  12. <link rel="apple-touch-startup-image" href="Startup.png" />  當用戶點擊主屏圖標打開 WebApp 時，系統會展示啟動畫面，在未設置情況下系統會默認顯示該網站的首頁截圖，當然這個體驗不是很好   
  13.   

8、Windows 8

XML/Html Code復制內容到剪貼板
  1. <meta name="msapplication-TileColor" content="#000"/> Windows 8 磁貼顏色   
  2. <meta name="msapplication-TileImage" content="icon.png"/>Windows 8 磁貼圖標   
  3.   

9、不常用的

XML/Html Code復制內容到剪貼板
  1. <link rel="alternate" type="application/rss+XML" title="RSS" href="/rss.XML" />添加 RSS 訂閱   
  2. <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />添加 favicon icon   
  3. <meta name="format-detection" content="telephone=no" />禁止數字識自動別為電話號碼   
  4. <meta name="format-detection" content="email=no" />不讓android識別郵箱   
  5. <meta name="renderer" content="webkit">啟用360浏覽器的極速模式(webkit)   
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">避免IE使用兼容模式   
  7. <meta name="HandheldFrIEndly" content="true">針對手持設備優化，主要是針對一些老的不識別vIEwport的浏覽器，比如黑莓   
  8. <meta name="MobileOptimized" content="320">微軟的老式浏覽器   
  9. <meta name="x5-orIEntation" content="portrait">QQ強制豎屏   
  10. <meta name="full-screen" content="yes">UC強制全屏   
  11. <meta name="x5-fullscreen" content="true">QQ強制全屏   
  12. <meta name="browsermode" content="application">UC應用模式   
  13. <meta name="x5-page-mode" content="app">QQ應用模式   
  14. <meta http-equiv="Cache-Control" content="no-siteapp" />禁止百度轉碼   
  15. <meta name="msapplication-tap-highlight" content="no">Windows phone 點擊無高光   
  16. <meta name="keyWords" content="" />  關鍵字   
  17. <meta name="description" content="" />  描述   
  18. <meta name="title" content="" />  標題   
  19. <meta name="author" content="-06" />  作者   
  20. <meta name="Copyright" content="" />  公司   
  21. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">   讓IE浏覽器用最高級內核渲染頁面 還有用 Chrome 框架的頁面用webkit 內核    
  22. <meta name="apple-mobile-web-app-capable" content="yes">  iOS6全屏   
  23. <meta name="mobile-web-app-capable" content="yes">  Chrome高版本全屏   
  24. <meta name="renderer" content="webkit">  讓360雙核浏覽器用webkit內核渲染頁面   
  25. <meta name="apple-itunes-app" content="app-id=myAPPStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）   
  26.   

10、sns 社交標簽

XML/Html Code復制內容到剪貼板
  1. <meta property="og:type" content="類型" />  
  2. <meta property="og:url" content="URL地址" />  
  3. <meta property="og:title" content="標題" />  
  4. <meta property="og:image" content="圖片" />  
  5. <meta property="og:description" content="描述" />  
  6.   

11、條件注釋判斷IE浏覽器

XML/Html Code復制內容到剪貼板
  1. <!--[if IE]>條件注釋區分非IE浏覽器   
  2. <!--[if lt IE 7 ]><Html class="oldie ie IE6"> <![endif]-->     
  3. <!--[if IE 7 ]><Html class="oldie ie IE7"> <![endif]-->     
  4. <!--[if IE 8 ]><Html class="ie IE8"> <![endif]-->     
  5. <!--[if (gte IE 9)|!(IE)]><!--><Html> <!--<![endif]-->    
  6.   

以上就是本文的全部內容，希望對大家的學習有所幫助。
<!--[if lt IE 9]>  <![endif]-->

HTML5詳解
html5特性檢測代碼
JavaScript Code復制內容到剪貼板<audio>  &
html5 桌面提醒：Notifycations應用介紹
Html5中的桌面提醒（web notifications）可以在當前頁面窗口彈出一個消息框，這個
HTML5移動應用開發第1章：用HTML5、地理定位API和Web服務來開發移動應用
HTML 5 是一項讓人振奮的技術，這有著充分的理由。這將會是一次技術突破，因為它可以將桌面應用程

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
【HTML5疑難雜症】脫離文檔流時的渲染BUG HTML5實現獲取地理位置信息並定位功能 突襲HTML5之Javascript API擴展2—地理信息服務及地理位置API學習 html5 canvas 繪制圓角矩形 深入解析HTML5中的Blob對象的使用 使用 HTML5 開發離線應用 Debian vps下 PPTP VPN 安裝筆記 html5的canvas標簽(一) HTML5夢幻之旅――炫麗的流星雨效果實現過程 浏覽器對HTML5的兼容性分析
熱門推薦
HTML5 對各個標簽的定義與規定：body的介紹 簡單html5代碼獲取地理位置 html5概覽 一款利用html5和css3動畫排列人物頭像的實例演示 html5 css3網站菜單實現代碼 HTML5技術教程 canvas動畫轉換為css3 HTML5新增的8類INPUT輸入類型介紹 Html5無刷新修改browser Url的方法 HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
大家都在看
HTML中文件上傳時使用的<input type=file>元素的樣式自定義 javascript設計模式Constructor（構造器）模式 Javascript實例教程(19) 使用HoTMetal(4) CSS Wave濾鏡用法示例 怎麼在windows xp中安裝JAVA環境 jQuery的live()方法對hover事件的處理示例 javascript實現復選框超過限制即彈出警告框的方法 javascript遞歸回溯法解八皇後問題
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved