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
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,
Vor HTML5 würde die Webseite so schreiben:
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:
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
360 mit Google Chrome Frame
360 Browser wechselt nach dem Lesen dieses Tags sofort zum entsprechenden Geschwindigkeitskern.
Machen Sie auch sicherheitshalber mit
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
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)
Ob der WebApp-Vollbildmodus aktiviert werden soll
Legen Sie die Hintergrundfarbe der Statusleiste fest
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 -->
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)
iPad-Porträt 1536x2008 (Retina)
iPad Querformat 1024x748 (Standardauflösung)
iPad Querformat 2048x1496 (Retina)
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
Windows 8-Kachelsymbol
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
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/
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
