suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Metaattribute in HTML5_HTML5-Tutorial-Tipps

So verwenden Sie Metaattribute in HTML5_HTML5-Tutorial-Tipps

WBOY
WBOYOriginal
2016-05-16 15:45:551697Durchsuche

Das Meta-Attribut nimmt in HTML eine sehr wichtige Position ein. Zum Beispiel: SEO für Suchmaschinen, Zeichenkodierung von Dokumenten, Einstellen des Aktualisierungscache usw. Obwohl einige Webseiten möglicherweise kein Meta verwenden, müssen wir als reguläre Soldaten dennoch einige Eigenschaften von Meta verstehen und in der Lage sein, sie geschickt zu nutzen.

1. Deklarieren Sie die im Dokument verwendete Zeichenkodierung

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta charset='utf-8'> 

2. Deklarieren Sie den Kompatibilitätsmodus des Dokuments

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta http-equiv="X-UA -Kompatibel" content="IE=edge" /> Weist IE an, Inhalte im höchsten derzeit verfügbaren Modus anzuzeigen
  2. <meta http-equiv=" " /> weist den IE an, die Anweisung > zu verwenden, um zu bestimmen, wie der Inhalt gerendert werden soll. Befehle im Standardmodus werden im IE7-Standardmodus angezeigt, während Befehle im Quirks-Modus im IE5-Modus angezeigt werden. 3. SEO-Optimierung
    3. XML/HTML-Code
  3. Inhalt in die Zwischenablage kopieren

