Detaillierte Erläuterung des Kopfes von HTML5-H5-Tutorial-php.cn

Die Arbeit mit mobilen Endgeräten ist zunehmend zu einem wichtigen Bestandteil der Front-End-Arbeit geworden. Neben der normalen Projektentwicklung ist die HTML-Header-Tag-Funktion, insbesondere das Meta-Tag, sehr wichtig.

Der Kopfabschnitt des HTML-Dokuments umfasst normalerweise die Angabe des Seitentitels, die Bereitstellung von Informationen für Suchmaschinen über die Seite selbst, das Laden des Stylesheets und das Laden von JavaScript Datei (out) Aus Leistungsgründen wird JavaScript meistens vor dem Ende des -Tags am Ende der Seite geladen. Bis auf den Titel ist der Inhalt im Kopf für Seitenbesucher unsichtbar

Das Folgende ist ein Beispiel für den Kopfteil eines HTML-Dokuments:

<head>  
    <meta charset="utf-8" />  
    <meta name="author" content="Adam Freeman"/>  
    <title>Your page title</title>  
    <base href="http://titan/listings/" target="_blank"/>  
    <style type="text/css">  
        a{  
            background-color: grey;  
            color: white;  
            padding: 0.5em;  
        }  
    </style>  
</head>

Nach dem Login kopieren

DOCTYPE( Dokumenttyp) befindet sich diese Deklaration ganz am Anfang des Dokuments, vor dem HTML-Tag. Dieses Tag teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet.

Verwenden Sie den HTML5-Dokumenttyp, ohne Berücksichtigung der Groß- und Kleinschreibung.

Titelelement

Der Inhalt dieses Elements muss im Tab des Browsers oder oben angezeigt werden des Browserfensters, der als Seitentitel verwendet wird, bezieht sich auf den Browser. Das

Basiselement

Basiselement wird verwendet, um eine Basis-URL festzulegen, auf der relative Links in HTML-Dokumenten analysiert werden. Wenn nicht angegeben, wird die URL des aktuell geladenen Dokuments verwendet. Das Basiselement kann auch festlegen, wie der Link geöffnet wird, wenn der Benutzer darauf klickt, und wie der Browser reagiert, wenn das Formular gesendet wird.

<base href="http://bjpowernode/listings/" target="_blank"/>

Nach dem Login kopieren

1) href ist die angegebene Basis-URL.

2) Das Zielattribut gibt an, wo alle Links auf der Seite geöffnet werden sollen, einschließlich des Wertes:

1) _blank: Öffnet das verbundene Dokument in einem neuen Fenster; 2) _self : Standardmäßig wird das verknüpfte Dokument im selben Frame geöffnet
3) _parent: Öffnet das verknüpfte Dokument im übergeordneten Frame
5) ) Framename: Öffnet das verknüpfte Dokument im angegebenen Frame.

Meta-Element

Meta-Element wird verwendet, um verschiedene Metadaten des Dokuments zu definieren. Das Meta-Element kann für mehrere Zwecke verwendet werden, aber jedes Meta-Element kann nur verwendet werden Zum einen Wenn Sie mehr als eines verwenden müssen, müssen Sie dem Head-Element mehrere Metaelemente hinzufügen.

Name/Wert-Metadatenpaar angeben

Das Namensattribut wird verwendet, um den Typ der Metadaten anzugeben Das Inhaltsattribut bietet Wert. Das Namensattribut enthält die folgenden Werte:

<meta name="author" content="Adam Freeman"/>

Nach dem Login kopieren

1) Anwendungsname: der Name des Webanwendungssystems, zu dem die aktuelle Seite gehört

2) Autor: der Autorenname der aktuellen Seite; > 3) Beschreibung: Beschreibung der aktuellen Seite;

4) Generator: der Name der zum Generieren von HTML verwendeten Software
5) Schlüsselwörter: beschreibt den Inhalt der Seite.

