HTML5中meta属性的如何使用方法

网络
每一天的生活，不再为一点小事悲痛动怒，会安安心心，简简单单，做一些能让自己开心的事。不要过分在意一些人，过分在乎一些事，顺其自然，以最佳的心态应对。

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。

1、声明文档使用的字符编码

XML/HTML Code复制内容到剪贴板
  1. <metacharset='utf-8'>

2、声明文档的兼容模式

XML/HTML Code复制内容到剪贴板
  1. <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>指示IE以目前可用的最高模式显示内容
  2. <metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>指示IE使用<!DOCTYPE>指令确定如何呈现内容。标准模式指令以IE7标准模式显示，而Quirks模式指令以IE5模式显示。

3、SEO 优化

XML/HTML Code复制内容到剪贴板
  1. <metaname="description"content="不超过150个字符"/>页面描述
  2. <metaname="keywords"content="html5,css3,关键字"/>页面关键词
  3. <metaname="author"content="魔法小栈"/>定义网页作者
  4. <metaname="robots"content="index,follow"/>定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

4、为移动设备添加 viewport

XML/HTML Code复制内容到剪贴板
  1. <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  2. content参数解释：
  3. width　　　　viewport宽度(数值/device-width)
  4. heightviewport高度(数值/device-height)
  5. initial-scale初始缩放比例
  6. maximum-scale最大缩放比例
  7. minimum-scale最小缩放比例
  8. user-scalable是否允许用户缩放(yes/no)
  9. minimal-uiiOS7.1beta2中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
  10. <metaname="viewport"content="width=device-width,initial-scale=1,minimal-ui">

5、iOS 设备

XML/HTML Code复制内容到剪贴板
  1. <metaname="apple-mobile-web-app-title"content="标题">添加到主屏后的标题（iOS6新增）
  2. <metaname="apple-mobile-web-app-capable"content="yes"/>是否启用WebApp全屏模式
  3. <metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/>设置状态栏的背景颜色
  4. 只有在"apple-mobile-web-app-capable"content="yes"时生效
  5. content参数：
  6. default默认值。
  7. black状态栏背景是黑色。
  8. black-translucent状态栏背景是黑色半透明。
  9. 设置为default或black,网页内容从状态栏底部开始。
  10. 设置为black-translucent,网页内容充满整个屏幕，顶部会被状态栏遮挡。

6、iOS 图标 rel 参数

XML/HTML Code复制内容到剪贴板
  1. apple-touch-icon图片自动处理成圆角和高光等效果。
  2. apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图。
  3. <linkrel="apple-touch-icon-precomposed"rel="nofollow noopener noreferrer" href="/apple-touch-icon-57x57-precomposed.png"/>iPhone和iTouch，默认57x57像素，必须有
  4. <linkrel="apple-touch-icon-precomposed"sizes="72x72"rel="nofollow noopener noreferrer" href="/apple-touch-icon-72x72-precomposed.png"/>iPad，72x72像素，可以没有，但推荐有
  5. <linkrel="apple-touch-icon-precomposed"sizes="114x114"rel="nofollow noopener noreferrer" href="/apple-touch-icon-114x114-precomposed.png"/>RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有
  6. <linkrel="apple-touch-icon-precomposed"sizes="144x144"rel="nofollow noopener noreferrer" href="/apple-touch-icon-144x144-precomposed.png"/>RetinaiPad，144x144像素，可以没有，推荐大家使用
  7. <metaname="apple-mobile-web-app-title"content="标题">title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS6新增）

7、iOS 启动画面

XML/HTML Code复制内容到剪贴板
  1. iPad的启动画面是不包括状态栏区域的。
  2. iPad竖屏768x1004（标准分辨率）
  3. <linkrel="apple-touch-startup-image"sizes="768x1004"rel="nofollow noopener noreferrer" href="/splash-screen-768x1004.png"/>iPad竖屏1536x2008（Retina）
  4. <linkrel="apple-touch-startup-image"sizes="1536x2008"rel="nofollow noopener noreferrer" href="/splash-screen-1536x2008.png"/>iPad横屏1024x748（标准分辨率）
  5. <linkrel="apple-touch-startup-image"sizes="1024x748"rel="nofollow noopener noreferrer" href="/Default-Portrait-1024x748.png"/>iPad横屏2048x1496（Retina）
  6. <linkrel="apple-touch-startup-image"sizes="2048x1496"rel="nofollow noopener noreferrer" href="/splash-screen-2048x1496.png"/>
  7. iPhone和iPodtouch的启动画面是包含状态栏区域的。
  8. iPhone/iPodTouch竖屏320x480(标准分辨率)
  9. <linkrel="apple-touch-startup-image"rel="nofollow noopener noreferrer" href="/splash-screen-320x480.png"/>iPhone/iPodTouch竖屏640x960(Retina)
  10. <linkrel="apple-touch-startup-image"sizes="640x960"rel="nofollow noopener noreferrer" href="/splash-screen-640x960.png"/>iPhone5/iPodTouch5竖屏640x1136(Retina)
  11. <linkrel="apple-touch-startup-image"sizes="640x1136"rel="nofollow noopener noreferrer" href="/splash-screen-640x1136.png"/>
  12. <linkrel="apple-touch-startup-image"rel="nofollow noopener noreferrer" href="Startup.png"/>当用户点击主屏图标打开WebApp时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好

