Detaillierte Einführung in die Erstellung von HTML-Header-Tags_HTML/Xhtml

Heim

Web-Frontend

HTML-Tutorial

Detaillierte Einführung in die Erstellung von HTML-Header-Tags_HTML/Xhtml_Webseiten

May 16, 2016 pm 04:36 PM

head html

Im HTML-Kopfteil gibt es viele Tags und Elemente, die das Browser-Rendering von Webseiten, SEO usw. betreffen. Jeder Browserkern und jeder inländische Browserhersteller verfügt über eigene Tag-Elemente, was zu vielen Unterschieden führt. Im Zeitalter des mobilen Internets sind die Kopfstruktur und die Metaelemente mobiler Endgeräte noch wichtiger. Der Zweck dieses Artikels besteht darin, die Bedeutung jedes Tags zu verstehen und einen Head-Tag zu schreiben, der Ihren eigenen Anforderungen entspricht. Dieser Artikel basiert auf Yishis Artikel und bietet eine erweiterte Zusammenfassung, um die Bedeutung und Verwendungsszenarien jedes Tags und Elements in häufig verwendeten Überschriften vorzustellen.

DOCTYPE

DOCTYPE (Dokumenttyp), diese Deklaration befindet sich an der vordersten Position im Dokument, vor dem HTML-Tag. Dieses Tag teilt dem Browser mit, um welche Art von Dokument es sich handelt HTML, das das Dokument verwendet, oder die XHTML-Spezifikation.

Die DTD-Deklaration (Document Type Definition) beginnt mit <!DOCTYPE>, unterscheidet nicht zwischen Groß- und Kleinschreibung und hat keinen Inhalt davor. Wenn andere Inhalte vorhanden sind (außer Leerzeichen), öffnet der Browser ein seltsames Fenster Der Modus unter IE (Quirks-Modus) rendert Webseiten. Öffentliche DTD, das Namensformat ist Registrierung // Organisation // Typ-Tag // Sprache, Registrierung bezieht sich darauf, ob die Organisation bei der International Organization for Standardization (ISO) registriert ist, was „Ja“ bedeutet, – „Nein“ bedeutet. Organisation ist der Name der Organisation, z. B. W3C. Der Typ ist normalerweise DTD. Ein Tag gibt eine Beschreibung des öffentlichen Texts an, d. h. einen eindeutigen beschreibenden Namen für den referenzierten öffentlichen Text, dem eine Versionsnummer folgen kann. Die endgültige Sprache ist die ISO 639-Sprachkennung der DTD-Sprache, z. B. EN für Englisch, ZH für Chinesisch. XHTML 1.0 kann drei DTD-Typen deklarieren. Stellt eine strikte Version, eine Übergangsversion bzw. ein rahmenbasiertes HTML-Dokument dar.

●HTML 4.01 streng

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

●HTML 4.01 Übergangsversion

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

●HTML 4.01 Frameset

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!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 Schrift ein, die vorwärts- und rückwärtskompatibel ist und zur Verwendung empfohlen wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!doctype html>

Der Doctype hat in HTML 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 das HTML-Layout ernsthaft beeinträchtigen kann. Browser haben drei Möglichkeiten, HTML-Dokumente zu analysieren.

●Nicht-seltsamer (Standard-)Modus
●Seltsamer Modus
●Teilweise seltsamer (fast Standard-)Modus Über den Dokumentmodus, den Browsermodus, den strikten Modus, den seltsamen Modus und das DOCTYPE-Tag des IE-Browsers können Sie mehr erfahren Lesemodus? Standard! Inhalt.

Zeichensatz

Deklarieren Sie die vom Dokument verwendete Zeichenkodierung,

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta charset="utf-8">

Vor HTML5 würde die Webseite so lauten:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

Diese beiden sind gleichwertig, bitte lesen Sie die Details unten: <meta charset='utf-8'> vs. <meta http-equiv='Content-Type'> , also Es wird empfohlen, kürzere zu verwenden, die leichter zu merken sind.

lang-Attribut

Vereinfachtes Chinesisch

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<html lang="zh-cmn-Hans ">

Traditionelles Chinesisch

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<html lang="zh-cmn-Hant ">

