HTML5中meta屬性的使用方法

2020-03-24 17:29:44

字體：大中小

來源：轉載

供稿：網友

meta屬性在HTML中占據了很重要的位置。如：針對搜索引擎的SEO，文檔的字符編碼，設置刷新緩存等。雖然一些網頁可能沒有使用meta，但是作為正規軍，我們還是有必要了解一些meta的屬性，并且能夠熟練使用它們。 1、聲明文檔使用的字符編碼XML/HTML Code復制內容到剪貼板
metahttp-equiv= X-UA-Compatible content= IE=edge / 指示IE以目前可用的最高模式顯示內容 metahttp-equiv= X-UA-Compatible content= IE=EmulateIE7 / 指示IE使用 !DOCTYPE 指令確定如何呈現內容。標準模式指令以IE7標準模式顯示，而Quirks模式指令以IE5模式顯示。
metaname= description content= 不超過150個字符 / 頁面描述 metaname= keywords content= html5,css3,關鍵字 / 頁面關鍵詞 metaname= author content= 魔法小棧 / 定義網頁作者 metaname= robots content= index,follow / 定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。
metaname= viewport content= width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no content參數解釋： width viewport寬度(數值/device-width) heightviewport高度(數值/device-height) initial-scale初始縮放比例 maximum-scale最大縮放比例 minimum-scale最小縮放比例 user-scalable是否允許用戶縮放(yes/no) minimal-uiiOS7.1beta2中新增屬性，可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫： metaname= viewport content= width=device-width,initial-scale=1,minimal-ui
metaname= apple-mobile-web-app-title content= 標題添加到主屏后的標題（iOS6新增） metaname= apple-mobile-web-app-capable content= yes / 是否啟用WebApp全屏模式 metaname= apple-mobile-web-app-status-bar-style content= black-translucent / 設置狀態欄的背景顏色只有在 apple-mobile-web-app-capable content= yes 時生效 content參數： default默認值。 black狀態欄背景是黑色。 black-translucent狀態欄背景是黑色半透明。設置為default或black,網頁內容從狀態欄底部開始。設置為black-translucent,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
apple-touch-icon圖片自動處理成圓角和高光等效果。 apple-touch-icon-precomposed禁止系統自動添加效果，直接顯示設計原圖。 linkrel= apple-touch-icon-precomposed href= /apple-touch-icon-57x57-precomposed.png / iPhone和iTouch，默認57x57像素，必須有 linkrel= apple-touch-icon-precomposed sizes= 72x72 href= /apple-touch-icon-72x72-precomposed.png / iPad，72x72像素，可以沒有，但推薦有 linkrel= apple-touch-icon-precomposed sizes= 114x114 href= /apple-touch-icon-114x114-precomposed.png / RetinaiPhone和RetinaiTouch，114x114像素，可以沒有，但推薦有 linkrel= apple-touch-icon-precomposed sizes= 144x144 href= /apple-touch-icon-144x144-precomposed.png / RetinaiPad，144x144像素，可以沒有，推薦大家使用 metaname= apple-mobile-web-app-title content= 標題 title最好限制在六個中文長度內，超長的內容會被隱藏，添加到主屏后的標題（iOS6新增）
iPad的啟動畫面是不包括狀態欄區域的。 iPad豎屏768x1004（標準分辨率） linkrel= apple-touch-startup-image sizes= 768x1004 href= /splash-screen-768x1004.png / iPad豎屏1536x2008（Retina） linkrel= apple-touch-startup-image sizes= 1536x2008 href= /splash-screen-1536x2008.png / iPad橫屏1024x748（標準分辨率） linkrel= apple-touch-startup-image sizes= 1024x748 href= /Default-Portrait-1024x748.png / iPad橫屏2048x1496（Retina） linkrel= apple-touch-startup-image sizes= 2048x1496 href= /splash-screen-2048x1496.png / iPhone和iPodtouch的啟動畫面是包含狀態欄區域的。 iPhone/iPodTouch豎屏320x480(標準分辨率) linkrel= apple-touch-startup-image href= /splash-screen-320x480.png / iPhone/iPodTouch豎屏640x960(Retina) linkrel= apple-touch-startup-image sizes= 640x960 href= /splash-screen-640x960.png / iPhone5/iPodTouch5豎屏640x1136(Retina) linkrel= apple-touch-startup-image sizes= 640x1136 href= /splash-screen-640x1136.png / linkrel= apple-touch-startup-image href= Startup.png / 當用戶點擊主屏圖標打開WebApp時，系統會展示啟動畫面，在未設置情況下系統會默認顯示該網站的首頁截圖，當然這個體驗不是很好
metaname= msapplication-TileColor content= #000 / Windows8磁貼顏色 metaname= msapplication-TileImage content= icon.png / Windows8磁貼圖標
linkrel= alternate type= application/rss+xml title= RSS href= /rss.xml / 添加RSS訂閱 linkrel= shortcuticon type= image/ico href= /favicon.ico / 添加faviconicon metaname= format-detection content= telephone=no / 禁止數字識自動別為電話號碼 metaname= format-detection content= email=no / 不讓android識別郵箱 metaname= renderer content= webkit 啟用360瀏覽器的極速模式(webkit) metahttp-equiv= X-UA-Compatible content= IE=edge 避免IE使用兼容模式 metaname= HandheldFriendly content= true 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 metaname= MobileOptimized content= 320 微軟的老式瀏覽器 metaname= x5-orientation content= portrait QQ強制豎屏 metaname= full-screen content= yes UC強制全屏 metaname= x5-fullscreen content= true QQ強制全屏 metaname= browsermode content= application UC應用模式 metaname= x5-page-mode content= app QQ應用模式 metahttp-equiv= Cache-Control content= no-siteapp / 禁止百度轉碼 metaname= msapplication-tap-highlight content= no windowsphone點擊無高光 metaname= keywords content= / 關鍵字 metaname= description content= / 描述 metaname= title content= / 標題 metaname= author content= -06 / 作者 metaname= Copyright content= / 公司 metahttp-equiv= X-UA-Compatible content= IE=edge,chrome=1 讓IE瀏覽器用最高級內核渲染頁面還有用Chrome框架的頁面用webkit內核 metaname= apple-mobile-web-app-capable content= yes IOS6全屏 metaname= mobile-web-app-capable content= yes Chrome高版本全屏 metaname= renderer content= webkit 讓360雙核瀏覽器用webkit內核渲染頁面 metaname= apple-itunes-app content= app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL 添加智能App廣告條SmartAppBanner（iOS6+Safari）
metaproperty= og:type content= 類型 / metaproperty= og:url content= URL地址 / metaproperty= og:title content= 標題 / metaproperty= og:image content= 圖片 / metaproperty= og:description content= 描述 /
!--[ifIE] 條件注釋區分非IE瀏覽器 !--[ifltIE7] html >以上就是本文的全部內容，希望對大家的學習有所幫助。
!--[if lt IE 9] ![endif]--html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html按鈕怎么設置超鏈接？html按鈕超鏈接的四種實現方法

下一篇：html標簽中param以及embed的有關flash屬性詳解