实例讲解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实现游戏中的卷轴