Header-Struktur bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten

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 eines Masters und ist eine erweiterte Zusammenfassung).

Die Header-Struktur von padding.me

Code kopieren

Der Code lautet wie folgt:

< ;meta name="viewport" content="width=device-width, user-scalable=yes">


< ;meta name="robots" content="index,follow">

https://plus. google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />

http://feeds.feedburner.com/paddingme" />

DOCTYPE

DOCTYPE (Dokumenttyp), diese Deklaration befindet sich 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 , die Groß-/Kleinschreibung wird nicht beachtet und es steht kein Inhalt davor. Wenn andere Inhalte (außer Leerzeichen) vorhanden sind, aktiviert der Browser den Quirks-Modus im IE. Rendern Sie die Webseite. Öffentliche DTD, das Namensformat ist „Registrierung // Organisation // Typ-Tag // Sprache“, „Registrierung“ gibt an, ob die Organisation bei der International Organization for Standardization (ISO) registriert ist, bedeutet „Ja“, – bedeutet „Nein“. „Organisation“ ist der Name der Organisation, wie zum Beispiel: W3C; „Typ“ ist im Allgemeinen eine DTD und „Label“ ist eine bestimmte öffentliche Textbeschreibung, d. h. ein eindeutiger beschreibender Name für den referenzierten öffentlichen Text, der sein kann gefolgt von einer Versionsnummer. Die letzte „Sprache“ ist die ISO 639-Sprachkennung der DTD-Sprache, z. B.: EN bedeutet Englisch, ZH bedeutet Chinesisch. XHTML 1.0 kann drei DTD-Typen deklarieren. Stellt eine strikte Version, eine Übergangsversion bzw. ein rahmenbasiertes HTML-Dokument dar.
•
HTML 4.01 strict
http://www.w3.org/TR/html4 /strict.dtd">

•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">

•
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd">

•
Und die Das neueste HTML5 führt eine prägnantere Schrift ein, die vorwärts- und rückwärtskompatibel ist und zur Verwendung empfohlen wird.

Der Doctype in HTML hat zwei Hauptzwecke.
•Überprüfen Sie die Gültigkeit der Dokumente.
Es teilt dem Benutzeragenten und Validator mit, nach welcher DTD dieses Dokument geschrieben ist. Diese Aktion ist passiv. Der Browser lädt die DTD nicht herunter und überprüft die Gültigkeit. Sie wird nur aktiviert, wenn die Seite manuell überprüft wird.
•Bestimmen Sie den Rendering-Modus des Browsers.
Für tatsächliche Vorgänge teilen Sie dem Browser mit, welcher Parsing-Algorithmus beim Lesen des Dokuments verwendet werden soll. Wenn es nicht geschrieben wird, analysiert der Browser den Code nach seinen eigenen Regeln, was schwerwiegende Auswirkungen auf das HTML-Layout haben kann. Browser haben drei Möglichkeiten, HTML-Dokumente zu analysieren.

◦ Nicht-seltsamer (Standard-)Modus
◦ Seltsamer Modus
◦ Teilweise seltsamer (fast Standard-)Modus
Über den Dokumentmodus des IE-Browsers, den Browsermodus, den strikten Modus, den seltsamen Modus, das DOCTYPE-Tag, detailliert Lesemodus verfügbar? Standard! , und das Boxmodell.

Zeichensatz

Deklarieren Sie die im Dokument verwendete Zeichenkodierung,

Kopieren Sie den Code

Der Code lautet wie folgt:

Vor HTML5 würde die Webseite so schreiben:

Kopieren Sie den Code

Der Code lautet wie folgt:

Diese beiden sind gleichwertig, Sie können genauer lesen: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type, daher empfiehlt es sich, kürzere zu verwenden, die leichter zu merken sind.

lang-Attribut

Vereinfachtes Chinesisch
!-- Eine Standardmethode zum Schreiben von Lang-Attributen<http://zhi.hu/XyIa > -->

Traditionelles Chinesisch

Es ist selten notwendig, Regionalcodes hinzuzufügen, normalerweise um die Unterschiede im chinesischen Sprachgebrauch in verschiedenen Regionen hervorzuheben, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

AnanasundAnanas ist eigentlich die gleiche Frucht. Es ist nur so, dass die Namen auf dem chinesischen Festland und in Taiwan unterschiedlich sind, und auch die Namen in Singapur und Malaysia sind unterschiedlich. Es heißt Pine Pear.

Einzelheiten finden Sie unter http://zhi.hu/XyIa

Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome

Code kopieren

Der Code lautet wie folgt:

360 mit Google Chrome Frame

Code kopieren

Der Code lautet wie folgt:

360 Browser wechselt nach dem Lesen dieses Tags sofort zum entsprechenden Geschwindigkeitskern.
Machen Sie auch sicherheitshalber mit

Code kopieren

Der Code lautet wie folgt:

Durch diese Schreibweise kann GCF zum Rendern der Seite verwendet werden, wenn Google Chrome Frame installiert ist. Wenn GCF nicht installiert ist, wird zum Rendern die höchste Version des IE-Kernels verwendet.
Verwandte Links: Meta-Tag-Dokumentation zur Browser-Kernel-Steuerung

Baidu verbietet Transkodierung

