HTML-Kopfstruktur

HTML-Kopfstruktur

Im Folgenden werden die häufig verwendete Kopfstruktur sowie die Bedeutung und Verwendungsszenarien der einzelnen Tags und Elemente vorgestellt (dieser Artikel basiert auf dem Artikel von Yisi Da Shen und ist eine erweiterte Zusammenfassung).

Kopfstruktur von padding.me

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=Gerätebreite, benutzerskalierbar=ja">
<meta name="keywords" content="PaddingMe, Frontend, Frontend, Frontend-Ingenieur, Webentwicklungsingenieur, HTML, CSS, JavaScript, HTML5, CSS3, Git, Github">
<meta name="description" content="PaddingMe – er ist ein Frontend-Entwickler.">
<meta name="robots" content="index,follow">
<meta name="Autor" content="PaddingMe,[email protected]"></p> <p> <meta name="Renderer" content="webkit">
<meta http-equiv="X-UA-kompatibel" content="IE=Edge,chrome=1">
<meta></p> <p> <meta http-equiv="Cache-Control" content="no-siteapp"></p> <p> <title>PaddingMe</title>
<link rel="Verknüpfungssymbol" Typ="Bild/X-Symbol" href="../favicon.ico"></p> <p> <link rel="Autor" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p> <p> <link rel="stylesheet" href="/css/screen.css">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</Kopf>

DOKTYP

DOCTYPE (Document Type), diese Deklaration befindet sich ganz am Anfang des Dokuments, vor dem HTML-Tag. Dieses Tag teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet.

Die DTD-Deklaration (Document Type Definition) beginnt mit <!DOCTYPE>, wobei die Groß- und Kleinschreibung nicht beachtet wird. Davor steht nichts. Wenn anderer Inhalt (außer Leerzeichen) vorhanden ist, aktiviert der Browser den Quirks-Modus, um die Webseite unter IE darzustellen. Öffentliche DTD, das Namensformat ist „registriert//Organisation//Typ-Tag//Sprache“, „registriert“ gibt an, ob die Organisation bei der Internationalen Organisation für Normung (ISO) registriert ist, + bedeutet ja, - bedeutet nein. „Organisation“ ist der Name der Organisation, beispielsweise W3C; „Typ“ ist im Allgemeinen DTD; „Tag“ ist die angegebene öffentliche Textbeschreibung, d. h. der eindeutige beschreibende Name des referenzierten öffentlichen Textes, gefolgt möglicherweise von einer Versionsnummer. Schließlich ist „Sprache“ die ISO 639-Sprachkennung der DTD-Sprache, beispielsweise EN für Englisch und ZH für Chinesisch. XHTML 1.0 kann drei Arten von DTDs deklarieren. Stellen jeweils die strenge Version, die Übergangsversion und rahmenbasierte HTML-Dokumente dar.
•
HTML 4.01 streng
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

•
HTML 4.01 Übergangsversion
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

•
HTML 4.01-Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

•
Das neueste HTML5 führt eine prägnantere Schreibmethode ein, die vorwärts- und abwärtskompatibel ist und zur Verwendung empfohlen wird.
<!doctype html>

Der Dokumenttyp in HTML hat zwei Hauptzwecke.
•Überprüfen Sie die Gültigkeit von Dokumenten.
Es teilt Benutzeragenten und Validierern mit, in welcher DTD das Dokument geschrieben wurde. Diese Aktion ist passiv. Der Browser lädt die DTD nicht herunter und überprüft die Gültigkeit nicht bei jedem Laden der Seite. Sie wird nur aktiviert, wenn die Seite manuell überprüft wird.
• Bestimmt den Rendering-Modus des Browsers
Um den tatsächlichen Vorgang auszuführen, teilen Sie dem Browser mit, welcher Analysealgorithmus beim Lesen des Dokuments verwendet werden soll. Wenn es nicht geschrieben ist, analysiert der Browser den Code gemäß seinen eigenen Regeln, was das HTML-Layout ernsthaft beeinträchtigen kann. Es gibt drei Möglichkeiten für Browser, HTML-Dokumente zu analysieren.

◦Modus ohne Macken (Standard)
◦Quirks-Modus
◦ Einige seltsame (fast standardmäßige) Modi
Können Sie den Modus im Detail nachlesen, was den Dokumentmodus, den Browsermodus, den strikten Modus, den Quirks-Modus und das DOCTYPE-Tag des IE-Browsers angeht? Standard! und das Boxmodell.

Zeichensatz

Geben Sie die vom Dokument verwendete Zeichenkodierung an.

Code kopieren
Der Code lautet wie folgt:

<meta charset='utf-8'>

Vor HTML5 wurden Webseiten folgendermaßen geschrieben:

Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">

