案例解读HTML5的meta标识的1些运用

日期:2021-02-24 类型:科技新闻 

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

HTML 4.01 与 HTML 5 之间meta标识用法的关键差别:

在 HTML 5 中,已不适用 scheme 特性。

在 HTML 5 中,有1个新的 charset 特性,它使标识符集的界定更为非常容易。

在 HTML 4.01 中,迫不得已这么写:

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="content-type" content="text/html; charset=ISO⑻859⑴">  

在 HTML 5 中,这样就够了:

XML/HTML Code拷贝內容到剪贴板
  1. <meta charset="ISO⑻859⑴">  

事例

界定对于检索模块的重要词:

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />  

界定对网页页面的叙述:

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="description" content="完全免费的 web 技术性实例教程。" />  

界定网页页面的全新版本号:

XML/HTML Code拷贝內容到剪贴板
  1. <meta name="revised" content="David, 2008/8/8/" />  

每 5 秒更新1次网页页面:

XML/HTML Code拷贝內容到剪贴板
  1. <meta http-equiv="refresh" content="5" />  

特性

规范特性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title如需详细的叙述,请浏览 HTML 5 中规范特性。

恶性事件特性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload如需详细的叙述,请浏览 HTML 5 中恶性事件特性。

 案例

文本文档叙述

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="author" content="w3school.com.cn">  
  5. <meta name="revised" content="David Yang,8/1/07">  
  6. <meta name="generator" content="Dreamweaver 8.0en">  
  7. </head>  
  8. <body>  
  9. <p>本文本文档的 meta 特性标志了原创者和编写手机软件。</p>  
  10. </body>  
  11. </html>  

Meta 元素中的信息内容能够叙述 HTML 文本文档。

文本文档重要字

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="description" content="HTML examples">  
  5. <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. </head>  
  7. <body>  
  8. <p>本文本文档的 meta 特性叙述了该文本文档和它的重要词。</p>  
  9. </body>  
  10. </html>  

Meta 元素中的信息内容能够叙述文本文档的重要词。

重定项

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">  
  5. </head>  
  6. <body>  
  7. <p>  
  8. 对不起。大家早已搬新家了。您的 URL 是 <a href="http://www.w3school.com.cn"> http://www.w3school.com.cn </a>  
  9. </p>  
  10. <p>您将在 5 秒内被重定项到新的详细地址。</p>  
  11. <p>假如超出 5 秒后您依然看到本信息,请点一下上面的的连接。</p>  
  12. </body>  
  13. </html>  

这个事例演试:在网站地址早已变动的状况下,将客户重定项到此外1个详细地址。

