HTML5中meta属性的使用方法
更新时间:2023-04-03 05:44:59 阅读： 评论：0
meta属性在html中占据了很重要的位置。如：针对搜索引擎的o，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。
1、声明文档使用的字符编码
迅雷 无法下载
xml/html code
复制内容到剪贴板
<metachart=‘utf-8’>2、声明文档的兼容模式
xml/html code
复制内容到剪贴板
<metahttp-equiv=“x-ua-compatible”content=“ie=edge”/>指示ie以目前可用的最高模式显示内容 <metahttp-equiv=“x-ua-compatible”content=“ie=emulateie7”/>指示ie使用<!doctype>指令确定如何呈现内容。标准模式指令以ie7标准模式显示，而quirks模式指令以ie5模式显示。 3、o 优化
xml/html code
复制内容到剪贴板
<metaname=“description”content=“不超过150个字符”/>页面描述 <metaname=“keywords”content=“html5,css3,关键字”/>页面关键词 <metaname=“author”content=“魔法小栈”/>定义网页作者 <metaname=“robots”content=“index,follow”/>定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 4、为移动设备添加 viewport
xml/html code
复制内容到剪贴板
<metaname=“viewport”content=“width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,ur-scalable=no”>content参数解释： width viewport宽度(数值/device-width) heightviewport高度(数值/device-height) initial-scale初始缩放比例 maximum-scale最大缩放比例 minimum-scale最小缩放比例 ur-scalable是否允许用户缩放(yes/no) minimal-uiios7.1beta2中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <metaname=“viewport”content=“width=device-width,initial-scale=1,minimal-ui”>5、ios 设备
xml/html code
复制内容到剪贴板
<metaname=“apple-mobile-web-app-title”content=“标题”>添加到主屏后的标题（ios6新增） <metaname=“apple-mobile-web-app-capable”content=“yes”/>是否启用webapp全屏模式 <metaname=“apple-mobile-web-app-status-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
复制内容到剪贴板
apple-touch-icon图片自动处理成圆角和高光等效果。 apple-touch-icon-precompod禁止系统自动添加效果，直接显示设计原图。 <linkrel=“apple-touch-icon-precompod”href=“/apple-touch-icon-57×57-precompod.png”/>iphone和itouch，默认57×57像素，必须有 <linkrel=“apple-touch-icon-precompod”sizes=“72×72”href=“/apple-touch-icon-72×72-precompod.png”/>ipad，72×72像素，可以没有，但推荐有 <linkrel=“apple-touch-icon-precompod”sizes=“114×114”href=“/apple-touch-icon-114×114-precompod.png”/>retinaiphone和retinaitouch，114×114像素，可以没有，但推荐有 <linkrel=“apple-touch-icon-precompod”sizes=“144×144”href=“/apple-touch-icon-144×144-precompod.png”/>retinaipad，144×144像素，可以没有，推荐大家使用 <metaname=“apple-mobile-web-app-title”content=“标题”>title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（ios6新增） 7、ios 启动画面
xml/html code
复制内容到剪贴板
ipad的启动画面是不包括状态栏区域的。 ipad竖屏768x1004（标准分辨率） <linkrel=“apple-touch-startup-image”sizes=“768×1004”href=“/splash-screen-768×1004.png”/>ipad竖屏1536×2008（retina） <linkrel=“apple-touch-startup-image”sizes=“1536×2008”href=“/splash-screen-1536×2008.png”/>ipad横屏1024×748（标准分辨率） <linkrel=“apple-touch-startup-image”sizes=“1024×748”href=“/default-portrait-1024×748.png”/>ipad横屏2048×1496（retina） <linkrel=“apple-touch-startup-image”sizes=“2048×1496”href=“/splash-screen-2048计划打算5;1496.png”/>iphone和ipodtouch的启动画面是包含状态栏区域的。 iphone/ipodtouch竖屏320×480(标准分辨率) <linkrel=“apple-touch-startup-image”href=“/splash-screen-320×480.png”/>iphone/ipodtouch竖屏640×960(retina) <linkrel=“apple-touch-startup-image”sizes=“640×960”href=“/splash-screen-640×960.png”/>iphone5/ipodtouch5竖屏640×1136(retina) <linkrel=“apple-touch-startup-image”sizes=“640×1136”href=“/splash-screen-640×1136.png”/><linkrel=“apple-touch-startup-image”href=“startup.png”/>当用户点击主屏图标打开webapp时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好 8、windows 8
xml/html code
复制内容到剪贴板
<metaname=“msapplication-tilecolor”content=“#000”/>windows8磁贴颜色 <metana爱国成语me=“msapplication-tileimage̶芸豆怎么做好吃1;content=“icon.png”/>windows8磁贴图标 9、不常用的
xml/html code
复制内容到剪贴板
<linkrel=“alternate”type=“application/rss+xml”title=“rss”href=“/rss.xml”/>添加rss订阅 <linkrel=“shortcuticon”type=“image/ico”href=“/favicon.ico”/>添加faviconicon <metaname=“format-detection”content=“telephone=no”/>禁止数字识自动别为电话号码 <metaname=“format-detection”content=“email=no”/>不让android识别邮箱 <metaname=“renderer”content=“webkit”>启用360浏览器的极速模式(webkit) <metahttp-equiv=“x-ua-compatible”content=“ie=edge”>避免ie使用兼容模式 <metaname=“handheldfriendly”content=“true”>针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <metaname=“mobileoptimized”content=“320”>微软的老式浏览器 <metaname=“x5-orientation”content=“portrait”>qq强制竖屏 <metaname=“full-screen”content=“yes”>uc强制全屏 <metaname=“x5-fullscreen”content=“true”>qq强制全屏 <metaname=“browrmode”content=“application”>uc应用模式 <metaname=“x5-page-mode”content=“app”>qq应用模式 <metahttp-equiv=“cache-control”content=“no-siteapp”/>禁止百度转码 <metaname=“msapplication-tap-highlight”content=“no”>windowsphone点击无高光 <metaname=“keywords”content=“”/>关键字 <metaname=“description”content=“”/>描述 <metaname=“title”content=“”/>标题 <metaname=“author”content=“-06”/>作者 <metaname=“copyright”content=“”/>公司 <metahttp-equiv=“x-ua-compatible”content=“ie=edge,chrome=1”>让ie浏览器用最高级内核渲染页面还有用chrome框架的页面用webkit内核 <metaname=“apple-mobile-web-app-capable”content=“yes”>ios6全屏 <metaname=“mobile-web-app-capable”content=“yes”>chrome高版本全屏 <metaname=“renderer”content=“webkit”>让360双核浏览器用webkit内核渲染页面 <metaname=“apple-itunes-app”content=“app-id=myappstoreid,affiliate-data=myaffiliatedata,app-argument=myurl”>添加智能app广告条smartappbanner（ios6+safari） 10、sns 社交标签
xml/html code
复制内容到剪贴板
<metaproperty=“og:type”content=“类型”/><metaproperty=“og:url”content=“url地址”/><metaproperty=“og:title”content=“标题”/><metaproperty=“og:image”content=“图片”/><metaproperty=“og:description”content=“描述”/>11、条件注释判断ie浏览器
xml/html code
复制内容到剪贴板
<!–[ifie]>条件注释区分非ie浏览器 <!–[ifltie7]><htmlclass=”oldieieie6″><![endif]–> <!–[ifie7]><htmlclass=”oldieieie7″><![endif]–> <!–[ifie8]><htmlclass=”ieie8″><![endif]–> <!–[if(gteie9)|!(ie)]><!–><html><!–<![endif]–> 以上就是本文的全部内容，希望对大家的学习有所帮助。
<!–[if lt ie 9]> <![endif]–>
本文word下载地址：HTML5中meta属性的使用方法.doc
本文 PDF 下载地址：HTML5中meta属性的使用方法.pdf