8、Windows 8

XML/HTML Code复制内容到剪贴板
  1. <metaname="msapplication-TileColor"content="#000"/>Windows8磁贴颜色
  2. <metaname="msapplication-TileImage"content="icon.png"/>Windows8磁贴图标

9、不常用的

XML/HTML Code复制内容到剪贴板
  1. <linkrel="alternate"type="application/rss+xml"title="RSS"rel="nofollow noopener noreferrer" href="/rss.xml"/>添加RSS订阅
  2. <linkrel="shortcuticon"type="image/ico"rel="nofollow noopener noreferrer" href="/favicon.ico"/>添加faviconicon
  3. <metaname="format-detection"content="telephone=no"/>禁止数字识自动别为电话号码
  4. <metaname="format-detection"content="email=no"/>不让android识别邮箱
  5. <metaname="renderer"content="webkit">启用360浏览器的极速模式(webkit)
  6. <metahttp-equiv="X-UA-Compatible"content="IE=edge">避免IE使用兼容模式
  7. <metaname="HandheldFriendly"content="true">针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
  8. <metaname="MobileOptimized"content="320">微软的老式浏览器
  9. <metaname="x5-orientation"content="portrait">QQ强制竖屏
  10. <metaname="full-screen"content="yes">UC强制全屏
  11. <metaname="x5-fullscreen"content="true">QQ强制全屏
  12. <metaname="browsermode"content="application">UC应用模式
  13. <metaname="x5-page-mode"content="app">QQ应用模式
  14. <metahttp-equiv="Cache-Control"content="no-siteapp"/>禁止百度转码
  15. <metaname="msapplication-tap-highlight"content="no">windowsphone点击无高光
  16. <metaname="keywords"content=""/>关键字
  17. <metaname="description"content=""/>描述
  18. <metaname="title"content=""/>标题
  19. <metaname="author"content="-06"/>作者
  20. <metaname="Copyright"content=""/>公司
  21. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">让IE浏览器用最高级内核渲染页面还有用Chrome框架的页面用webkit内核
  22. <metaname="apple-mobile-web-app-capable"content="yes">IOS6全屏
  23. <metaname="mobile-web-app-capable"content="yes">Chrome高版本全屏
  24. <metaname="renderer"content="webkit">让360双核浏览器用webkit内核渲染页面
  25. <metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">添加智能App广告条SmartAppBanner（iOS6+Safari）

10、sns 社交标签

XML/HTML Code复制内容到剪贴板
  1. <metaproperty="og:type"content="类型"/>
  2. <metaproperty="og:url"content="URL地址"/>
  3. <metaproperty="og:title"content="标题"/>
  4. <metaproperty="og:image"content="图片"/>
  5. <metaproperty="og:description"content="描述"/>

11、条件注释判断IE浏览器

XML/HTML Code复制内容到剪贴板
  1. <!--[ifIE]>条件注释区分非IE浏览器
  2. <!--[ifltIE7]><htmlclass="oldieieie6"><![endif]-->
  3. <!--[ifIE7]><htmlclass="oldieieie7"><![endif]-->
  4. <!--[ifIE8]><htmlclass="ieie8"><![endif]-->
  5. <!--[if(gteIE9)|!(IE)]><!--><html><!--<![endif]-->

以上就是本文的全部内容，希望对大家的学习有所帮助。
<!--[if lt IE 9]> <![endif]-->

您可能有感兴趣的文章
浅析HTML5 meta viewport参数
HTML中meta标签及Keywords
HTML5各种头部meta标签的功能(推荐)
H5 meta小结(前端必看篇)
实例讲解HTML5的meta标签的一些应用