suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiele zur Erläuterung einiger Anwendungen von HTML5-Meta-Tags. _HTML5-Tutorial-Fähigkeiten

Beispiele zur Erläuterung einiger Anwendungen von HTML5-Meta-Tags. _HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:071914Durchsuche

Hauptunterschiede in der Meta-Tag-Nutzung zwischen HTML 4.01 und HTML 5:

In HTML 5 wird das Schema-Attribut nicht mehr unterstützt.

In HTML 5 gibt es ein neues charset-Attribut, das die Zeichensatzdefinition vereinfacht.

In HTML 4.01 müssen Sie schreiben:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="content-type " content="text/html; charset=ISO-8859-1">

In HTML 5 reicht das:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta charset="ISO-8859-1 "> 

Beispiel

Schlüsselwörter für Suchmaschinen definieren:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta name="keywords" Inhalt="HTML, CSS, XML, XHTML, JavaScript" />

Definieren Sie die Beschreibung der Seite:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Meta Name="Beschreibung" Inhalt="Kostenloses Web-Technologie-Tutorial." />

Die neueste Version der Definitionsseite:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta Name="überarbeitet" Inhalt="David, 2008/8/8/" />

Aktualisieren Sie die Seite alle 5 Sekunden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="refresh" Inhalt="5" />

Attribute
2015128114639927.png (639×396)

Standardeigenschaften

Klasse, Inhalt editierbar, Kontextmenü, Verzeichnis, ziehbar, ID, irrelevant, Sprache, Referenz, Registrierungsmarke, Tabindex, Vorlage, Titel Eine vollständige Beschreibung finden Sie unter Standardeigenschaften in HTML 5.

Ereigniseigenschaften

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 Eine vollständige Beschreibung finden Sie in den Ereignisattributen in HTML 5.

Beispiel

Dokumentbeschreibung

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html>
  2. <Kopf>
  3. <meta http-equiv=" Content-Type" content="text/html;charset=gb2312" />
  4. <meta Name="Autor" Inhalt="w3school.com.cn">
  5. <meta Name="überarbeitet" Inhalt="David Yang,8/1/07">
  6. <meta name="generator" Inhalt="Dreamweaver 8.0en">
  7. Kopf>
  8. <Körper>
  9. <p>Das Metaattribut dieses Dokuments identifiziert den Autor und die Bearbeitungssoftware. p>
  10. Körper>
  11. html>
Die Informationen im

Meta-Element beschreiben das HTML-Dokument.

Dokumentschlüsselwörter

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html>  
  2. <Kopf>  
  3. <meta http-equiv=" Content-Type" content="text/html;  charset=gb2312" />  
  4. <meta Name="Beschreibung"  Inhalt="HTML-Beispiele">  
  5. <meta name="keywords"  Inhalt="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. Kopf>  
  7. <Körper>  
  8. <p>本文档的 meta 属性描述了该文档和它的关键词. p>  
  9. Körper>  
  10. html>  

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

重定向

XML/HTML-Code复制内容到剪贴板
  1. <html>  
  2. <Kopf>  
  3. <meta http-equiv=" Content-Type" content="text/html;  charset=gb2312" />  
  4. <meta http-equiv=" Aktualisieren" Inhalt="5;url=http://www.w3school.com.cn">  
  5. Kopf>  
  6. <Körper>  
  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. Körper>  
  13. html>  

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

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

XML/HTML-Code复制内容到剪贴板
  1. >
  2. <Kopf>
  4.  <meta charset='utf- 8'> 
    6. „ 🎜>
  6.  <meta Name="Beschreibung"
  7. Inhalt="Nicht mehr als 150 Zeichen"/>
  8.  <meta name="keywords"
  9. Inhalt=""/>
  10.  <meta Name="Autor"
  11. Inhalt="Name, email@gmail.com"/>
  12.  <meta name="Roboter"
  13. Inhalt="index,follow"/>
  15.  <meta name="viewport" Inhalt="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-fähig“ Inhalt="ja"/>
  24.  <meta name="apple- itunes-app" content="app-id=myAppStoreID, academic-data=myAffiliateData, app-argument=myURL"> 
  26.  <meta name="apple- mobile-web-app-status-bar-style" content="black"/>
  28.  <meta name="format- Erkennung" Inhalt="Telefon=Nein, E-Mail=Nein"/>
  31.  <meta name="Renderer" Inhalt="webkit">
    33. " " >
  33. " Cache-Control" content="no-siteapp" /> ;
    35.  
  35. <meta name="HandheldFriendly" Inhalt="wahr">
  36.  
    37. <
  37. meta name="MobileOptimized" Inhalt="320">
  38.  
    39. <
  39. meta name="screen- Ausrichtung" Inhalt="Porträt">
  40.  
    41. <
  41. meta name="x5- Ausrichtung" Inhalt="Porträt">
  42.  
    43. <
  43. meta name="full- Bildschirm" Inhalt="ja">
  45.  <meta name="x5- Vollbild" Inhalt="true">
  47.  <meta name="browsermode" Inhalt="Anwendung">
  49.  <meta name="x5- Seitenmodus" Inhalt="app">
  51.  <meta name="msapplication- tap-highlight" content="no">
  53.  <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> 
    55. verfügen
  55.  <link rel="apple- touch-icon-precomposed" Größen="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" Typ="application/rss xml" Titel="RSS" href="/rss.xml"/ >
  85.  <Link rel="Verknüpfungssymbol " type="image/ico" href="/favicon.ico"/>
  90.  <meta property="og: type" content="type" />
  91.  <méta propriété="og : url" content="Adresse URL" />
  92.  <méta propriété="og : titre" contenu="titre" />
  93.  <méta propriété="og : image" contenu="image" />
  94.  <méta propriété="og : description" contenu="description" />
  97.  <titre>titretitre>
  98. tête>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Html5 implementiert QR-Code-Scan- und Parsing-_HTML5-Tutorial-FähigkeitenNächster Artikel：Html5 implementiert QR-Code-Scan- und Parsing-_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen