Heim > Artikel > Web-Frontend > So verwenden Sie die Header-Struktur in HTML
So verwenden Sie die Header-Struktur in HTML
- php中世界最好的语言Original
- 2018-01-26 10:23:462187Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie die Header-Struktur in HTML verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie die Header-Struktur in HTML verwenden?
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
Kopieren Sie den Code wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="keywords" content="PaddingMe,front-end,前端,前端工程师,web开发工程师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
<meta name="description" content="PaddingMe - he is a front-end developer.">
<meta name="robots" content="index,follow">
<meta name="author" content="PaddingMe,padding4me@gmail.com"></p>< p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta></p>< p> <meta http-equiv="Cache-Control" content="no-siteapp"></p>< p> <title>PaddingMe</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></p>< p> <link rel="author" 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>" />
</head>DOCTYPE (Dokumenttyp), die Deklaration befindet sich im Dokument An vorderster Stelle vor dem html-Tag teilt dieses Tag dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet.
DTD (Document Type Definition)-Deklaration beginnt mit 1a309583e26acea4f04ca31122d8c535, es wird nicht zwischen Groß- und Kleinschreibung unterschieden und es steht kein Inhalt davor. Wenn andere Inhalte (außer Leerzeichen) vorhanden sind, wird der Browser geöffnet Ein seltsamer Modus im IE (Quirks-Modus) rendert Webseiten. Ö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 die angegebene öffentliche Textbeschreibung, also der eindeutige beschreibende Name des referenzierten öffentlichen Textes, 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 die strikte Version, die Übergangsversion bzw. das Framework-basierte HTML-Dokument dar. HTML 4.01 Strict HTML5 führt eine prägnantere Schrift ein, die vorwärts- und rückwärtskompatibel ist und zur Verwendung empfohlen wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">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 jedes Mal herunter und überprüft die Gültigkeit. Sie wird nur aktiviert, wenn die Seite manuell überprüft wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">◦ Teilweise seltsamer (fast Standard) Modus
Informationen zum Dokumentmodus und Browsermodus des
IE-Browsers
<!doctype html>Box-Modell
.
charset
Kopieren Sie den Code wie folgt:
html5 Früher wurde es auf der Webseite so geschrieben:
Vereinfachtes Chinesisch
<meta charset='utf-8'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">In seltenen Fällen ist es notwendig Fügen Sie den Regionalcode hinzu, normalerweise um die Unterschiede in der Verwendung von Chinesisch in verschiedenen Regionen hervorzuheben, zum Beispiel: Einzelheiten finden Sie unter http://zhi.hu/XyIa
Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
360 verwendet Google Chrome Frame
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->Der 360-Browser wechselt nach dem Lesen sofort zum entsprechenden Geschwindigkeitskern Etikett.
Fügen Sie außerdem sicherheitshalber
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p> hinzu. Der Effekt, der durch diese Schreibweise erzielt werden kann, besteht darin, dass GCF zum Rendern verwendet wird, wenn Google Chrome Frame installiert ist Wenn GCF nicht installiert ist, wird die höchste Version des IE-Kernels zum Rendern verwendet. Verwandte Links: Browser-Kernel-Kontrolle Meta-Tag-Dokumentation
Baidu verbietet Transkodierung
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />Wenn Sie eine Webseite über das Baidu-Mobiltelefon öffnen, kann Baidu Ihre Webseite transkodieren. Ihre Kleidung und Anzeigen für Hunde Zu diesem Zweck können Sie
<meta name="renderer" content="webkit">
im Kopf hinzufügen. Verwandte Links: SiteApp-Transkodierungserklärung
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">SEO-Optimierungsteil
Seitentitelb2386ffb911b14667cb8f0f91ea547a7-Tag (Kopfzeile ist erforderlich)
<meta http-equiv="Cache-Control" content="no-siteapp" />Seitenbeschreibung Inhaltsbeschreibung
Webautor-Autor definieren
<title>your title</title>
Verwandte Links: WEB1038 – Tag enthält ungültigen Wert
<meta name="keywords" content="your keywords">
Ansichtsfenster kann das Layout erstellen bessere Anzeige in mobilen Browsern.
schreibt normalerweise
<meta name="description" content="your description">
width=device-width, was dazu führt, 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)
<meta name="author" content="author,email address">
content 参数：
•width viewport 宽度(数值/device-width)
•height viewport 高度(数值/device-height)
•initial-scale 初始缩放比例
•maximum-scale 最大缩放比例
•minimum-scale 最小缩放比例
•user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相关链接：非响应式设计的viewport
ios 设备
添加到主屏后的标题（iOS 6 新增）
复制代码代码如下:
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数：
•default 默认值。
•black 状态栏背景是黑色。
•black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Header-Struktur in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!