HTML5中meta属性的使用方法

2020-03-24 17:29:44

字体：大中小

来源：转载

供稿：网友

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码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模式显示。
metaname= description content= 不超过150个字符 / 页面描述 metaname= keywords content= html5,css3,关键字 / 页面关键词 metaname= author content= 魔法小栈 / 定义网页作者 metaname= robots content= index,follow / 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
metaname= viewport content= width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no content参数解释： width viewport宽度(数值/device-width) heightviewport高度(数值/device-height) initial-scale初始缩放比例 maximum-scale最大缩放比例 minimum-scale最小缩放比例 user-scalable是否允许用户缩放(yes/no) minimal-uiiOS7.1beta2中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： metaname= viewport content= width=device-width,initial-scale=1,minimal-ui
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,网页内容充满整个屏幕，顶部会被状态栏遮挡。
apple-touch-icon图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图。 linkrel= apple-touch-icon-precomposed href= /apple-touch-icon-57x57-precomposed.png / iPhone和iTouch，默认57x57像素，必须有 linkrel= apple-touch-icon-precomposed sizes= 72x72 href= /apple-touch-icon-72x72-precomposed.png / iPad，72x72像素，可以没有，但推荐有 linkrel= apple-touch-icon-precomposed sizes= 114x114 href= /apple-touch-icon-114x114-precomposed.png / RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有 linkrel= apple-touch-icon-precomposed sizes= 144x144 href= /apple-touch-icon-144x144-precomposed.png / RetinaiPad，144x144像素，可以没有，推荐大家使用 metaname= apple-mobile-web-app-title content= 标题 title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS6新增）
iPad的启动画面是不包括状态栏区域的。 iPad竖屏768x1004（标准分辨率） linkrel= apple-touch-startup-image sizes= 768x1004 href= /splash-screen-768x1004.png / iPad竖屏1536x2008（Retina） linkrel= apple-touch-startup-image sizes= 1536x2008 href= /splash-screen-1536x2008.png / iPad横屏1024x748（标准分辨率） linkrel= apple-touch-startup-image sizes= 1024x748 href= /Default-Portrait-1024x748.png / iPad横屏2048x1496（Retina） linkrel= apple-touch-startup-image sizes= 2048x1496 href= /splash-screen-2048x1496.png / iPhone和iPodtouch的启动画面是包含状态栏区域的。 iPhone/iPodTouch竖屏320x480(标准分辨率) linkrel= apple-touch-startup-image href= /splash-screen-320x480.png / iPhone/iPodTouch竖屏640x960(Retina) linkrel= apple-touch-startup-image sizes= 640x960 href= /splash-screen-640x960.png / iPhone5/iPodTouch5竖屏640x1136(Retina) linkrel= apple-touch-startup-image sizes= 640x1136 href= /splash-screen-640x1136.png / linkrel= apple-touch-startup-image href= Startup.png / 当用户点击主屏图标打开WebApp时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好
metaname= msapplication-TileColor content= #000 / Windows8磁贴颜色 metaname= msapplication-TileImage content= icon.png / Windows8磁贴图标
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= browsermode 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）
metaproperty= og:type content= 类型 / metaproperty= og:url content= URL地址 / metaproperty= og:title content= 标题 / metaproperty= og:image content= 图片 / metaproperty= og:description content= 描述 /
!--[ifIE] 条件注释区分非IE浏览器 !--[ifltIE7] html >以上就是本文的全部内容，希望对大家的学习有所帮助。
!--[if lt IE 9] ![endif]--html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html按钮怎么设置超链接？html按钮超链接的四种实现方法

下一篇：html标签中param以及embed的有关flash属性详解