石家庄SEO > web开发 > HTML5的meta标签的应用方法(html5,meta,web开发)

HTML5的meta标签的应用方法(html5,meta,web开发)

时间：2024-05-03 06:55:56 作者 : 石家庄SEO 分类 : web开发
  • TAG :
HTML5的meta标签的应用方法

导读：本文共15994.5字符，通常情况下阅读需要53分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。

摘要： HTML 4.01 与 HTML 5 之间meta标签用法的主要差异：在 HTML 5 中，不再支持 scheme 属性。在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。在 HTML 4.01 中，不得不这么写：XML/HTML Code复制内容到剪贴板<metahttp-equiv="content-type&... ...

音频解说

目录

(为您整理了一些要点),点击可以直达。

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"/>

属性
HTML5的meta标签的应用方法

标准属性

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是<ahref="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"href="/apple-touch-icon-57x57-precomposed.png"/>

  58. <!--iPhone和iTouch，默认57x57像素，必须有-->

  59. <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>

  60. <!--RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有-->

  61. <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>

  62. <!--RetinaiPad，144x144像素，可以没有，但推荐有-->

  63. <!--iOS图标end-->

  65. <!--iOS启动画面begin-->

  66. <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>

  67. <!--iPad竖屏768x1004（标准分辨率）-->

  68. <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>

  69. <!--iPad竖屏1536x2008（Retina）-->

  70. <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>

  71. <!--iPad横屏1024x748（标准分辨率）-->

  72. <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>

  73. <!--iPad横屏2048x1496（Retina）-->

  75. <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>

  76. <!--iPhone/iPodTouch竖屏320x480(标准分辨率)-->

  77. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>

  78. <!--iPhone/iPodTouch竖屏640x960(Retina)-->

  79. <linkrel="apple-touch-startup-image"sizes="640x1136"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"href="/rss.xml"/>

  90. <!--添加RSS订阅-->

  91. <linkrel="shortcuticon"type="image/ico"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>

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文：HTML5的meta标签的应用方法的详细内容，希望对您有所帮助，信息来源于网络。
上一篇：Linux系统如何配置sudo下一篇：

7 人围观 / 0 条评论 ↓快速评论↓

（必须）

（必须，保密）

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Emlog pro 2.3.2 Designed by Qixn

Copyright © 2009 - 2021 石家庄SEO www.seosjz.com . All Rights Reserved. 冀ICP备18021945号-1
页面执行时间: 7.5 毫秒