Zusätzlich zu den oben genannten 5 vordefinierten Metadatennamen können Sie auch Metadatenerweiterungen verwenden. Hier (http://wiki.whatwg.org/wiki/MetaExtensions) gibt es eine häufig aktualisierte Liste dieser Erweiterungen. Einige Erweiterungen werden häufiger verwendet, beispielsweise Robots-Metadaten, mit denen der Autor eines HTML-Dokuments Suchmaschinen mitteilen kann, wie das Dokument zu behandeln ist:

Dies Attribut hat drei Werte, die von den meisten Suchmaschinen erkannt werden:

<meta name="robots" content="noindex"/>

Nach dem Login kopieren

1) noindex: Diese Seite nicht indizieren

2) noarchive: Diese Seite nicht archivieren oder zwischenspeichern

3) nofollow: Folgen Sie dieser Seite nicht. Der Link auf der Seite setzt die Suche fort.

Die meisten Suchmaschinen bieten Anleitungen zur Optimierung von Webseiten oder ganzen Websites. Sie können die von der entsprechenden Suchmaschine bereitgestellten Webseiten- oder Website-Optimierungsanleitungen überprüfen.

Deklarieren Sie die Zeichenkodierung

Das Metaelement im Head-Element deklariert die Zeichenkodierung des Dokuments UTF-8 (Standard).

<meta charset="utf-8" />

Nach dem Login kopieren

HTTP-Header-Felder simulieren

Metaelemente können verwendet werden, um die Werte von drei HTTP-Header-Feldern zu simulieren oder zu ersetzen.

Der Zweck des http-equiv-Attributs besteht darin, den Namen des zu simulierenden Header-Felds anzugeben, und der Feldwert wird im Inhaltsattribut angegeben. Die optionalen Werte des http-equiv-Attributs lauten wie folgt:

<meta http-equiv="refresh" content="5"/>

Nach dem Login kopieren

1) Aktualisierung: Geben Sie ein Zeitintervall in Sekunden an, nach dem die aktuelle Seite vom Server neu geladen wird. Sie können auch eine URL angeben, die der Browser laden soll, z. B.:

2) Standardstil: Geben Sie das Stylesheet an, das zuerst auf der Seite verwendet werden soll , der Wert des Inhaltsattributs. Es muss der Titelattributwert eines Stilelements oder Linkelements im selben Dokument sein.

<meta http-equiv="refresh" content="5;http://www.apress.com"/>

Nach dem Login kopieren

3) Inhaltstyp: Eine andere Möglichkeit, die in der HTML-Seite verwendete Zeichenkodierung zu deklarieren , wie zum Beispiel:

Stilelement

<meta http-equiv="content-type" content="text/html charset=UTF-8"/>

Nach dem Login kopieren

definiert den im HTML-Dokument eingebetteten CSS-Stil.

Für das a-Element oben wurde ein neuer Stil entworfen. Das Stilelement kann in verschiedenen Teilen des HTML-Dokuments erscheinen. Ein Dokument kann mehrere Stilelemente enthalten. Dieses Element kann zur Ergänzung des durch die Vorlage definierten Stils verwendet werden.

可以为style元素指定样式适用的媒体：

<style media="screen AND (min-width:500px)" type="text/css">  
    ......   
</style>

Nach dem Login kopieren

media属性中的screen是设备类型，可选值的范围包括：

1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。

media属性中的(min-width:500px)指定特性，包括：

1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

link元素

用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：

1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

载入外部样式表

<link rel="stylesheet" type="text/css" href="styles.css"/>

Nach dem Login kopieren

可以使用多个link元素载入多个外部资源。

为页面定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Nach dem Login kopieren

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。

<link rel="prefetch" href="/page2.html"/>

Nach dem Login kopieren

注：目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：

1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

定义文档内嵌脚本

<script>  
    document.write("This is from the script");  
</script>

Nach dem Login kopieren

默认情况下，浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。

<script src="simple.js"></script>

Nach dem Login kopieren

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：

<script defer src="simple2.js"></script>

Nach dem Login kopieren

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。

浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

<script async src="simple2.js"></script>

Nach dem Login kopieren

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

<noscript>  
    <h1>JavaScript is required!</h1>  
    <p>You cannot use this page without JavaScript</p>  
</noscript>

Nach dem Login kopieren

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

<noscript>  
    <meta http-equiv="refresh" content="0;www.apress.com"/>  
</noscript>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Kopfes von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!