Wenn Sie eine Webseite über das Baidu-Mobiltelefon öffnen, kann Baidu Ihre Webseite umwandeln, Ihre Kleidung ausziehen und Hundehautpflaster-Anzeigen auf Ihrem Körper anbringen. Dazu können Sie

Verwandte Links: SiteApp-Transkodierungserklärung

SEO-Optimierungsteil
•
Seitentitel

•
Seitenschlüsselwörter


•
Inhaltsbeschreibung der Seitenbeschreibung


•
Definieren Sie den Autor des Webautors


•
Definieren Sie den Die Indexierungsmethode für Websuchmaschinen besteht aus einer Reihe von Werten, die durch englische Kommas getrennt sind. Sie hat normalerweise die folgenden Werte: none, noindex, nofollow, all, index und follow.

Verwandte Links: WEB1038 – Tag enthält ungültigen Wert

Ansichtsfenster

Ansichtsfenster können die Layoutdarstellung in mobilen Browsern verbessern.
Normalerweise schreiben Sie

width=device-width führt dazu, dass schwarze Ränder angezeigt werden, wenn das iPhone 5 zum Startbildschirm hinzugefügt und im WebApp-Vollbildmodus geöffnet wird (http://bigc.at/ios-webapp-viewport- meta.orz )

Inhaltsparameter:
•width Ansichtsfensterbreite (numerischer Wert/Gerätebreite)
•height Ansichtsfensterhöhe (numerischer Wert/Gerätehöhe)
•Anfangsskalierung im Anfangsmaßstab
•maximum - Skala Maximale Skalierung
•minimum-scale Minimale Skalierung
•Benutzerskalierbar Ob Benutzern das Zoomen erlaubt werden soll (ja/nein)
•
minimal-ui Ein neues Attribut in iOS 7.1 Beta 2, Sie können die obere und untere Statusleiste beim Laden der Seite minimieren. Dies ist ein boolescher Wert und kann direkt wie folgt geschrieben werden:

Und wenn Ihre Website nicht reagiert, verwenden Sie bitte nicht die anfängliche Skalierung oder deaktivieren Sie die Skalierung.

Verwandte Links: Ansichtsfenster mit nicht responsivem Design

iOS-Gerät

Titel zum Startbildschirm hinzugefügt (neu in iOS 6)

Code kopieren

Der Code lautet wie folgt:

Ob der WebApp-Vollbildmodus aktiviert werden soll

Code kopieren

Der Code lautet wie folgt:

Legen Sie die Hintergrundfarbe der Statusleiste fest

Code kopieren

Der Code lautet wie folgt:

Wird nur wirksam, wenn „apple-mobile-web-app-capable“ content="yes"

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

Deaktivieren Sie die automatische Erkennung der Ziffernerkennung als Telefonnummer

iOS-Symbol

rel-Parameter:
Apple-Touch-Icon-Bilder werden automatisch in abgerundete Ecken und Hervorhebungen verarbeitet.
apple-touch-icon-precomposed verhindert, dass das System automatisch Effekte hinzufügt und zeigt das Originaldesign direkt an.
iPhone und iTouch, standardmäßig 57 x 57 Pixel, müssen über
;!-- iPhone und iTouch, Standard 57x57 Pixel, müssen -->

haben

iPad, 72x72 Pixel, optional, aber empfohlen

Retina iPhone und Retina iTouch, 114 x 114 Pixel, optional, aber empfohlen

Retina iPad, 144 x 144 Pixel, optional, aber empfohlen

iOS-Begrüßungsbildschirm

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

Der iPad-Startbildschirm enthält keinen Statusleistenbereich.

iPad-Porträt 768 x 1004 (Standardauflösung)

Code kopieren

Der Code lautet wie folgt:

iPad-Porträt 1536x2008 (Retina)

Code kopieren

Der Code lautet wie folgt:

iPad Querformat 1024x748 (Standardauflösung)

Code kopieren

Der Code lautet wie folgt:

iPad Querformat 2048x1496 (Retina)

Code kopieren

Der Code lautet wie folgt:

Der Startbildschirm von iPhone und iPod touch enthält den Statusleistenbereich.

iPhone/iPod Touch-Porträtbildschirm 320x480 (Standardauflösung)
- iPhone/iPod Touch-Hochformatbildschirm 320 x 480 (Standardauflösung) -->

iPhone/iPod Touch-Hochformatbildschirm 640 x 960 (Retina)

iPhone 5/iPod Touch 5 vertikaler Bildschirm 640x1136 (Retina)

Intelligentes App-Banner hinzufügen (iOS 6 Safari)

Windows 8

Windows 8-Kachelfarben

Code kopieren

Der Code lautet wie folgt:

Windows 8-Kachelsymbol

Code kopieren

Der Code lautet wie folgt:

RSS-Abonnement

Favicon-Symbol
!-- Favicon-Symbol hinzufügen -->

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

Mobiles Meta

Code kopieren

Der Code lautet wie folgt:

< ;meta name="format-detection" content="telephone=no, email=no" />


< ;meta name="format-detection" content="telphone=no, email=no" />
< ;! -- Aktivieren Sie den 360-Browser-Geschwindigkeitsmodus (Webkit) -->




< ;meta name= „MobileOptimized“ content="320">

;!-- QQ erzwungener vertikaler Bildschirm-->

Teilen 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/