社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5中meta屬性的使用方法_html5教學技巧

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

WBOY
發布： 2016-05-16 15:45:55
原創
1716 人瀏覽過

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, 關鍵字"/>關鍵字🎜>
    3. meta name="author" content="魔法小堆疊" / 
  3. meta name=name=名稱 content="index,follow" 
    4. 定義網頁搜尋引擎索引方式，robotterms是一組使用英文逗號“,”分割的值，通常有以下幾種取值：none，noindex，nofollow，all，index和follow。   
    5.   

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. >  
    4.     content 參數解釋：   
    5.     width  　　　　 viewport 寬度(數值/device-width)   
    6.     height            view以高度(數值/device-height)   
    7.     initial-scale  初始縮放比例   
    8.     maximum-scale  最大縮放比例   
    9.     minimum-scale  最小縮放比例   
    10.     user-scalable  是否允許使用者縮放(yes/no)   
  10.     minimal-ui      iOS 7.1 beta 2 新增屬性，且可在頁面載入時最小化上下狀態列。這是一個布林值，可以直接這樣寫：    meta name=name= content=
    11. "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=
    3. name
  3. = content="yes"  是否啟用 WebApp 全螢幕模式   meta 
    4. name
  4. =name=name=
  5.  content
  6. ="black-translucent"
  7. "black-translucent"
    8. >
  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. =
    9.  
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. />
  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. =
  2. "application/rss xml" "RSS" href="/rss.xml""/rss.xml"  >/>新增 RSS 訂閱   link rel=
    3. rel
  3. =rel type="image/ico"  ="/favicon.ico" />加入 favicon icon   加入 favicon icon   
  4. meta name name=name=名稱 content="telephone=no"
    5.  
  5. 🎜>禁止數位識自動別為電話號碼   meta name name=name=名稱
  6.  content="email=no" // 🎜>不讓android辨識信箱   meta name=
  7. name=name 🎜> content="webkit">啟用3600web0(webT )    meta
    8.  
  8. http-equiv= -UA-Compatible" content="IE=edge"避免IE使用相容模式   meta
    9.  
  9. name=name=name 🎜> content="true">針對一些手持設備優化，主要針對某些設備優化，主要針對某些設備舊的不辨識viewport的瀏覽器，如黑莓  
    10. meta name=name=name= content="320"> 🎜> meta name＝ " content="portrait">
  10. meta name=name= content="yes">
  11. UCUC meta name="x5-fullscreen " content="true">
    12. QQ
  12. >QQQQQQp meta namename=name 🎜> content
    13. =
  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.  
  17. meta name=name 🎜> content="" 
  18. meta name content=""  meta 
  19. name="author" content="-06"  meta name
    20. =
  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. =
  23. name=
    24.  content="yes"> meta  name
  24. ="mobile-web -app-capable" content="yes"> meta name
  25. =name=name 🎜> content="webkit"> 
    26. meta
  26.  
    27. 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="標題" / //
    5. meta
  5.  property=property=property= " content="圖片" / 

meta

 
property=
property
    =
  1. property== content
  2. ="描述" /
  3.     
  4. 11、條件註解判斷IE瀏覽器
    5. XML/HTML Code
  5. 複製內容到剪貼簿
  6.          🎜>     >           以上就是本文的全部內容，希望對大家的學習有所幫助。
相關標籤：
html5
來源：php.cn
上一篇：解析HTML5的儲存功能和web SQL的相關操作方法_html5教學技巧 下一篇：在HTML5中使用MathML數學公式的簡單講解_html5教程技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板