HTML5中meta特性的应用方式

日期：2021-01-19 类型：科技新闻 

关键词：如何制作微信小游戏，微信游戏小程序，公众号游戏，h5小游戏模板，小程序游戏源码

meta特性在HTML中占有了很关键的部位。如：对于检索模块的SEO，文本文档的标识符编号，设定更新缓存文件等。尽管1些网页页面将会沒有应用meta，可是做为正规军，大家還是必须掌握1些meta的特性，而且可以娴熟应用它们。

1、申明文本文档应用的标识符编号

XML/HTML Code拷贝內容到剪贴板
  1. <meta charset='utf⑻'>  
  2.   

2、申明文本文档的适配方式

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 标示IE以现阶段能用的最高方式显示信息內容   
  2. <meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />标示IE应用 <!DOCTYPE> 命令明确怎样展现內容。规范方式命令以IE7 规范方式显示信息，而 Quirks 方式命令以 IE5 方式显示信息。   
  3.   

3、SEO 提升

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="description" content="不超出150个标识符" />网页页面叙述   
  2. <meta name="keywords" content="html5, css3, 重要字"/>网页页面重要词   
  3. <meta name="author" content="魔法小栈" />界定网页页面作者   
  4. <meta name="robots" content="index,follow" />界定网页页面检索模块数据库索引方法，robotterms是1组应用英文逗号「,」切分的值，一般有以下几种赋值：none，noindex，nofollow，all，index和follow。   
  5.   

4、为挪动机器设备加上 viewport

XML/HTML Code拷贝內容到剪贴板
  1. <meta name ="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.     height            viewport 高宽比(标值/device-height)   
  5.     initial-scale  原始放缩占比   
  6.     maximum-scale  最大放缩占比   
  7.     minimum-scale  最少放缩占比   
  8.     user-scalable  是不是容许客户放缩(yes/no)   
  9.     minimal-ui      iOS 7.1 beta 2 中新增特性，能够在网页页面载入时最少化左右情况栏。这是1个布尔运算值，能够立即这样写：   
  10. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">  
  11.   

5、iOS 机器设备

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="apple-mobile-web-app-title" content="题目">加上到主屏后的题目（iOS 6 新增）   
  2. <meta name="apple-mobile-web-app-capable" content="yes" />是不是开启 WebApp 全屏方式   
  3. <meta name="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 ,网页页面內容填满全部显示屏，顶部会被情况栏遮挡。   
  11.   

6、iOS 标志 rel 主要参数

XML/HTML Code拷贝內容到剪贴板
  1. apple-touch-icon 照片全自动解决成圆角和高光等实际效果。   
  2. apple-touch-icon-precomposed 严禁系统软件全自动加上实际效果，立即显示信息设计方案原图。   
  3. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon⑸7x57-precomposed.png" />iPhone 和 iTouch，默认设置 57x57 像素，务必有   
  4. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon⑺2x72-precomposed.png" />iPad，72x72 像素，能够沒有，但强烈推荐有   
  5. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon⑴14x114-precomposed.png" />Retina iPhone 和 Retina iTouch，114x114 像素，能够沒有，但强烈推荐有   
  6. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon⑴44x144-precomposed.png" />Retina iPad，144x144 像素，能够沒有，强烈推荐大伙儿应用   
  7. <meta name="apple-mobile-web-app-title" content="题目">title最好是限定在6个汉语长度内，较长的內容会被掩藏，加上到主屏后的题目（iOS 6 新增）   
  8.   

7、iOS 起动画面

