HTML5中meta屬性的使用方法_html5教學技巧

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

1、聲明文件使用的字元編碼

XML/HTML Code複製內容到剪貼簿

1. meta charset >>     

2、聲明文件的相容模式

XML/HTML Code

複製內容到剪貼簿

meta http-equiv= Compatible" content="IE=edge"   指示IE以目前可用的最高模式顯示內容  
1. meta http-equiv= -UA-Compatible" content="IE=Emulate IE7"> >指示IE使用 span class="tag">> 指令決定如何呈現內容。標準模式指令以IE7 標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。      

3、SEO 最佳化

XML/HTML Code

複製內容到剪貼簿

meta name="description" content="不超過150個字" /> />/>
1. meta name="keywords" content="html5, css3, 關鍵字"/>關鍵字🎜>
meta name="author" content="魔法小堆疊" / 
3. meta name=name=名稱 content="index,follow" 
定義網頁搜尋引擎索引方式，robotterms是一組使用英文逗號“,”分割的值，通常有以下幾種取值：none，noindex，nofollow，all，index和follow。   
  

4、為行動裝置增加 viewport

XML/HTML Code複製內容到剪貼簿

1. meta name =name =name = content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale-s =no"
2. >  
    content 參數解釋：   
    width  　　　　 viewport 寬度(數值/device-width)   
    height            view以高度(數值/device-height)   
    initial-scale  初始縮放比例   
    maximum-scale  最大縮放比例   
    minimum-scale  最小縮放比例   
    user-scalable  是否允許使用者縮放(yes/no)   
10.     minimal-ui      iOS 7.1 beta 2 新增屬性，且可在頁面載入時最小化上下狀態列。這是一個布林值，可以直接這樣寫：    meta name=name= content=
"width=device-width, initial-scale=1, minimal-ui"
11.   

  

5、iOS 設備

XML/HTML Code複製內容到剪貼簿

1. meta name=oname=pilename=問name=pile"app-mobile app-title" 
2. content="標題">添加到主屏後的標題（iOS 6 新增）    meta name=name=
name
3. = content="yes"  是否啟用 WebApp 全螢幕模式   meta 
name
4. =name=name=
5.  content
6. ="black-translucent"
7. "black-translucent"
>
8. />設定狀態列的背景顏色  
9.     只有在 "apple-mobile-web-app-capable" 
10. content=
11. "yes"=

"yes"

=

"yes"

    content 參數：   

    default 預設值。        black 狀態列背景為黑色。        black-translucent 狀態列背景為黑色半透明。        設定為 default 或 black ,網頁內容從狀態列底部開始。        設定為 black-translucent ,網頁內容充滿整個螢幕，頂部會被狀態列遮擋。       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-preposed."/apple-touch-icon-57x57-preposed.png > />iPhone 和 iTouch，預設 57x57 像素，必須有  
4. link rel="apple-touch -icon-precomposed" sizes="72x72"  ="/apple-touch-icon-72x72-precomposed.png" />i像素，72x72沒有，但推薦有  
5. link rel="apple-touch -icon-precomposed" sizes="114x114""114x114""114x114" ="/apple-touch-icon-114x114-precomposed.png" /> />
6.  />> 114x114 像素，可以沒有，但推薦有   link rel="apple-touch -icon-precomposed" sizes="144x144""144x144"="/apple-touch-icon-144x144-precomposed.png" 
7. /> />Retina iPad，可以沒有，推薦大家使用   meta name=name=name
8. =
 

content

=

"標題"

>"標題"

>"2>    7、iOS 啟動畫面 XML/HTML Code複製內容到剪貼簿

