meta属性在HT ML 中占据了很 重要 的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使 用M eta，但是作为正规军，我们还是有必要 了解 一些meta的属性，并且能够熟练使用它们。
1、声明文档使用的字符编码
XM L/HTML Code 复制内容到剪贴板
< meta &nbs p; charset = 'utf-8' >
2、声明文档的兼容模式
XML/HTML Code 复制内容到剪贴板
< meta http-equiv = "X-UA-Compatible" content = "IE= Edge " /> 指示IE以目前可用的最高模式显示内容 < meta http-equiv = "X-UA-Compatible" content = "IE=Emulate IE7" /> 指示IE使用 <!DOCTY PE > 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。
3、SEO 优化
XML/HTML Code 复制内容到剪贴板
< meta n am e = "description" content = "不超过15 0个 字符" /> 页面描述 < meta name = "keywo rds " content = "html5, css3, 关键字" /> 页面关键词 < meta name = "author" content = "魔法小栈" /> 定义网页作者 < meta name = "robots" content = "index,follow" /> 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下 几种 取值：none，noindex，nofollow，all，index和follow。
4、为移动设备添加 viewport
XML/HTML Code 复制内容到剪贴板
< meta name = "viewport" content = "width=device-width, in IT ial -s cale=1, ;m aximum-scale=1, minimum-scale=1, user-scalable=no" > content 参数解释： width viewport 宽 度(数值/device-width) h ei ght viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否 允许用户缩放(yes/no) minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： < meta name = "viewport" content = "width=device-width, initial-scale=1, minimal-ui" >
5、iOS 设备
XML/HTML Code 复制内容到剪贴板
< meta name = "apple- mobile -web-app -t itle" content = "标题" > 添加到主屏后的标题（iOS 6 新增） < meta name = "apple-mobile-web-app-capable" content = "yes" /> 是否启用 WebApp 全屏模式 < meta name = "apple-mobile-web-app- stat us-bar-style" content = "black-translucent" /> 设置状态栏的 背景颜色 只有在 "apple-mobile-web-app-capable" content = "yes" 时 生效 content 参数： default 默认值。 black 状态栏背景是黑色。 black-translucent 状态栏背景是黑色 半 透明。 设置为 default 或 black , 网页内容 从状态栏底部 开始 。 设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
6、iOS 图标 rel 参数
XML/HTML Code @H_443_ 512 @复制内容到剪贴板
apple-touch -i con 图片自动处理成 圆 角和高光等效果。 apple-touch-icon- PR ecomposed 禁止系统自动添加效果，直接显示设计原图。 < link rel = "apple-touch-icon-precomposed" hr ef = "/apple-touch-icon-57x57-precomposed.png" /> iPhone 和 iTouch，默认 57x57 像素，必须有 < link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "/apple-touch-icon-72x72-precomposed.png" /> iPad，72x72 像素，可以没有，但推荐有 < 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 像素，可以没有，推荐大家使用 < meta name = "apple-mobile-web-app-title" content = "标题" > title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增）
7、iOS 启动画面
XML/HTML Code 复制内容到剪贴板
iPad 的启动画面是不包括状态栏区域的。 iPad 竖屏 768 x 1004（标准分辨率） < link rel = "apple-touch-startup-image" sizes = "768 X10 04" href = "/splash-screen-768x1004.png" /> iPad 竖屏 1536x2008（Retina） < link rel = "apple-touch-startup-image" sizes = "1536x2008" href = "/splash-screen-1536x2008.png" /> iPad 横屏 1024x748（标准分辨率） < link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/Default-Portr ai t-1024x748.png" /> iPad 横屏 2048x1496（Retina） < link rel = "apple-touch-startup-image" sizes = "2048x1496" href = "/splash-screen-2048x1496.png" /> iPhone 和 IPO d touch 的启动画面是包含状态栏区域的。 iPhone/iPod Touch 竖屏 320x480 (标准分辨率) < link rel = "apple-touch-startup-image" href = "/splash-screen-320x480.png" /> iPhone/iPod Touch 竖屏 640x960 (Retina) < link rel = "apple-touch-startup-image" sizes = "640x960" href = "/splash-screen-640x960.png" /> iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) < link rel = "apple-touch-startup-image" sizes = "640x1136" href = "/splash-screen-640x1136.png" /> < link rel = "apple-touch-startup-image" href = "Startup.png" /> 当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好
8、Windows 8
XML/HTML Code 复制内容到剪贴板
< meta name = "msapplication-TileColor" content = " # 000" /> Windows 8 磁贴颜色 < meta name = "msapplication-TileImage" content = "icon.png" /> Windows 8 磁贴图标
9、不常用的
XML/HTML Code 复制内容到剪贴板
< 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 < meta name = "format- detect ion" content = "telephone=no" /> 禁止数字识自动别为 电 话号码 < meta name = "format-detection" content = "email=no" /> 不让and ROI d识别邮箱 < meta name = "renderer" content = " webkit " > 启用 360浏览器 的极速模式(webkit) < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > 避免IE使用兼容模式 < meta name = "Handhel DF riendly" content = "true" > 针 对手 持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 < meta name = "MobileOptimized" content = "320" > 微软 的老式浏览器 < meta name = "x5- orientation " content = "portrait" > QQ 强制竖屏 < meta name = "full-screen" content = "yes" > UC强制全屏 < meta name = "x5-fullscreen" content = "true" > QQ强制全屏 < meta name = " br owsermode" content = "application" > UC应用模式 < meta name = "x5-page-mode" content = "app" > QQ应用模式 < meta http-equiv = "Cache-Control" content = "no-siteapp" /> 禁止 百度 转码 < meta name = "msapplication-tap-highlight" content = "no" > windows phone 点击无高光 < meta name = "keywords" content = "" /> 关键字 < meta name = "description" content = "" /> 描述 < meta name = "title" content = "" /> 标题 < meta name = "author" content = "-06" /> 作者 < meta name = "Copyright" content = "" /> 公司 < meta http-equiv = "X-UA-Compatible" content = "IE=edge,ch rom e=1" > 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核 < meta name = "apple-mobile-web-app-capable" content = "yes" > IOS6全屏 < meta name = "mobile-web-app-capable" content = "yes" > Chrome高版本全屏 < meta name = "renderer" content = "webkit" > 让 360 双核浏览器用webkit内核渲染页面 < meta name = "apple-itunes-app" content = "app-id=my AppStore ID, affiliate-data=myAffiliateData, app- argument =myURL" > 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
10、sns 社交标签
XML/HTML Code 复制内容到剪贴板
< 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 = "描述" />
11、条件注释判断IE浏览器
XML/HTML Code 复制内容到剪贴板
<!--[if IE] > 条件注释区分非IE浏览器 <!--[if lt IE 7 ]><html class="ol die ie ie6"> <![endif]--> <!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->
以上就是本文的全部内容，希望对大家的学习有所帮助。
<!--[if lt IE 9]> <![endif]-->
总结
以上是 为你收集整理的 HTML5中meta属性的使用方法 全部内容，希望文章能够帮你解决 HTML5中meta属性的使用方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5中meta属性的使用方法的详细内容...