XML/HTML Code拷贝內容到剪贴板
  1. iPad 的起动画面是不包含情况栏地区的。   
  2. iPad 竖屏 768 x 1004（规范辨别率）   
  3. <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen⑺68x1004.png" />iPad 竖屏 1536x2008（Retina）   
  4. <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen⑴536x2008.png" />iPad 横屏 1024x748（规范辨别率）   
  5. <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait⑴024x748.png" />iPad 横屏 2048x1496（Retina）   
  6. <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen⑵048x1496.png" />  
  7. iPhone 和 iPod touch 的起动画面是包括情况栏地区的。   
  8. iPhone/iPod Touch 竖屏 320x480 (规范辨别率)   
  9. <link rel="apple-touch-startup-image" href="/splash-screen⑶20x480.png" />iPhone/iPod Touch 竖屏 640x960 (Retina)   
  10. <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen⑹40x960.png" />iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)   
  11. <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen⑹40x1136.png" />  
  12. <link rel="apple-touch-startup-image" href="Startup.png" />  当客户点一下主屏标志开启 WebApp 时，系统软件展会示起动画面，在未设定状况下系统软件会默认设置显示信息该网站的主页截图，自然这个人验并不是很好   
  13.   

8、Windows 8

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="msapplication-TileColor" content="#000"/> Windows 8 磁贴色调   
  2. <meta name="msapplication-TileImage" content="icon.png"/>Windows 8 磁贴标志   
  3.   

9、不常见的

XML/HTML Code拷贝內容到剪贴板
  1. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />加上 RSS 定阅   
  2. <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />加上 favicon icon   
  3. <meta name="format-detection" content="telephone=no" />严禁数据识全自动别为电話号码   
  4. <meta name="format-detection" content="email=no" />不让android鉴别电子邮箱   
  5. <meta name="renderer" content="webkit">开启360访问器的极速方式(webkit)   
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">防止IE应用适配方式   
  7. <meta name="HandheldFriendly" content="true">对于手持机器设备提升，关键是对于1些老的不鉴别viewport的访问器，例如黑莓   
  8. <meta name="MobileOptimized" content="320">微软的旧式访问器   
  9. <meta name="x5-orientation" content="portrait">QQ强制性竖屏   
  10. <meta name="full-screen" content="yes">UC强制性全屏   
  11. <meta name="x5-fullscreen" content="true">QQ强制性全屏   
  12. <meta name="browsermode" content="application">UC运用方式   
  13. <meta name="x5-page-mode" content="app">QQ运用方式   
  14. <meta http-equiv="Cache-Control" content="no-siteapp" />严禁百度搜索转码   
  15. <meta name="msapplication-tap-highlight" content="no">windows phone 点一下无高光   
  16. <meta name="keywords" content="" />  重要字   
  17. <meta name="description" content="" />  叙述   
  18. <meta name="title" content="" />  题目   
  19. <meta name="author" content="-06" />  作者   
  20. <meta name="Copyright" content="" />  企业   
  21. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   让IE访问器用最高级别核心3D渲染网页页面 也有用 Chrome 架构的网页页面用webkit 核心    
  22. <meta name="apple-mobile-web-app-capable" content="yes">  IOS6全屏   
  23. <meta name="mobile-web-app-capable" content="yes">  Chrome高版本号全屏   
  24. <meta name="renderer" content="webkit">  让360双核访问器用webkit核心3D渲染网页页面   
  25. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 加上智能化 App 广告宣传条 Smart App Banner（iOS 6+ Safari）   
  26.   

10、sns 社交媒体标识

XML/HTML Code拷贝內容到剪贴板
  1. <meta property="og:type" content="种类" />  
  2. <meta property="og:url" content="URL详细地址" />  
  3. <meta property="og:title" content="题目" />  
  4. <meta property="og:image" content="照片" />  
  5. <meta property="og:description" content="叙述" />  
  6.   

11、标准注解分辨IE访问器

XML/HTML Code拷贝內容到剪贴板
  1. <!--[if IE]>标准注解区别非IE访问器   
  2. <!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]-->     
  3. <!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]-->     
  4. <!--[if IE 8 ]><html class="ie ie8"> <![endif]-->     
  5. <!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->    
  6.   

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助。
<!--[if lt IE 9]>  <![endif]-->

上一篇：手机微信小手机游戏开发设计应怎样做好logo设计 返回下一篇：没有了