挪动前端开发开发设计中加上1些webkit专属的HTML5头顶部标识,协助访问器更好分析html编码,更好地将挪动web前端开发网页页面主要表现出来。本文梳理1些常见的meta标识。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html> <!-- 应用 HTML5 doctype,不区别尺寸写 -->  
  2. <html lang="zh-cmn-Hans"> <!-- 更为规范的 lang 特性写法 http://zhi.hu/XyIa -->  
  3. <head>  
  4.     <!-- 申明文本文档应用的标识符编号 -->  
  5.     <meta charset='utf⑻'>  
  6.     <!-- 优先选择应用 IE 全新版本号和 Chrome -->  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
  8.     <!-- 网页页面叙述 -->  
  9.     <meta name="description" content="不超出150个标识符"/>  
  10.     <!-- 网页页面重要词 -->  
  11.     <meta name="keywords" content=""/>  
  12.     <!-- 网页页面作者 -->  
  13.     <meta name="author" content="name, email"/>  
  14.     <!-- 检索模块抓取 -->  
  15.     <meta name="robots" content="index,follow"/>  
  16.     <!-- 为挪动机器设备加上 viewport -->  
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">  
  18.     <!-- `width=device-width` 会致使 iPhone 5 加上到主屏后以 WebApp 全屏方式开启网页页面时出現黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->  
  19.     
  20.     <!-- iOS 机器设备 begin -->  
  21.     <meta name="apple-mobile-web-app-title" content="题目">  
  22.     <!-- 加上到主屏后的题目(iOS 6 新增) -->  
  23.     <meta name="apple-mobile-web-app-capable" content="yes"/>  
  24.     <!-- 是不是开启 WebApp 全屏方式,删掉iPhone默认设置的专用工具栏和工具栏 -->  
  25.     
  26.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">  
  27.     <!-- 加上智能化 App 广告宣传条 Smart App Banner(iOS 6+ Safari) -->  
  28.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
  29.     <!-- 设定iPhone专用工具栏色调 -->  
  30.     <meta name="format-detection" content="telphone=no, email=no"/>  
  31.     <!-- 忽视网页页面中的数据鉴别为电話,忽视email鉴别 -->  
  32.     <!-- 开启360访问器的极速方式(webkit) -->  
  33.     <meta name="renderer" content="webkit">  
  34.     <!-- 防止IE应用适配方式 -->  
  35.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  36.     <!-- 不让百度搜索转码 -->  
  37.     <meta http-equiv="Cache-Control" content="no-siteapp" />  
  38.     <!-- 对于手持机器设备提升,关键是对于1些老的不鉴别viewport的访问器,例如黑莓 -->  
  39.     <meta name="HandheldFriendly" content="true">  
  40.     <!-- 微软的旧式访问器 -->  
  41.     <meta name="MobileOptimized" content="320">  
  42.     <!-- uc强制性竖屏 -->  
  43.     <meta name="screen-orientation" content="portrait">  
  44.     <!-- QQ强制性竖屏 -->  
  45.     <meta name="x5-orientation" content="portrait">  
  46.     <!-- UC强制性全屏 -->  
  47.     <meta name="full-screen" content="yes">  
  48.     <!-- QQ强制性全屏 -->  
  49.     <meta name="x5-fullscreen" content="true">  
  50.     <!-- UC运用方式 -->  
  51.     <meta name="browsermode" content="application">  
  52.     <!-- QQ运用方式 -->  
  53.     <meta name="x5-page-mode" content="app">  
  54.     <!-- windows phone 点一下无高光 -->  
  55.     <meta name="msapplication-tap-highlight" content="no">  
  56.     <!-- iOS 标志 begin -->  
  57.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon⑸7x57-precomposed.png"/>  
  58.     <!-- iPhone 和 iTouch,默认设置 57x57 像素,务必有 -->  
  59.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon⑴14x114-precomposed.png"/>  
  60.     <!-- Retina iPhone 和 Retina iTouch,114x114 像素,能够沒有,但强烈推荐有 -->  
  61.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon⑴44x144-precomposed.png"/>  
  62.     <!-- Retina iPad,144x144 像素,能够沒有,但强烈推荐有 -->  
  63.     <!-- iOS 标志 end -->  
  64.     
  65.     <!-- iOS 起动画面 begin -->  
  66.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen⑺68x1004.png"/>  
  67.     <!-- iPad 竖屏 768 x 1004(规范辨别率) -->  
  68.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen⑴536x2008.png"/>  
  69.     <!-- iPad 竖屏 1536x2008(Retina) -->  
  70.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait⑴024x748.png"/>  
  71.     <!-- iPad 横屏 1024x748(规范辨别率) -->  
  72.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen⑵048x1496.png"/>  
  73.     <!-- iPad 横屏 2048x1496(Retina) -->  
  74.     
  75.     <link rel="apple-touch-startup-image" href="/splash-screen⑶20x480.png"/>  
  76.     <!-- iPhone/iPod Touch 竖屏 320x480 (规范辨别率) -->  
  77.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen⑹40x960.png"/>  
  78.     <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->  
  79.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen⑹40x1136.png"/>  
  80.     <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->  
  81.     <!-- iOS 起动画面 end -->  
  82.     
  83.     <!-- iOS 机器设备 end -->  
  84.     <meta name="msapplication-TileColor" content="#000"/>  
  85.     <!-- Windows 8 磁贴色调 -->  
  86.     <meta name="msapplication-TileImage" content="icon.png"/>  
  87.     <!-- Windows 8 磁贴标志 -->  
  88.     
  89.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>  
  90.     <!-- 加上 RSS 定阅 -->  
  91.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>  
  92.     <!-- 加上 favicon icon -->  
  93.   
  94.     <!-- sns 社交媒体标识 begin -->  
  95.     <!-- 参照新浪微博API -->  
  96.     <meta property="og:type" content="种类" />  
  97.     <meta property="og:url" content="URL详细地址" />  
  98.     <meta property="og:title" content="题目" />  
  99.     <meta property="og:image" content="照片" />  
  100.     <meta property="og:description" content="叙述" />  
  101.     <!-- sns 社交媒体标识 end -->  
  102.     
  103.     <title>题目</title>  
  104. </head>