1. iPad 的啟動畫面是不包含狀態列區域的。   
2. iPad 垂直螢幕 768 x 1004（標準解析度）   
3. link rel="apple-touch -startup-image" sizes="768x1004"="/splash-screen-768x1004.png" />ii 
4. link rel="apple-touch -startup-image" sizes="1536x2008" ="/splash-screen-1536x2008.png" />Pad🎜>/>Pad🎜>/>Pad🎜>/>Pad🎜>
/>
5. Pad🎜>/>Pad🎜>/>Pad🎜>B5024x 🎜> link rel="apple-touch -startup-image" sizes="1024x748" ="/Default-Portrait-1024x748.png" 
6. />Pad🎜>/>Pad🎜>/>片 link rel="apple-touch -startup-image" sizes="2048x1496"> ="/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""640x960" ="/splash-screen-640x960.png" />iPhone 5/iPod1625621625626262 月(pf31621162162162162020000 月(F116211625200002052x Retina)   
11. link rel="apple-touch -startup-image" sizes="640x1136"="/splash-screen-640x1136.png" /> />  
12. link rel="apple-touch -startup-image" href="Startup.png" "Startup.png"    當使用者點選主畫面圖示開啟 WebApp 時，系統會顯示啟動畫面，且未設定係統會預設顯示網站的首頁截圖，當然這個體驗不是很好  
13.   

8、Windows 8

XML/HTML Code複製內容到剪貼簿

1. meta name=name=name=" > content="#000"/>
2.     meta name=name=name " content
3. ="icon.png"

/>

Windows圖示  

  

9.不常用的 XML/HTML Code複製內容到剪貼簿

1. link rel=rel=rel=rel=rel=rel=rel=rel=rel 🎜> type
=
2. "application/rss xml" "RSS" href="/rss.xml""/rss.xml"  >/>新增 RSS 訂閱   link rel=
rel
3. =rel type="image/ico"  ="/favicon.ico" />加入 favicon icon   加入 favicon icon   
4. meta name name=name=名稱 content="telephone=no"
 
5. 🎜>禁止數位識自動別為電話號碼   meta name name=name=名稱
6.  content="email=no" // 🎜>不讓android辨識信箱   meta name=
7. name=name 🎜> content="webkit">啟用3600web0(webT )    meta
 
8. http-equiv= -UA-Compatible" content="IE=edge"避免IE使用相容模式   meta
 
9. name=name=name 🎜> content="true">針對一些手持設備優化，主要針對某些設備優化，主要針對某些設備舊的不辨識viewport的瀏覽器，如黑莓  
meta name=name=name= content="320"> 🎜> meta name＝ " content="portrait">
10. meta name=name= content="yes">
11. UCUC meta name="x5-fullscreen " content="true">
QQ
12. >QQQQQQp meta namename=name 🎜> content
=
13. "application">meta name﹀ -mode" content="app"
14. meta http-equiv content="no-siteapp" "no-siteapp" 禁止百度轉碼  
15. meta name=name=name -highlight" content="no">
16. "no">window meta name="keywords" content=""
 
17. meta name=name 🎜> content="" 
18. meta name content=""  meta 
19. name="author" content="-06"  meta name
=
20. "Copyright" content="" 
21. meta http-equiv= -UA-Compatible" content="IE=edge,chrome=1">"IE=edge,chrome=1">"IE=edge,chrome=1"
22. >"IE=edge,chrome=1">"IE=edge,chrome=1"    讓IE瀏覽器用最高核心渲染頁 還有用 Chrome 框架的頁面使用webkit 核心     meta name=name
=
23. name=
 content="yes"> meta  name
24. ="mobile-web -app-capable" content="yes"> meta name
25. =name=name 🎜> content="webkit"> 
meta
26.  
name

=

name

-app"

 content

="app-id=myAppStoreID, affiliate-data=myAffiliateData, >> 新增智慧 App 廣告條 Smart App Banner（iOS 6  Safari）       10、sns 社交標籤 XML/HTML Code複製內容到剪貼簿

1. meta property=property= > content="類型" />
2. meta property=property=property= " content="URL位址"
3.   >   meta property=property=property=property=
4. property= " content="標題" / //
meta
5.  property=property=property= " content="圖片" / 

meta

 

property=

property

=
1. property== content
2. ="描述" /
3.     
4. 11、條件註解判斷IE瀏覽器
XML/HTML Code
5. 複製內容到剪貼簿
6.          🎜>     >           以上就是本文的全部內容，希望對大家的學習有所幫助。