Warum ist lang="zh-cmn-Hans" anstelle von lang="zh-CN", das wir normalerweise schreiben? Bitte lesen Sie: Sollte die Aussage am Kopf der Seite lang="zh" sein? lang="zh-cn".

Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

　360 mit Google Chrome Frame

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

　Der 360-Browser wechselt nach dem Lesen dieses Tags sofort zum entsprechenden Geschwindigkeitskern. Um auf der sicheren Seite zu sein, schließen Sie sich außerdem

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta http-equiv="X-UA -Kompatibel" Inhalt="IE=Edge,chrome=1">

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: Browser-Kernel-Control-Meta-Tag-Dokumentation

Baidu verbietet Transkodierung

Wenn Sie eine Webseite über ein Baidu-Mobiltelefon öffnen, kann Baidu die Transkodierung Ihrer Webseite ändern. Ziehen Sie Ihre Kleidung aus und kleben Sie Hundehautpflaster auf Ihren Körper. Zu diesem Zweck können Sie

auf den Kopf auftragen

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta http-equiv="Cache-Control " content="no-siteapp" />

Verwandte Links: SiteApp-Transkodierungserklärung

SEO-Optimierungsteil

Seitentitel<title>-Tag (Kopfzeile (Erforderlich). )

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Titel>Ihr Titel</Titel >

Seitenschlüsselwörter

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="keywords" Inhalt="Ihre Schlüsselwörter">

Inhaltsbeschreibung der Seitenbeschreibung

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Meta Name="Beschreibung" Inhalt="Ihre Beschreibung">

Webautor-Autor definieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta Name="Autor" Inhalt="Autor,E-Mail-Adresse">

Definieren Sie die Indexierungsmethode 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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="Roboter" Inhalt="index,follow">

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

Ansichtsfenster

　Viewport kann die Layoutdarstellung in mobilen Browsern verbessern. Schreiben Sie normalerweise

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="viewport" Inhalt="width=device-width, initial-scale=1.0">

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:

Breite, Breite des Ansichtsfensters (numerischer Wert/Gerätebreite)
Höhe, Höhe des Ansichtsfensters (numerischer Wert/Gerätehöhe)
Anfängliches Skalierungsverhältnis, anfängliches Skalierungsverhältnis
Maximales Skalierungsverhältnis, maximales Skalierungsverhältnis
Minimum -scale Minimales Zoomverhältnis
Benutzerskalierbar Ob Benutzerskalierung zugelassen werden soll (ja/nein)
minimal-ui Ein neues Attribut in iOS 7.1 Beta 2 kann die obere und untere Statusleiste beim Laden der Seite minimieren. Dies ist ein boolescher Wert und kann direkt wie folgt geschrieben werden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="viewport" Inhalt="width=device-width, initial-scale=1, minimal-ui">

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

Verwandte Links: Ansichtsfenster mit nicht responsivem Design

Zur Anpassung an iPhone 6 und iPhone 6plus müssen Sie Folgendes schreiben:

XML/HTML CodeInhalt in die Zwischenablage kopieren

<meta name="viewport" Inhalt="width=375">
<meta name="viewport" Inhalt="width=414">

Die Ansichtsfensterbreite der meisten 4,7- bis 5-Zoll-Android-Geräte ist auf 360 Pixel eingestellt, auf dem iPhone 6 beträgt sie jedoch 375 Pixel. Die Ansichtsfensterbreite der meisten 5,5-Zoll-Android-Geräte (z. B. Samsung Note) beträgt 400 Pixel, und das ist auch der Fall 414px auf dem iPhone 6 plus.

iOS-Gerät

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="apple-mobile-web -app-title" content="title">

Ob der WebApp-Vollbildmodus aktiviert werden soll

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="apple-mobile-web -app-fähig" Inhalt="ja" />

