<meta name="keywords" content="华夏棋牌,HTML5,meta" />
华夏棋牌 > web前端 > H5教程 > 注释

实例解说HTML5的meta标签的一些应用 _html5教程手艺

原创 2016-05-16 15:46:07 0 168
赞助会员专享特权
HTML 4.01 与 HTML 5 之间meta标签用法的主要差异:

华夏棋牌在 HTML 5 中,不再支持 scheme 属性。

华夏棋牌在 HTML 5 中,有一个新的 charset 属性,它使字符集的界说加倍容易。

在 HTML 4.01 中,不克不及不这么写:

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

华夏棋牌在 HTML 5 中,这样就够了:

XML/HTML Code复制内容到剪贴板
  1. <meta charset="ISO-8859-1">

例子

界说针对搜索引擎的要害词:

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 秒刷新一次页面:

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv="refresh" content="5" />

属性
2015128114639927.png (639×396)

尺度属性

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, onmou搜索引擎优化ver, onmou搜索引擎优化ut, 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>

这个例子演示:在网址曾经厘革的情形下,将用户重定向到另外一个地址。

华夏棋牌移动前端开发中添加一些webkit专属的HTML5头部标签,赞助浏览器更好剖析html代码,更好地将移动web前端页面体现出来。本文整理一些经常应用的meta标签。

XML/HTML Code复制内容到剪贴板
  1. >
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. <meta name="description" content="不逾越150个字符"/>
  7. <meta name="keywords" content=""/>
  8. <meta name="author" content="name, email@gmail.com"/>
  9. <meta name="robots" content="index,follow"/>
  10. <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  11. <meta name="apple-mobile-web-app-title" content="效果">
  12. <meta name="apple-mobile-web-app-capable" content="yes"/>
  13. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  15. <meta name="format-detection" content="telphone=no, email=no"/>
  16. <meta name="renderer" content="webkit">
  17. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18. <meta http-equiv="Cache-Control" content="no-siteapp" />
  19. <meta name="HandheldFriendly" content="true">
  20. <meta name="MobileOptimized" content="320">
  21. <meta name="screen-orientation" content="portrait">
  22. <meta name="x5-orientation" content="portrait">
  23. <meta name="full-screen" content="yes">
  24. <meta name="x5-fullscreen" content="true">
  25. <meta name="browsermode" content="application">
  26. <meta name="x5-page-mode" content="app">
  27. <meta name="msapplication-tap-highlight" content="no">
  28. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  29. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  30. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  31. <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  32. <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  33. <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  34. <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  35. <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
  36. <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  37. <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  38. <meta name="msapplication-TileColor" content="#000"/>
  39. <meta name="msapplication-TileImage" content="icon.png"/>
  40. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  41. <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  42. <meta property="og:type" content="类型" />
  43. <meta property="og:url" content="URL地址" />
  44. <meta property="og:title" content="效果" />
  45. <meta property="og:image" content="图片" />
  46. <meta property="og:description" content="形貌" />
  47. <title>效果title>
  48. head>
php中文网最新课程二维码
  • 相关标签:HTML5 meta
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • 实例解说HTML5的meta标签的一些应用 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节