Heim > Artikel > Web-Frontend > Wozu dient das HTML-Head-Tag?
Wozu dient das HTML-Head-Tag?
- php中世界最好的语言Original
- 2018-01-26 09:49:451956Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie das HTML-Head-Tag verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des HTML-Head-Tags?
HTML-Kopf Der Kopfteil enthält viele Tags und Elemente, die das Rendern von Webseiten, SEO usw. betreffen. Jeder Browser-Kernel und jeder inländische Browserhersteller verfügt über eigene Tag-Elemente viele Unterschiede. 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(Document Type), 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 1a309583e26acea4f04ca31122d8c535, unterscheidet nicht zwischen Groß- und Kleinschreibung und hat keinen Inhalt am Anfang. 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 bezieht sich darauf, ob die Organisation bei der International Organization for Standardization (ISO) registriert ist, + bedeutet Ja, - bedeutet Nein. Organisation ist der Name der Organisation, z. B. W3C. Der Typ ist normalerweise DTD. Ein Tag ist eine bestimmte öffentliche Textbeschreibung, also ein eindeutiger beschreibender Name 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/HTMLCode zum Kopieren von Inhalten in die Zwischenablage
<!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 prägnanteres Schreiben ein. Es ist vorwärts- und rückwärtskompatibel und wird empfohlen.
<!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 Informationen zum Dokumentmodus, Browsermodus und strikten Modus des IE-Browsers , seltsamer Modus, DOCTYPE-Tag, ausführlicher Modus? Standard! Inhalt.
charset
deklariert die im Dokument verwendete Zeichenkodierung,
<meta charset="utf-8">
html5, bevor die Webseite wie folgt schreiben würde:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Diese beiden sind gleichwertig, bitte lesen Sie Schritt für Schritt: 9ae2728d4b2905501308be91cfba82f6 vs. 42a54d46b84f8c8f5343907a422e5e17, daher wird empfohlen, einen kürzeren zu verwenden ist leichter zu merken.
lang attribute
Vereinfachtes Chinesisch
<html lang="zh-cmn-Hans">
Traditionelles Chinesisch
<html lang="zh-cmn-Hant">
Warum nicht das, was wir normalerweise schreiben, lesen Sie bitte: Die Erklärung am Der Kopf der Seite sollte or verwenden.
Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360 Verwenden Sie Google Chrome Frame
<meta name="renderer" content="webkit">
360 Der Browser liest dieses Tag sofort entsprechenden Geschwindigkeitskern. Fügen Sie aus Sicherheitsgründen außerdem
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
hinzu. Wenn Google Chrome Frame installiert ist, wird GCF zum Rendern der Seite verwendet Nicht installiert, wird die höchste Version des IE-Kernels zum Rendern verwendet.
Verwandte Links: Browser-Kernel-Steuerung Meta-Tag-Dokumentation
Baidu verbietet Transkodierung
Wenn Sie eine Webseite über ein Baidu-Mobiltelefon öffnen, kann Baidu Ihre Webseite transkodieren oder Ihre Kleidung ausziehen und kleben Sie eine Werbung für Hundehautpflaster auf Ihren Körper. Fügen Sie dazu
<meta http-equiv="Cache-Control" content="no-siteapp" />
im Kopf hinzu: SiteApp Transcoding Statement
SEO-Optimierungsabschnitt
Seitentitelb2386ffb911b14667cb8f0f91ea547a7-Tag (Kopfzeile ist erforderlich)
<title>your title</title>
Seitenschlüsselwörter
<meta name="keywords" content="your keywords">
Seitenbeschreibung Inhaltsbeschreibung
<meta name="description" content="your description">
Definieren Der Autor der Webseite
<meta name="author" content="author,email address">
Definieren Sie die Indizierungsmethode für Websuchmaschinen. Es handelt sich um eine durch Kommas getrennte Reihe von Werten: „Keine“, „noindex“, „nofollow“, „alle“. , indizieren und folgen.
<meta name="robots" content="index,follow">
Verwandte Links: WEB1038 – Tag enthält ungültigen Wert
Ansichtsfenster
viewport 可以让布局在移动浏览器上显示的更好。 通常会写
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)
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
适配 iPhone 6 和 iPhone 6plus 则需要写：
<meta name="viewport" content="width=375"> <meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。
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" /> <!-- 禁止数字识自动别为电话号码 -->
iOS 图标
rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
iPad，72x72 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
Retina iPad，144x144 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
iOS 启动画面
官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
iPad 的启动画面是不包括状态栏区域的。
iPad 竖屏 768 x 1004（标准分辨率）
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
iPad 竖屏 1536x2008（Retina）
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->
iPad 横屏 1024x748（标准分辨率）
复制代码代码如下:
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->
iPad 横屏 2048x1496（Retina）
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
9cfe760b22b63f7afe7ecd9f8dd193c7 c387b886e795d82db5766a24ab0bcbb0
iPhone/iPod Touch 竖屏 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
Windows 8
Windows 8 磁贴颜色
复制代码代码如下:
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
rss订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 --> favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet
移动端的meta
<meta name="renderer" content="webkit">
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
Das obige ist der detaillierte Inhalt vonWozu dient das HTML-Head-Tag?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!