Legen Sie die Hintergrundfarbe der Statusleiste fest

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="apple-mobile-web -app-status-bar-style" content="black-translucent" />
<!-- Legen Sie die Hintergrundfarbe der Statusleiste fest, die nur wirksam wird, wenn „apple-mobile-web-app-capable“ content="yes"` - ->

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

　Inhaltsparameter:

Standardwert.
schwarz Der Hintergrund der Statusleiste ist schwarz.
schwarz-transluzent Der Hintergrund der Statusleiste ist schwarz und transluzent. Bei der Einstellung „Standard“ oder „Schwarz“ beginnt der Webinhalt unten in der Statusleiste. Bei der Einstellung Schwarz-Transluzent füllt der Webseiteninhalt den gesamten Bildschirm aus und der obere Teil wird durch die Statusleiste verdeckt.

Ziffernerkennung als Telefonnummer deaktivieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="format-erkennung" content="telephone=no" />

iOS-Symbol

　rel-Parameter: apple-touch-icon Das Bild wird automatisch in abgerundete Ecken und Hervorhebungen verarbeitet. apple-touch-icon-precomposed verhindert, dass das System automatisch Effekte hinzufügt, und zeigt das ursprüngliche Design direkt an. iPhone und iTouch, Standard 57x57 Pixel, erforderlich

Code kopieren

Der Code lautet wie folgt:

iPad, 72x72 Pixel, optional, aber empfohlen

Code kopierenDer Code lautet wie folgt:

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

Code kopierenDer Code lautet wie folgt:

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

Code kopierenDer Code lautet wie folgt:

　Die iOS-Symbolgröße beträgt 180 x 180 auf dem iPhone 6 Plus und 120 x 120 auf dem iPhone 6. Zur Anpassung an das iPhone 6 Plus müssen Sie diesen Absatz

hinzufügen

Code kopierenDer Code lautet wie folgt:

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 iPad-Startbildschirm enthält nicht den Statusleistenbereich.

iPad-Hochformatbildschirm 768 x 1004 (Standardauflösung)

Code kopierenDer 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-Hochformatbildschirm 320x480 (Standardauflösung)

Code kopieren

Der Code lautet wie folgt:

　iPhone/iPod Touch-Porträtbildschirm 640 x 960 (Retina)

Code kopieren

Der Code lautet wie folgt:

　iPhone 5/iPod Touch 5 vertikaler Bildschirm 640 x 1136 (Retina)

Code kopieren

Der Code lautet wie folgt:

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

Code kopieren

Der Code lautet wie folgt:

Die entsprechende Bildgröße für das iPhone 6 beträgt 750×1294 und die entsprechende Bildgröße für das iPhone 6 Plus beträgt 1242×2148.

Code kopieren

Der Code lautet wie folgt:

Windows 8
　Windows 8-Kachelfarbe

Code kopieren

Der Code lautet wie folgt:

　Windows 8-Kachelsymbol

Code kopieren

Der Code lautet wie folgt:

RSS-Abonnement

Code kopieren

Der Code lautet wie folgt:

　Favicon-Symbol

Code kopieren

Der Code lautet wie folgt:

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

Mobile Meta

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<meta name="viewport" Inhalt="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple- mobile-web-app-fähig“ Inhalt="ja" / >
<meta name="apple- mobile-web-app-status-bar-style" content="black" />
<meta name="format-erkennung"Inhalt="Telefon=nein, E-Mail=nein" />
<meta name="viewport" Inhalt="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple- mobile-web-app-fähig“ Inhalt="ja" / >
<meta name="apple- mobile-web-app-status-bar-style" content="black" />
<meta name="format- Erkennung" Inhalt="Telefon=Nein, E-Mail=Nein" / >
<meta name="Renderer" Inhalt="webkit">
<meta http-equiv=" " >
meta name
"HandheldFriendly" Inhalt="wahr">  <
meta name
"MobileOptimized" Inhalt="320">  <
meta name
"screen- Ausrichtung" Inhalt="Porträt">  <
meta name
"x5- Ausrichtung" Inhalt="Porträt">  <
meta name
"full- Bildschirm" Inhalt="ja">  <
meta name
"x5- Vollbild" Inhalt="true">  <
meta name
"browsermode" Inhalt="Anwendung">  <
meta name
"x5- Seitenmodus" Inhalt="app">
<meta name="msapplication- tap-highlight" content="no">

Dies ist eine Zusammenfassung der Beiträge von toobug.

Weitere Meta-Tag-Referenzen

Referenzartikel:

Erklärung dieser Website

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