Diese beiden sind gleichwertig, wie ausführlich unter http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type beschrieben. Es wird daher empfohlen, die kürzere Variante zu verwenden, die leichter zu merken ist.

Das lang-Attribut

Vereinfachtes Chinesisch
<html lang="zh-cmn-Hans"> <!-- Eine standardisiertere Art, das Attribut lang zu schreiben<http://zhi.hu/XyIa> -->

Traditionelles Chinesisch
<html lang="zh-cmn-Hant"> <!-- Eine standardisiertere Art, das Attribut lang zu schreiben<http://zhi.hu/XyIa> -->

Regionalcodes werden selten benötigt, normalerweise um Unterschiede in der Verwendung des Chinesischen in verschiedenen Regionen hervorzuheben, zum Beispiel:

Code kopieren
Der Code lautet wie folgt:

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">Ananas</strong> und <strong lang="zh-cmn-Hant-TW">Ananas</strong> sind eigentlich die gleiche Frucht. Der Name ist auf dem chinesischen Festland und in Taiwan unterschiedlich, und auch in Singapur und Malaysia ist er anders. Er wird <strong lang="zh-cmn-Hans-SG">Ananas</strong> genannt.
</p>

Weitere Informationen finden Sie unter http://zhi.hu/XyIa

Priorisieren Sie die neueste Version von IE und Chrome


Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />

360 mit Google Chrome Frame


Code kopieren
Der Code lautet wie folgt:

<meta name="renderer" content="webkit">

Nach dem Lesen dieses Tags wechselt der 360-Browser sofort zum entsprechenden Hochgeschwindigkeitskern.
Aus Versicherungsgründen fügen Sie außerdem hinzu


Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="X-UA-kompatibel" content="IE=Edge,chrome=1">

Der Effekt dieser Schreibweise besteht darin, dass, wenn Google Chrome Frame installiert ist, GCF zum Rendern der Seite verwendet wird. Wenn GCF nicht installiert ist, wird die höchste Version des IE-Kernels zum Rendern verwendet.
Zugehörige Links: Browser-Kernel-Steuerung Meta-Tag-Beschreibungsdokument

Baidu verbietet Transkodierung

Wenn Sie eine Webseite über Baidu Mobile öffnen, kann Baidu Ihre Webseite transkodieren, Ihnen die Kleidung ausziehen und Ihnen eine Werbung aus Hundehautpflaster aufkleben. Dazu können Sie hinzufügen
<meta http-equiv="Cache-Steuerung" content="no-siteapp" />

Zugehöriger Link: SiteApp-Transkodierungsanweisung

Abschnitt SEO-Optimierung
•
Seitentitel <title>-Tag (im Kopf erforderlich)
<title>Ihr Titel</title>

•
Seiten-Schlüsselwörter
<meta name="keywords" content="Ihre Schlüsselwörter">

•
Seitenbeschreibung
<meta name="description" content="Ihre Beschreibung">

•
Definieren Sie den Autor der Webseite
<meta name="author" content="author,email address">

•
Definiert die Indizierungsmethode der Suchmaschine für Webseiten. Robotterms ist eine Reihe von Werten, die durch englische Kommas "," getrennt sind und normalerweise die folgenden Werte haben: none, noindex, nofollow, all, index und follow.
<meta name="robots" content="index,follow">

Zugehöriger Link: WEB1038 – Tag enthält einen ungültigen Wert

Ansichtsfenster

Durch das Ansichtsfenster kann das Layout in mobilen Browsern besser angezeigt werden.
Normalerweise schreibe
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

