recherche

Maison  >  Article  >  interface Web  >  Exemples pour expliquer certaines applications des balises méta HTML5 _ Compétences du didacticiel HTML5

Exemples pour expliquer certaines applications des balises méta HTML5 _ Compétences du didacticiel HTML5

WBOY
WBOYoriginal
2016-05-16 15:46:071914parcourir

Principales différences dans l'utilisation des balises méta entre HTML 4.01 et HTML 5 :

En HTML 5, l'attribut schéma n'est plus pris en charge.

Dans HTML 5, il existe un nouvel attribut charset qui facilite la définition du jeu de caractères.

En HTML 4.01, il faut écrire :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta http-equiv="content-type " contenu="text/html; charset=ISO-8859-1">

En HTML 5, cela suffit :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta charset="ISO-8859-1 "> 

Exemple

Définir des mots-clés pour les moteurs de recherche :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta nom="mots-clés" content="HTML, CSS, XML, XHTML, JavaScript" />

Définir la description de la page :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta nom="description" content="Tutoriel gratuit sur la technologie Web." />

La dernière version de la page de définition :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta nom="révisé" content="David, 2008/8/8/" />

Actualiser la page toutes les 5 secondes :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta http-equiv="rafraîchir" contenu="5" />

Attributs
2015128114639927.png (639×396)

Propriétés standards

class, contenteditable, contextmenu, dir, draggable, id, nonlevant, lang, ref, Registrationmark, tabindex, template, title Pour une description complète, veuillez visiter les propriétés standard en HTML 5.

Propriétés de l'événement

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 Pour une description complète, veuillez visiter les attributs de l'événement en HTML 5.

Exemple

Description du document

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html>
  2. <tête>
  3. <méta http-equiv=" Content-Type" content="text/html; charset=gb2312" />
  4. <méta nom="auteur" contenu="w3school.com.cn">
  5. <méta nom="révisé" content="David Yang, 01/08/07">
  6. <méta nom="générateur" content="Dreamweaver 8.0fr">
  7. tête>
  8. <corps>
  9. <p>L'attribut méta de ce document identifie l'auteur et le logiciel d'édition. p>
  10. corps>
  11. html>
Les informations contenues dans l'élément

Meta décrivent le document HTML.

Mots clés du document

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html>  
  2. <tête>  
  3. <méta http-equiv=" Type de contenu" content="text/html;  charset=gb2312" />  
  4. <méta nom="description"  content="Exemples HTML">  
  5. <méta nom="mots-clés"  content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. tête>  
  7. <corps>  
  8. <p>本文档的 meta 属性描述了该文档和它的关键词。 p>  
  9. corps>  
  10. html>  

Meta 元素中的信息可以描述文档的关键词。

重定向

Code XML/HTML复制内容到剪贴板
  1. <html>  
  2. <tête>  
  3. <méta http-equiv=" Type de contenu" content="text/html;  charset=gb2312" />  
  4. <méta http-equiv=" Actualiser" contenu="5;url=http://www.w3school.com.cn">  
  5. tête>  
  6. <corps>  
  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. corps>  
  13. html>  

这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。

移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。

Code XML/HTML复制内容到剪贴板
  1. >
  2. <tête>
  4.  <meta charset='utf- 8'> 
    6. " Compatible X-ua "
  6. Contenu = " IE = Edge, Chrome = 1 "/& gt; 🎜>  <méta
  7. nom="description"
  8. content="Pas plus de 150 caractères"/>  <méta
  9. nom="mots-clés"
  10. contenu=""/>  <méta
  11. nom="auteur"
  12. contenu="nom, email@gmail.com"/>  <méta
  13. nom="robots"
  14. contenu="indexer, suivre"/>
  15.  <méta nom="portée" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=non "> 
  19.  <méta nom="pomme- mobile-web-app-title" content="titre">
  21.  <méta nom="pomme- compatible avec les applications Web mobiles" contenu="oui"/>
  24.  <méta nom="pomme- itunes-app" content="app-id=myAppStoreID, filiale-data=myAffiliateData, app-argument=myURL"> 
  26.  <méta nom="pomme- mobile-web-app-status-bar-style" content="noir"/>
  28.  <méta nom="format- détection" contenu="telphone=no, email=no"/>
  31.  <méta nom="rendu" contenu="webkit">
    33. " >
  33. "Cache-Control" content="no-siteapp" /> ;
    35.  
  35. <méta nom="HandheldFriendly" contenu="vrai">
  36.  
    37. <
  37. méta nom="MobileOptimized" contenu="320">
  38.  
    39. <
  39. méta nom="écran- orientation" contenu="portrait">
  40.  
    41. <
  41. méta nom="x5- orientation" contenu="portrait">
  42.  
    43. <
  43. méta nom="full- écran" contenu="oui">
  45.  <méta nom="x5- plein écran" contenu="vrai">
  47.  <méta nom="mode navigateur" contenu="application">
  49.  <méta nom="x5- page-mode" content="app">
  51.  <méta nom="msapplication- appuyez sur surbrillance" contenu="non">
  53.  <lien rel="pomme- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> 
  55.  <lien rel="pomme- icône tactile-précomposée" tailles="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60.  <lien rel="pomme- touch-startup-image" tailles="768x1004" href="/splash-screen-768x1004.png"/>
  62.  <lien rel="pomme- touch-startup-image" tailles="1536x2008" href="/splash-screen-1536x2008.png"/>
  64.  <lien rel="pomme- touch-startup-image" tailles="1024x748" href="/Default-Portrait-1024x748.png"/>
  66.  <lien rel="pomme- touch-startup-image" tailles="2048x1496" href="/splash-screen-2048x1496.png"/>
  69.  <lien rel="pomme- touch-startup-image" href="/splash-screen-320x480.png"/> ;
  71.  <lien rel="pomme- touch-startup-image" tailles="640x960" href="/splash-screen-640x960.png"/> 
  73.  <lien rel="pomme- touch-startup-image" tailles="640x1136" href="/splash-screen-640x1136.png"/> 
  74.  
  78.  <méta nom="msapplication- TileColor" content="#000"/>
  80.  <méta nom="msapplication- TileImage" content="icon.png"/>
  83.  <lien rel="alternatif" type="application/rss xml" titre="RSS" href="/rss.xml"/ >
  85.  <link rel="icône de raccourci " type="image/ico" href="/favicon.ico"/>
  90.  <méta propriété="og : tapez" contenu="tapez" />
  91. <メタ プロパティ="og: url" コンテンツ="URL アドレス" />
  92. <メタ プロパティ="og: title" content="title" />
  93. <メタ プロパティ="og:画像" コンテンツ="画像" />
  94. <メタ プロパティ="og:説明" 内容="説明" />
  97. <タイトル>タイトルタイトル>
  98. 頭>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Html5 implémente les compétences du didacticiel _html5 en matière de numérisation et d'analyse de code QRArticle suivant：Html5 implémente les compétences du didacticiel _html5 en matière de numérisation et d'analyse de code QR

Articles Liés

Voir plus