<
Meta Name
=
  1. "Beschreibung" Inhalt="Nicht mehr als 150 Zeichen" />Seitenbeschreibung <meta name
    2. =
  2. "keywords" Inhalt="html5, css3, keyword"/>Seitenschlüsselwörter <meta Name
    3. =
  3. "Autor" Inhalt="Magic Inn" />Webautor definieren <meta name
    4. =
  4. "Roboter" Inhalt="index,follow" />Definieren Sie die Indizierungsmethode für Websuchmaschinen. Robotterms ist eine durch Kommas getrennte Reihe von Werten. Sie hat normalerweise die folgenden Werte: none, noindex, nofollow, all, index und follow.

    4. Ansichtsfenster für mobile Geräte hinzufügen

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. <meta name ="viewport" Inhalt ="width=device-width, initial-scale=1, Maximum-scale=1, Minimum-scale=1, user- skalierbar=nein"> 
    2. Erklärung der Inhaltsparameter:
    3. Breite des Ansichtsfensters (Wert/Gerätebreite)
    4. Höhe des Ansichtsfensters (Wert/Gerätehöhe)
    5. Anfangsskalierung Anfangsskalierungsverhältnis
    6. maximale Skalierung Maximales Zoomverhältnis
    7. minimaler Maßstab, minimales Zoomverhältnis
    8. Benutzerskalierbar Ob Benutzerskalierung zugelassen werden soll (ja/nein)
    9. minimal-ui In iOS 7.1 Beta 2 gibt es ein neues Attribut, das die obere und untere Statusleiste beim Laden der Seite minimieren kann. Dies ist ein boolescher Wert und kann direkt wie folgt geschrieben werden:
    10. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> ;

    5. iOS-Gerät

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. <meta name="apple-mobile-web -app-title" content="title"> hinzugefügt Titel nach Startbildschirm (neu in iOS 6)
    2. <meta name="apple- mobile-web-app-fähig“ Inhalt="ja" / >Ob der WebApp-Vollbildmodus aktiviert werden soll
    3. <meta name="apple- mobile-web-app-status-bar-style" content="black-translucent" />Legen Sie die Hintergrundfarbe der Statusleiste fest
    4. Wird nur wirksam, wenn „Apple-Mobile-Web-App-fähiger“ Inhalt=„Ja“
    5. Inhaltsparameter:
    6. Standardwert.
    7. schwarz Der Hintergrund der Statusleiste ist schwarz.
    8. schwarz-transluzent Der Hintergrund der Statusleiste ist schwarz und transluzent.
    9. Auf Standard oder Schwarz eingestellt, beginnt der Webseiteninhalt am unteren Rand der Statusleiste.
    10. Bei der Einstellung Schwarz-Transluzent füllt der Webinhalt den gesamten Bildschirm aus und der obere Teil wird durch die Statusleiste blockiert.

    6. iOS-Symbolrelationsparameter

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. Apple-Touch-Icon-Bilder werden automatisch in abgerundete Ecken und Hervorhebungen verarbeitet.
    2. apple-touch-icon-precomposed verhindert, dass das System automatisch Effekte hinzufügt, und zeigt das ursprüngliche Design direkt an.
    3. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone und iTouch, standardmäßig 57 x 57 Pixel, müssen
      4. haben
    4. <link rel="apple- touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad, 72x72 Pixel , man kann es nicht haben, aber es wird empfohlen, es zu haben
    5. <link rel="apple- touch-icon-precomposed" Größen="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone und Retina iTouch, 114 x 114 Pixel, optional, aber empfohlen
    6. <link rel="apple- touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad, 144x144 Pixel sind optional, es wird jedoch empfohlen, dass jeder
      7. verwendet
    7. <meta name="apple- mobile-web-app-title" content="title">Beschränken Sie den Titel am besten auf die Länge von sechs chinesischen Zeichen. Überlange Inhalte werden ausgeblendet und nach dem Startbildschirm zum Titel hinzugefügt (neu in iOS 6)

    7. iOS-Startbildschirm

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. Der iPad-Startbildschirm enthält nicht den Statusleistenbereich.
    2. iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung)
    3. <link rel="apple- touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad vertikaler Bildschirm 1536x2008 (Retina)
    4. <link rel="apple- touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad-Querformatbildschirm 1024x748 (Standardauflösung)
    5. <link rel="apple- touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad Querformat 2048x1496 (Retina)
    6. <link rel="apple- touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
    7. Der Startbildschirm von iPhone und iPod touch enthält den Statusleistenbereich.
    8. iPhone/iPod Touch-Hochformatbildschirm 320x480 (Standardauflösung)
    9. <link rel="apple- touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch Vertikaler Bildschirm 640x960 (Retina)
    10. <link rel="apple- touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />Vertikaler Bildschirm des iPhone 5/iPod Touch 5 640x1136 (Retina)
    11. <link rel="apple- touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    12. <link rel="apple- touch-startup-image" href="Startup.png" / > Wenn der Benutzer auf das Startbildschirmsymbol klickt, um die WebApp zu öffnen, zeigt das System den Startbildschirm an. Wenn dies nicht festgelegt ist, zeigt das System standardmäßig den Startseiten-Screenshot der Website an. Natürlich ist diese Erfahrung nicht sehr gut

    8, Windows 8

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. <meta name="msapplication-TileColor" Inhalt="#000"/> Windows 8-Kachelfarbe
    2. <meta name="msapplication- TileImage" content="icon.png"/>Windows 8 Kachelsymbol

    9. Gelegentlich verwendet

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. <link rel="alternate" Typ="application/rss xml" Titel="RSS" href="/rss.xml" />RSS-Abonnement hinzufügen
    2. <Link rel="Verknüpfungssymbol " type="image/ico" href="/favicon.ico" />Favicon-Symbol hinzufügen
    3. <meta name="format- Erkennung" content="telephone=no" />Verhindern Sie, dass die Ziffernerkennung automatisch als Telefonnummer erkannt wird
    4. <meta name="format- Erkennung" content="email=no" />Android nicht zulassen, dass E-Mails erkannt werden
    5. <meta name="Renderer" Inhalt="webkit">Aktivieren Sie den Geschwindigkeitsmodus des 360-Browsers (Webkit)
    6. <meta http-equiv=" " >Vermeiden Sie die Verwendung des Kompatibilitätsmodus durch den IE <meta name
      7. =
    7. "HandheldFriendly" Inhalt="true">Optimiert für Handheld-Geräte, hauptsächlich für einige alte Browser, die das Ansichtsfenster nicht erkennen, wie z. B. BlackBerry <meta name
      8. =
    8. "MobileOptimized" Inhalt="320">Der alte Browser von Microsoft <meta name
      9. =
    9. "x5- Ausrichtung" Inhalt="Hochformat">QQ erzwungener vertikaler Bildschirm
    10. <meta name="full- Bildschirm" Inhalt="Ja">UC erzwungener Vollbildmodus
    11. <meta name="x5- Vollbild" Inhalt="true">QQ erzwungener Vollbildmodus
    12. <meta name="browsermode" Inhalt="Anwendung">UC-Anwendungsmodus
    13. <meta name="x5- page-mode" content="app">QQ-Anwendungsmodus
    14. <meta http-equiv=" Cache-Control" content="no-siteapp" /> Baidu-Transkodierung ist verboten
    15. <meta name="msapplication- tap-highlight" content="no">Windows Phone Click Keine Highlights
    16. <meta name="keywords" Inhalt="" /> Schlüssel Wörter
    17. <meta Name="Beschreibung" Inhalt="" /> Beschreibung
    18. <meta name="title" Inhalt="" /> Titel
    19. <meta Name="Autor" Inhalt="-06" /> Autor
    20. <meta Name="Copyright" Inhalt="" /> Unternehmen
    21. <meta http-equiv=" " 🎜> Lassen Sie den IE-Browser den fortschrittlichsten Kernel zum Rendern von Seiten verwenden, und Seiten, die das Chrome-Framework verwenden, verwenden den Webkit-Kernel <meta name
    22. ="apple- mobile-web-app-fähig“ Inhalt="ja"> IOS6 Vollbild <meta name
    23. ="mobile- Web-App-fähig“ Inhalt=„Ja“> Chrome Hohe Version im Vollbildmodus <meta name
    24. ="Renderer" Inhalt="webkit"> 360 Dual-Core-Browser verwenden lassen Webkit-Kernel-Rendering-Seite <meta name
    25. ="apple- itunes-app" content="app-id=myAppStoreID, academic-data=myAffiliateData, app-argument=myURL"> Smart-App-Banner hinzufügen Smart-App-Banner (iOS 6 Safari) 10. SNS-Social-Tag
    26. XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. <méta propriété="og:type" contenu="type" />
    2. <méta propriété="og : url" content="Adresse URL" />
    3. <méta propriété="og : titre" contenu="titre" />
    4. <méta propriété="og : image" contenu="image" />
    5. <méta propriété="og : description" contenu="description" />

    11. Commentaires conditionnels pour déterminer le navigateur IE

    Code XML/HTMLCopier le contenu dans le presse-papiers
    2.  
    3.  
    4. ![endif]--> 

    Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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：Analysieren Sie die Speicherfunktion von HTML5 und die damit verbundenen Betriebsmethoden der Web-SQL_html5-TutorialfähigkeitenNächster Artikel：Analysieren Sie die Speicherfunktion von HTML5 und die damit verbundenen Betriebsmethoden der Web-SQL_html5-Tutorialfähigkeiten

In Verbindung stehende Artikel

Mehr sehen