width=device-width führt dazu, dass schwarze Ränder erscheinen, wenn die Seite im WebApp-Vollbildmodus geöffnet wird, nachdem sie zum Home-Bildschirm auf dem iPhone 5 hinzugefügt wurde (http://bigc.at/ios-webapp-viewport-meta.orz)

Inhaltsparameter:
•Breite der Ansichtsfensterbreite (Wert/Gerätebreite)
•Höhe der Ansichtsfensterhöhe (Wert/Gerätehöhe)
•initial-scale Anfangsskalierungsverhältnis
•maximum-scale Maximales Skalierungsverhältnis
•Minimalmaßstab Minimales Zoomverhältnis
•user-scalable Ob Benutzerskalierung erlaubt ist (ja/nein)
•
Neu in der Minimal-UI von iOS 7.1 Beta 2: Die obere und untere Statusleiste wird beim Laden der Seite minimiert. Dies ist ein Boolescher Wert, der direkt wie folgt geschrieben werden kann:
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, minimale Benutzeroberfläche">

Wenn Ihre Website nicht reagiert, verwenden Sie bitte nicht die Initial-Scale und deaktivieren Sie die Skalierung nicht.
<meta name="viewport" content="width=Gerätebreite,benutzerskalierbar=ja">

Zugehöriger Link: Nicht reagierendes Ansichtsfenster

iOS-Geräte

Titel nach dem Hinzufügen zum Home-Bildschirm (Neu in iOS 6)


Code kopieren
Der Code lautet wie folgt:

<meta name="apple-mobile-web-app-title" content="Title"> <!-- Titel nach dem Hinzufügen zum Home-Bildschirm (neu in iOS 6) -->

Ob der Vollbildmodus der WebApp aktiviert werden soll


Code kopieren
Der Code lautet wie folgt:

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Ob der Vollbildmodus der WebApp aktiviert werden soll -->

Legen Sie die Hintergrundfarbe der Statusleiste fest


Code kopieren
Der Code lautet wie folgt:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- Setzt die Hintergrundfarbe der Statusleiste. Nur wirksam, wenn `"apple-mobile-web-app-capable" content="yes"` -->

Funktioniert nur, wenn „apple-mobile-web-app-capable“ content=“yes“ ist.

Inhaltsparameter:
•Standardwert.
•schwarz Der Hintergrund der Statusleiste ist schwarz.
•schwarz-durchscheinend Der Hintergrund der Statusleiste ist schwarz und durchscheinend.
Wenn auf Standard oder Schwarz eingestellt, beginnt der Webseiteninhalt am unteren Rand der Statusleiste.
Bei der Einstellung „Schwarz-durchscheinend“ füllt der Inhalt der Webseite den gesamten Bildschirm aus und der obere Teil wird durch die Statusleiste blockiert.

Automatische Identifizierung von Nummern als Telefonnummern deaktivieren
<meta name="format-detection" content="telephone=no" /> <!-- Automatische Erkennung von Nummern als Telefonnummern deaktivieren-->

iOS-Symbole

rel-Parameter:
Das Apple-Touch-Symbolbild wird automatisch mit abgerundeten Ecken, Hervorhebungen und anderen Effekten bearbeitet.
apple-touch-icon-precomposed unterbindet das automatische Hinzufügen von Effekten durch das System und zeigt direkt das Originaldesign an.
iPhone und iTouch, Standard 57x57 Pixel, müssen
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone und iTouch, Standard 57x57 Pixel, erforderlich -->

iPad, 72x72 Pixel, optional aber empfohlen
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 Pixel, optional aber empfohlen -->

Retina iPhone und Retina iTouch, 114 x 114 Pixel, optional, aber empfohlen
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone und Retina iTouch, 114x114 Pixel, optional aber empfohlen -->

Retina iPad, 144 x 144 Pixel, optional, aber empfohlen
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 Pixel, optional aber empfohlen -->

iOS-Begrüßungsbildschirm

Offizielle Dokumentation: https://developer.apple.com/library/ios/qa/qa1686/_index.html
Referenzartikel: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

Der Startbildschirm des iPad umfasst nicht den Statusleistenbereich.

iPad-Vertikalbildschirm 768 x 1004 (Standardauflösung)


Code kopieren
Der Code lautet wie folgt:

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung) -->

iPad-Hochformatbildschirm 1536 x 2008 (Retina)


Code kopieren
Der Code lautet wie folgt:

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad-Hochformatbildschirm 1536x2008 (Retina) -->

iPad Querformat 1024 x 748 (Standardauflösung)


Code kopieren
Der Code lautet wie folgt:

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad Querformat 1024x748 (Standardauflösung) -->

iPad Querformat 2048 x 1496 (Retina)


Code kopieren
Der Code lautet wie folgt:

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad Querformat 2048x1496 (Retina) -->

Der Startbildschirm von iPhone und iPod touch umfasst den Statusleistenbereich.

iPhone/iPod Touch-Vertikalbildschirm 320 x 480 (Standardauflösung)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch vertikaler Bildschirm 320x480 (Standardauflösung) -->

iPhone/iPod Touch Hochformat 640 x 960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch Portrait 640x960 (Retina) -->

iPhone 5/iPod Touch 5 Hochformat 640 x 1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 Hochformat 640x1136 (Retina) -->

