HT ML 4.01 与 html 5 之间meta标签用法的主要差异：
在 HTML 5 中，不再支持 scheme 属性。
在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。
在 HTML 4.01 中，不得不这么写：
XM L/HTML Code @H_ 304 _14@复制内容到剪贴板
< meta &nbs p; http-equiv = "content -t y PE " content = "text/html; charset=ISO-8859-1" >
在 HTML 5 中，这样就够了：
XML/HTML Code 复制内容到剪贴板
< meta charset = "ISO-8859-1" >
例子
定义针对搜索引擎的关键词：
XML/HTML Code 复制内容到剪贴板
< meta n am e = "keywo rds " content = "HTML, CSS, XML, XHTML, JavaScript" />
定义对页面的描述：
XML/HTML Code 复制内容到剪贴板
< meta name = "description" content = "免费的 web 技 术 教程。" />
定义页面的最新版本：
XML/HTML Code 复制内容到剪贴板
< meta name = " rev ised" content = "David, 2008/8/8/" />
每 5 秒刷新一次页面：
XML/HTML Code 复制内容到剪贴板
< meta http-equiv = "refresh" content = "5" />
属性
标准属性
class, contented IT able, contextmenu, dir, Drag gable, 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, onkey Press , onkeyup, onload, onmessage, onmousedown, onmou SEM ove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, ons ub mit, onunload如需完整的描述，请访问 HTML 5 中事件属性。
实例
文档描述
XML/HTML Code 复制内容到剪贴板
< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" /> < meta name = "author" content = "w3school .COM .cn" > < meta name = "revised" content = "David Yang,8/1/07" > < meta name = "generator" content = "Dreamweaver 8.0en" > </ head > < body > < p > 本文档的 ;m eta 属性标识了创作者和编辑软件。 </ p > </ body > </ html >
Meta 元素中的信息可以描述 HTML 文档。
文档关键字
XML/HTML Code 复制内容到剪贴板
< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" /> < meta name = "description" content = "HTML examples" > < meta name = "keywords" content = "HTML, DHTML, CSS, XML, XHTML, JavaScript, vb Script" > </ head > < body > < p > 本文档的 meta 属性描述了该文档和它的关键词。 </ p > </ body > </ html >
Meta 元素中的信息可以描述文档的关键词。
重定向
XML/HTML Code 复制内容到剪贴板
< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" /> < meta http-equiv = "Refresh" content = "5;url=http://www.w3school.com.cn" > </ head > < body > < p > 对不起。我们已经搬家了。您的 URL 是 < a hr ef = "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 复制内容到剪贴板
<!DOCTYPE html > <!-- 使用 HTML5 doctype，不区分大小写 --> < html lang = "zh-cmn-Hans" > <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> < head > <!-- 声明文档使用的字符编码 --> < meta charset = 'utf-8' > <!-- 优先使用 IE 最新版本和 Ch rom e --> < meta http-equiv = "X-UA-Compatible" content = "IE= Edge ,chrome=1" /> <!-- 页面描述 --> < meta name = "description" content = "不超过15 0个 字符" /> <!-- 页面关键词 --> < meta name = "keywords" content = "" /> <!-- 网页作者 --> < meta name = "author" content = "name, em ai l@gmail.com" /> <!-- 搜索引擎抓取 --> < meta name = "robots" content = "index,follow" /> <!-- 为移动设备添加 viewport --> < meta name = "viewport" content = "initial -s cale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" > <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http:// Big c.at/ios-webapp-viewport-meta.orz --> <!-- iOS 设备 be gin --> < meta name = "apple- mobile -web-app-title" content = "标题" > <!-- 添加到主屏后的标题（iOS 6 新增） --> < meta name = "apple-mobile-web-app-capable" content = "yes" /> <!-- 是否 启用 WebApp 全屏模式，删除 苹果 默认的工具栏和菜单栏 --> < meta name = "apple -i tunes-app" content = "app-id=my AppStore ID, affiliate-data=myAffiliateData, app- argument =myURL" > <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> < meta name = "apple-mobile-web-app- stat us-bar-style" content = "black" /> <!-- 设置苹果工具栏颜色 --> < meta name = "format- detect ion" content = "telphone=no, email=no" /> <!-- 忽略页面中的数字识别为 电 话，忽略email识别 --> <!-- 启用 360浏览器 的极速模式(webkit) --> < meta name = "renderer" content = "webkit" > <!-- 避免IE使用兼容模式 --> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <!-- 不让 百度 转码 --> < meta http-equiv = "Cache-Control" content = "no-siteapp" /> <!-- 针 对手 持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> < meta name = "Handhel DF riendly" content = "true" > <!-- 微软 的老式浏览器 --> < meta name = "MobileOptimized" content = "320" > <!-- uc强制竖屏 --> < meta name = "screen- orientation " content = "portrait" > <!-- QQ 强制竖屏 --> < meta name = "x5-orientation" content = "portrait" > <!-- UC强制全屏 --> < meta name = "full-screen" content = "yes" > <!-- QQ强制全屏 --> < meta name = "x5-fullscreen" content = "true" > <!-- UC应用模式 --> < meta name = " br owsermode" content = "application" > <!-- QQ应用模式 --> < meta name = "x5-page-mode" content = "app" > <!-- windows phone 点击无高光 --> < meta name = "msapplication-tap-highlight" content = "no" > <!-- iOS 图标 begin --> < link rel = "apple-touch-icon- PR ecomposed" href = "/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> < link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> < link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <!-- iOS 图标 end --> <!-- iOS 启动画面 begin --> < link rel = "apple-touch-startup-image" sizes = "768 X10 04" href = "/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --> < link rel = "apple-touch-startup-image" sizes = "1536x2008" href = "/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --> < link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --> < link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --> < link rel = "apple-touch-startup-image" href = "/splash-screen-320x480.png" /> <!-- iPhone/ IPO d Touch 竖屏 320x480 (标准分辨率) --> < link rel = "apple-touch-startup-image" sizes = "640x960" href = "/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> < link rel = "apple-touch-startup-image" sizes = "640x1136" href = "/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> <!-- iOS 启动画面 end --> <!-- iOS 设备 end --> < meta name = "msapplication-TileColor" content = " # 000" /> <!-- Windows 8 磁贴颜色 --> < meta name = "msapplication-Til ei mage" content = "icon.png" /> <!-- Windows 8 磁贴图标 --> < link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "/rss.xml" /> <!-- 添加 RSS 订阅 --> < link rel = "shortcut icon" type = "image/ico" href = "/favicon.ico" /> <!-- 添加 favicon icon --> <!-- sns 社交标签 begin --> <!-- 参考 微博 API --> < meta property = "og:type" content = "类型" /> < meta property = "og:url" content = " url地址 " /> < meta property = "og:title" content = "标题" /> < meta property = "og:image" content = "图片" /> < meta property = "og:description" content = "描述" /> <!-- sns 社交标签 end --> < title > 标题 </ title > </ head >
总结
以上是 为你收集整理的 实例讲解HTML5的meta标签的一些应用 全部内容，希望文章能够帮你解决 实例讲解HTML5的meta标签的一些应用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于实例讲解HTML5的meta标签的一些应用的详细内容...