搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > HTML5 > 正文

实例讲解HTML5的meta标签的一些应用

发布时间：2023-01-01 01:44:21 来源：互联网
.
穷则独善其身，达则兼善天下。没有梦想的人到达不了成功的彼岸，也就因此而看不到成功的辉煌。没有梦想的人生是失败的，因为他们根本看不到生命的意义。

HTML 4.01 与 HTML 5 之间meta标签用法的主要差异：

在 HTML 5 中，不再支持 scheme 属性。

在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。

在 HTML 4.01 中，不得不这么写：

XML/HTML Code复制内容到剪贴板
  1. <metahttp-equiv="content-type"content="text/html;charset=ISO-8859-1">

在 HTML 5 中，这样就够了：

XML/HTML Code复制内容到剪贴板
  1. <metacharset="ISO-8859-1">

例子

定义针对搜索引擎的关键词：

XML/HTML Code复制内容到剪贴板
  1. <metaname="keywords"content="HTML,CSS,XML,XHTML,JavaScript"/>

定义对页面的描述：

XML/HTML Code复制内容到剪贴板
  1. <metaname="description"content="免费的web技术好代码教程。"/>

定义页面的最新版本：

XML/HTML Code复制内容到剪贴板
  1. <metaname="revised"content="David,2008/8/8/"/>

每 5 秒刷新一次页面：

XML/HTML Code复制内容到剪贴板
  1. <metahttp-equiv="refresh"content="5"/>

属性

标准属性

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复制内容到剪贴板
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <metaname="author"content="w3school.com.cn">
  5. <metaname="revised"content="DavidYang,8/1/07">
  6. <metaname="generator"content="Dreamweaver8.0en">
  7. </head>
  8. <body>
  9. <p>本文档的meta属性标识了创作者和编辑软件。</p>
  10. </body>
  11. </html>

Meta 元素中的信息可以描述 HTML 文档。

文档关键字

XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <metaname="description"content="HTMLexamples">
  5. <metaname="keywords"content="HTML,DHTML,CSS,XML,XHTML,JavaScript,VBScript">
  6. </head>
  7. <body>
  8. <p>本文档的meta属性描述了该文档和它的关键词。</p>
  9. </body>
  10. </html>

Meta 元素中的信息可以描述文档的关键词。

重定向

XML/HTML Code复制内容到剪贴板
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <metahttp-equiv="Refresh"content="5;url=http://www.w3school.com.cn">
  5. </head>
  6. <body>
  7. <p>
  8. 对不起。我们已经搬家了。您的URL是<arel="nofollow noopener noreferrer" href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
  9. </p>
  10. <p>您将在5秒内被重定向到新的地址。</p>
  11. <p>如果超过5秒后您仍然看到本消息，请点击上面的的链接。</p>
  12. </body>
  13. </html>

这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。