Smart App Banner hinzufügen (iOS 6+ Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- Smart App Banner hinzufügen (iOS 6+ Safari) -->

Windows 8

Kachelfarben für Windows 8


Code kopieren
Der Code lautet wie folgt:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8-Kachelfarbe -->

Kachelsymbole in Windows 8


Code kopieren
Der Code lautet wie folgt:

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8-Kachelsymbol -->

RSS-Abonnement
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- RSS-Abonnement hinzufügen -->

Favicon-Symbol
<link rel="Verknüpfungssymbol" type="image/ico" href="/favicon.ico" /> <!-- Favicon-Symbol hinzufügen -->

Eine ausführlichere Einführung in Favicon finden Sie unter https://github.com/audreyr/favicon-cheat-sheet

Mobile Metadaten


Code kopieren
Der Code lautet wie folgt:

<meta name="viewport" content="width=Gerätebreite, Anfangsskalierung=1, benutzerdefiniert skalierbar=nein" />
<meta name="apple-mobile-web-app-fähig" content="ja" />
<meta name="apple-mobile-web-app-status-bar-style" content="schwarz" />
<meta name="format-detection" content="Telefon=nein, E-Mail=nein" />
<meta name="viewport" content="width=Gerätebreite, Anfangsskalierung=1, benutzerdefiniert skalierbar=nein" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- Apples Standard-Symbolleiste und Menüleiste löschen-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- Farbe der Apple-Symbolleiste festlegen -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- Zahlen auf der Seite als Telefonnummern ignorieren, E-Mail-Erkennung ignorieren-->
<!-- Aktivieren Sie den Extremgeschwindigkeitsmodus des 360-Browsers (WebKit) -->
<meta name="renderer" content="webkit">
<!-- Vermeiden Sie die Verwendung des Kompatibilitätsmodus im Internet Explorer -->
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<!-- Optimiert für Handheld-Geräte, vor allem für einige alte Browser, die das Ansichtsfenster nicht erkennen, wie z. B. BlackBerry-->
<meta name="HandheldFriendly" content="true">
<!-- Der alte Browser von Microsoft -->
<meta name="MobilOptimized" content="320">
<!-- uc erzwingt vertikalen Bildschirm-->
<meta name="Bildschirmausrichtung" content="Hochformat">
<!-- QQ erzwungener vertikaler Bildschirm -->
<meta name="x5-orientation" content="Hochformat">
<!-- UC erzwungener Vollbildmodus -->
<meta name="Vollbild" content="ja">
<!-- QQ erzwungener Vollbildmodus -->
<meta name="x5-fullscreen" content="true">
<!-- UC-Anwendungsmodus -->
<meta name="Browsermodus" content="Anwendung">
<!-- QQ-Anwendungsmodus -->
<meta name="x5-page-mode" content="app">
<!-- Keine Hervorhebung beim Klicken auf Windows Phone -->
<meta name="msapplication-tap-highlight" content="nein">
<!-- An mobiles Endgerät anpassen -->

Geteilt von toobug.

Weitere Meta-Tag-Referenzen
•VOLLSTÄNDIGE LISTE DER HTML-META-TAGS
•18 Meta-Tags, die jede Webseite im Jahr 2013 haben sollte

Referenzartikel:
•https://github.com/yisibl/blog/issues/1
• https://gist.github.com/paddingme/6182708733917ae36331
• http://amazeui.org/css/
•http://www.douban.com/note/170560091/

<<:  Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

>>:  Implementierung der Nginx-Routing-Weiterleitung und der Reverse-Proxy-Standortkonfiguration

Artikel empfehlen

JavaScript zum Erreichen eines einfachen Message Board-Falls

Verwenden Sie Javascript, um ein Message Board-Be...

Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle

Ich habe das von Alibaba Cloud gekaufte CentOS fü...

HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks

Hyperlinks sind die am häufigsten verwendeten HTM...

Detaillierte Erklärung zur Verwendung von this.$set in Vue

Inhaltsverzeichnis Verwendung von this.$set in Vu...

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

1. Umsetzungsideen Der Zweck der Schnittstellensi...

Verwendung von Markierungs-Tags im CSS-Listenmodell

In diesem Artikel werden hauptsächlich die Stilat...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)

In diesem Artikel finden Sie das grafische Tutori...

Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen

1. Manchmal verwenden wir ES Aufgrund begrenzter ...

So erstellen Sie einen Tabellenindex in MySQL

Inhaltsverzeichnis Unterstützt mehrere Filterarte...

Optimierung der Abfragegeschwindigkeit von MySQL mit mehreren zehn Millionen Daten mithilfe von Indizes

1. Die Rolle des Index Im Allgemeinen entspricht ...

Spezifische Methode zum Löschen des MySQL-Dienstes

MySQL meldet den folgenden Fehler Ich ging zu „Sy...

Grafisches Tutorial zur Installation und Konfiguration von mysql5.7.19 winx64 (win10)

Das Installationstutorial für MySQL 5.7.19 Winx64...

So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern

1. Ordner löschen Beispiel: rm -rf /usr/java Das ...

Detailliertes Installations- und Konfigurationstutorial von MySQL 5.7 unter Win10

1. Entpacken Sie MySQL 5.7 2. Erstellen Sie eine ...

Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Rendern Nachdem ich online nach relevanten Inform...