實例講解HTML5的meta標簽的一些應用

2020-03-24 18:52:28

字體：大中小

來源：轉載

供稿：網友

HTML 4.01 與 HTML 5 之間meta標簽用法的主要差異：在 HTML 5 中，不再支持 scheme 屬性。在 HTML 5 中，有一個新的 charset 屬性，它使字符集的定義更加容易。在 HTML 4.01 中，不得不這么寫：XML/HTML Code復制內容到剪貼板
metahttp-equiv= content-type content= text/html;charset=ISO-8859-1
metaname= keywords content= HTML,CSS,XML,XHTML,JavaScript /
metaname= description content= 免費的web技術教程。 /
標準屬性class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title如需完整的描述，請訪問 HTML 5 中標準屬性。事件屬性onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload如需完整的描述，請訪問 HTML 5 中事件屬性。實例文檔描述XML/HTML Code復制內容到剪貼板
head metahttp-equiv= Content-Type content= text/html;charset=gb2312 / metaname= author content= w3school.com.cn metaname= revised content= DavidYang,8/1/07 metaname= generator content= Dreamweaver8.0en /head body p 本文檔的meta屬性標識了創作者和編輯軟件。 /p /body /html
head metahttp-equiv= Content-Type content= text/html;charset=gb2312 / metaname= description content= HTMLexamples metaname= keywords content= HTML,DHTML,CSS,XML,XHTML,JavaScript,VBScript /head body p 本文檔的meta屬性描述了該文檔和它的關鍵詞。 /p /body /html
head metahttp-equiv= Content-Type content= text/html;charset=gb2312 / metahttp-equiv= Refresh content= url=http://www.w3school.com.cn /head body p 對不起。我們已經搬家了。您的URL是 ahref= http://www.w3school.com.cn http://www.w3school.com.cn /a /p p 您將在5秒內被重定向到新的地址。 /p p 如果超過5秒后您仍然看到本消息，請點擊上面的的鏈接。 /p /body /html
這個例子演示：在網址已經變更的情況下，將用戶重定向到另外一個地址。移動前端開發中添加一些webkit專屬的HTML5頭部標簽，幫助瀏覽器更好解析html代碼，更好地將移動web前端頁面表現出來。本文整理一些常用的meta標簽。XML/HTML Code復制內容到剪貼板
!DOCTYPEhtml !--使用HTML5doctype，不區分大小寫-- htmllang= zh-cmn-Hans !--更加標準的lang屬性寫法http://zhi.hu/XyIa-- head !--聲明文檔使用的字符編碼-- metacharset='utf-8' !--優先使用IE最新版本和Chrome-- metahttp-equiv= X-UA-Compatible content= IE=edge,chrome=1 / !--頁面描述-- metaname= description content= 不超過150個字符 / !--頁面關鍵詞-- metaname= keywords content= / !--網頁作者-- metaname= author content= name,email@gmail.com / !--搜索引擎抓取-- metaname= robots content= index,follow / !--為移動設備添加viewport-- metaname= viewport content= initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=no !--`width=device-width`會導致iPhone5添加到主屏后以WebApp全屏模式打開頁面時出現黑邊http://bigc.at/ios-webapp-viewport-meta.orz-- !--iOS設備begin-- metaname= apple-mobile-web-app-title content= 標題 !--添加到主屏后的標題（iOS6新增）-- metaname= apple-mobile-web-app-capable content= yes / !--是否啟用WebApp全屏模式，刪除蘋果默認的工具欄和菜單欄-- metaname= apple-itunes-app content= app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL !--添加智能App廣告條SmartAppBanner（iOS6+Safari）-- metaname= apple-mobile-web-app-status-bar-style content= black / !--設置蘋果工具欄顏色-- metaname= format-detection content= telphone=no,email=no / !--忽略頁面中的數字識別為電話，忽略email識別-- !--啟用360瀏覽器的極速模式(webkit)-- metaname= renderer content= webkit !--避免IE使用兼容模式-- metahttp-equiv= X-UA-Compatible content= IE=edge !--不讓百度轉碼-- metahttp-equiv= Cache-Control content= no-siteapp / !--針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓-- metaname= HandheldFriendly content= true !--微軟的老式瀏覽器-- metaname= MobileOptimized content= 320 !--uc強制豎屏-- metaname= screen-orientation content= portrait !--QQ強制豎屏-- metaname= x5-orientation content= portrait !--UC強制全屏-- metaname= full-screen content= yes !--QQ強制全屏-- metaname= x5-fullscreen content= true !--UC應用模式-- metaname= browsermode content= application !--QQ應用模式-- metaname= x5-page-mode content= app !--windowsphone點擊無高光-- metaname= msapplication-tap-highlight content= no !--iOS圖標begin-- linkrel= apple-touch-icon-precomposed href= /apple-touch-icon-57x57-precomposed.png / !--iPhone和iTouch，默認57x57像素，必須有-- 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像素，可以沒有，但推薦有-- !--iOS圖標end-- !--iOS啟動畫面begin-- linkrel= apple-touch-startup-image sizes= 768x1004 href= /splash-screen-768x1004.png / !--iPad豎屏768x1004（標準分辨率）-- linkrel= apple-touch-startup-image sizes= 1536x2008 href= /splash-screen-1536x2008.png / !--iPad豎屏1536x2008（Retina）-- linkrel= apple-touch-startup-image sizes= 1024x748 href= /Default-Portrait-1024x748.png / !--iPad橫屏1024x748（標準分辨率）-- linkrel= apple-touch-startup-image sizes= 2048x1496 href= /splash-screen-2048x1496.png / !--iPad橫屏2048x1496（Retina）-- linkrel= apple-touch-startup-image href= /splash-screen-320x480.png / !--iPhone/iPodTouch豎屏320x480(標準分辨率)-- linkrel= apple-touch-startup-image sizes= 640x960 href= /splash-screen-640x960.png / !--iPhone/iPodTouch豎屏640x960(Retina)-- linkrel= apple-touch-startup-image sizes= 640x1136 href= /splash-screen-640x1136.png / !--iPhone5/iPodTouch5豎屏640x1136(Retina)-- !--iOS啟動畫面end-- !--iOS設備end-- 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-- !--sns社交標簽begin-- !--參考微博API-- metaproperty= og:type content= 類型 / metaproperty= og:url content= URL地址 / metaproperty= og:title content= 標題 / metaproperty= og:image content= 圖片 / metaproperty= og:description content= 描述 / !--sns社交標簽end-- title 標題 /title /headhtml教程

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

上一篇：如何將html轉化為圖片

下一篇：HTML5+lufylegend實現游戲中的卷軸