移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml><!--使用HTML5doctype，不区分大小写-->
  2. <htmllang="zh-cmn-Hans"><!--更加标准的lang属性写法http://zhi.hu/XyIa-->
  3. <head>
  4. <!--声明文档使用的字符编码-->
  5. <metacharset='utf-8'>
  6. <!--优先使用IE最新版本和Chrome-->
  7. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
  8. <!--页面描述-->
  9. <metaname="description"content="不超过150个字符"/>
  10. <!--页面关键词-->
  11. <metaname="keywords"content=""/>
  12. <!--网页作者-->
  13. <metaname="author"content="name,email@gmail.com"/>
  14. <!--搜索引擎抓取-->
  15. <metaname="robots"content="index,follow"/>
  16. <!--为移动设备添加viewport-->
  17. <metaname="viewport"content="initial-scale=1,maximum-scale=3,minimum-scale=1,user-scalable=no">
  18. <!--`width=device-width`会导致iPhone5添加到主屏后以WebApp全屏模式打开页面时出现黑边http://bigc.at/ios-webapp-viewport-meta.orz-->
  20. <!--iOS设备begin-->
  21. <metaname="apple-mobile-web-app-title"content="标题">
  22. <!--添加到主屏后的标题（iOS6新增）-->
  23. <metaname="apple-mobile-web-app-capable"content="yes"/>
  24. <!--是否启用WebApp全屏模式，删除苹果默认的工具栏和菜单栏-->
  26. <metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">
  27. <!--添加智能App广告条SmartAppBanner（iOS6+Safari）-->
  28. <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
  29. <!--设置苹果工具栏颜色-->
  30. <metaname="format-detection"content="telphone=no,email=no"/>
  31. <!--忽略页面中的数字识别为电话，忽略email识别-->
  32. <!--启用360浏览器的极速模式(webkit)-->
  33. <metaname="renderer"content="webkit">
  34. <!--避免IE使用兼容模式-->
  35. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  36. <!--不让百度转码-->
  37. <metahttp-equiv="Cache-Control"content="no-siteapp"/>
  38. <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
  39. <metaname="HandheldFriendly"content="true">
  40. <!--微软的老式浏览器-->
  41. <metaname="MobileOptimized"content="320">
  42. <!--uc强制竖屏-->
  43. <metaname="screen-orientation"content="portrait">
  44. <!--QQ强制竖屏-->
  45. <metaname="x5-orientation"content="portrait">
  46. <!--UC强制全屏-->
  47. <metaname="full-screen"content="yes">
  48. <!--QQ强制全屏-->
  49. <metaname="x5-fullscreen"content="true">
  50. <!--UC应用模式-->
  51. <metaname="browsermode"content="application">
  52. <!--QQ应用模式-->
  53. <metaname="x5-page-mode"content="app">
  54. <!--windowsphone点击无高光-->
  55. <metaname="msapplication-tap-highlight"content="no">
  56. <!--iOS图标begin-->
  57. <linkrel="apple-touch-icon-precomposed"rel="nofollow noopener noreferrer" href="/apple-touch-icon-57x57-precomposed.png"/>
  58. <!--iPhone和iTouch，默认57x57像素，必须有-->
  59. <linkrel="apple-touch-icon-precomposed"sizes="114x114"rel="nofollow noopener noreferrer" href="/apple-touch-icon-114x114-precomposed.png"/>
  60. <!--RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有-->
  61. <linkrel="apple-touch-icon-precomposed"sizes="144x144"rel="nofollow noopener noreferrer" href="/apple-touch-icon-144x144-precomposed.png"/>
  62. <!--RetinaiPad，144x144像素，可以没有，但推荐有-->
  63. <!--iOS图标end-->
  65. <!--iOS启动画面begin-->
  66. <linkrel="apple-touch-startup-image"sizes="768x1004"rel="nofollow noopener noreferrer" href="/splash-screen-768x1004.png"/>
  67. <!--iPad竖屏768x1004（标准分辨率）-->
  68. <linkrel="apple-touch-startup-image"sizes="1536x2008"rel="nofollow noopener noreferrer" href="/splash-screen-1536x2008.png"/>
  69. <!--iPad竖屏1536x2008（Retina）-->
  70. <linkrel="apple-touch-startup-image"sizes="1024x748"rel="nofollow noopener noreferrer" href="/Default-Portrait-1024x748.png"/>
  71. <!--iPad横屏1024x748（标准分辨率）-->
  72. <linkrel="apple-touch-startup-image"sizes="2048x1496"rel="nofollow noopener noreferrer" href="/splash-screen-2048x1496.png"/>
  73. <!--iPad横屏2048x1496（Retina）-->
  75. <linkrel="apple-touch-startup-image"rel="nofollow noopener noreferrer" href="/splash-screen-320x480.png"/>
  76. <!--iPhone/iPodTouch竖屏320x480(标准分辨率)-->
  77. <linkrel="apple-touch-startup-image"sizes="640x960"rel="nofollow noopener noreferrer" href="/splash-screen-640x960.png"/>
  78. <!--iPhone/iPodTouch竖屏640x960(Retina)-->
  79. <linkrel="apple-touch-startup-image"sizes="640x1136"rel="nofollow noopener noreferrer" href="/splash-screen-640x1136.png"/>
  80. <!--iPhone5/iPodTouch5竖屏640x1136(Retina)-->
  81. <!--iOS启动画面end-->
  83. <!--iOS设备end-->
  84. <metaname="msapplication-TileColor"content="#000"/>
  85. <!--Windows8磁贴颜色-->
  86. <metaname="msapplication-TileImage"content="icon.png"/>
  87. <!--Windows8磁贴图标-->
  89. <linkrel="alternate"type="application/rss+xml"title="RSS"rel="nofollow noopener noreferrer" href="/rss.xml"/>
  90. <!--添加RSS订阅-->
  91. <linkrel="shortcuticon"type="image/ico"rel="nofollow noopener noreferrer" href="/favicon.ico"/>
  92. <!--添加faviconicon-->
  94. <!--sns社交标签begin-->
  95. <!--参考微博API-->
  96. <metaproperty="og:type"content="类型"/>
  97. <metaproperty="og:url"content="URL地址"/>
  98. <metaproperty="og:title"content="标题"/>
  99. <metaproperty="og:image"content="图片"/>
  100. <metaproperty="og:description"content="描述"/>
  101. <!--sns社交标签end-->
  103. <title>标题</title>
  104. </head>

以上就是实例讲解HTML5的meta标签的一些应用。别老想着取悦别人，你越在乎别人，就越卑微。只有提升自己，取悦自己，并让别人来取悦你，才会令你更有价值。一辈子不长，记住：对自己好点。早安！更多关于实例讲解HTML5的meta标签的一些应用请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章:
标签： meta
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图