search

Home  >  Article  >  Web Front-end  >  Examples to explain some applications of HTML5 meta tags _html5 tutorial skills

Examples to explain some applications of HTML5 meta tags _html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:46:071912browse

Main differences in meta tag usage between HTML 4.01 and HTML 5:

In HTML 5, the scheme attribute is no longer supported.

In HTML 5, there is a new charset attribute that makes character set definition easier.

In HTML 4.01, you have to write:

XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="content-type " content="text/html; charset=ISO-8859-1">

In HTML 5, this is enough:

XML/HTML CodeCopy content to clipboard
  1. <meta charset="ISO-8859-1 "> 

Example

Define keywords for search engines:

XML/HTML CodeCopy content to clipboard
  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

Define the description of the page:

XML/HTML CodeCopy content to clipboard
  1. <meta name="description" content="Free web technology tutorial." />

The latest version of the definition page:

XML/HTML CodeCopy content to clipboard
  1. <meta name="revised" content="David, 2008/8/8/" />

Refresh the page every 5 seconds:

XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="refresh" content="5" />

Attributes
2015128114639927.png (639×396)

Standard Properties

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title For a complete description, please visit Standard Properties in HTML 5.

Event Properties

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. For a complete description, please visit the event attributes in HTML 5.

Example

Document Description

XML/HTML CodeCopy content to clipboard
  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>The meta attribute of this document identifies the author and editing software. p>
  10. body>
  11. html>
The information in the

Meta element describes the HTML document.

Document Keywords

XML/HTML CodeCopy content to clipboard
  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. <head>
  4.  <meta charset='utf- 8'> 
    6. " X-ua-compatible "
  6. Content = " IE = Edge, Chrome = 1 "/& gt;  <meta
  7. name="description"
  8. content="No more than 150 characters"/>  <meta
  9. name="keywords"
  10. content=""/>  <meta
  11. name="author"
  12. content="name, email@gmail.com"/>  <meta
  13. name="robots"
  14. content="index,follow"/>
  15.  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no "> 
  19.  <meta name="apple- mobile-web-app-title" content="title">
  21.  <meta name="apple- mobile-web-app-capable" content="yes"/>
  24.  <meta name="apple- itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
  26.  <meta name="apple- mobile-web-app-status-bar-style" content="black"/>
  28.  <meta name="format- detection" content="telphone=no, email=no"/>
  31.  <meta name="renderer" content="webkit">
    33. " " >
  33. " Cache-Control" content="no-siteapp" />
    35.  
  35. <meta name="HandheldFriendly" content="true">
  36.  
    37. <
  37. meta name="MobileOptimized" content="320">
  38.  
    39. <
  39. meta name="screen- orientation" content="portrait">
  40.  
    41. <
  41. meta name="x5- orientation" content="portrait">
  42.  
    43. <
  43. meta name="full- screen" content="yes">
  45.  <meta name="x5- fullscreen" content="true">
  47.  <meta name="browsermode" content="application">
  49.  <meta name="x5- page-mode" content="app">
  51.  <meta name="msapplication- tap-highlight" content="no">
  53.  <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> 
  55.  <link rel="apple- touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60.  <link rel="apple- touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  62.  <link rel="apple- touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  64.  <link rel="apple- touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  66.  <link rel="apple- touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  69.  <link rel="apple- touch-startup-image" href="/splash-screen-320x480.png"/> ;
  71.  <link rel="apple- touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> 
  73.  <link rel="apple- touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> 
  74.  
  78.  <meta name="msapplication- TileColor" content="#000"/>
  80.  <meta name="msapplication- TileImage" content="icon.png"/>
  83.  <link rel="alternate" type="application/rss xml" title="RSS" href="/rss.xml"/ >
  85.  <link rel="shortcut icon " type="image/ico" href="/favicon.ico"/>
  90.  <meta property="og: type" content="type" />
  91.  <meta property="og: url" content="URL address" />
  92.  <meta property="og: title" content="title" />
  93.  <meta property="og: image" content="image" />
  94.  <meta property="og: description" content="description" />
  97.  <title>titletitle>
  98. head>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Html5 implements QR code scanning and parsing _html5 tutorial skillsNext article：Html5 implements QR code scanning and parsing _html5 tutorial skills

Related articles

See more