Heim >Web-Frontend >HTML-Tutorial >Detaillierte Einführung in das
-Tag und seinen Inhalt in HTMLDetaillierte Einführung in das -Tag und seinen Inhalt in HTML
- 巴扎黑Original
- 2017-06-27 10:05:033824Durchsuche
Kopf
Titel
Basis
Meta
Link
Skript
Stil
Tag ist Wird verwendet, um den Kopf des Dokuments zu definieren. Es handelt sich um einen Container für alle Kopfzeilenelemente. Elemente innerhalb von
können:
- Referenzskript
- dem Browser mitteilen, wo das Stylesheet zu finden ist
- Meta-Informationen bereitstellen
- usw.
Der Kopf des Dokuments beschreibt verschiedene Attribute und Informationen des Dokuments, einschließlich des Titels des Dokuments und seiner Position in das Web und die Beziehung zu anderen Dokumenten usw. Die in der Kopfzeile der meisten Dokumente enthaltenen Daten werden dem Leser nicht tatsächlich als Inhalt angezeigt.
Die folgenden Tags können im Kopfbereich verwendet werden: <base>, <link>, <meta>, <script></script>, <style></style>, <title></title>.
<title></title>
<title></title>definiert den Titel des Dokuments, es ist das einzige erforderliche Element im Kopfbereich .
<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Browser verwenden Titel auf besondere Weise und platzieren sie normalerweise in der Titelleiste oder Statusleiste des Browserfensters. Wenn ein Dokument zur Linkliste oder Favoriten- oder Lesezeichenliste eines Benutzers hinzugefügt wird, wird der Titel ebenfalls zum Standardnamen für den Link zum Dokument. Das Tag
<base>
<base>gibt die Standardadresse oder das Standardziel für alle Links auf der Seite an.
Normalerweise extrahiert der Browser die entsprechenden Elemente aus der URL des aktuellen Dokuments, um die Lücken in der relativen URL zu füllen.
Verwenden Sie das Tag <base>, um dies zu ändern. Der Browser verwendet dann nicht mehr die URL des aktuellen Dokuments, sondern die angegebene Basis-URL, um alle relativen URLs aufzulösen. Dazu gehören URLs in den Tags <a></a>, <img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" alt="Detaillierte Einführung in das <head>-Tag und seinen Inhalt in HTML" >, <link>, <form></form>.
<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" / alt="Detaillierte Einführung in das <head>-Tag und seinen Inhalt in HTML" ><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>
<base>Erforderliche Attribute: href
href, der Wert ist die URL, die alle relativen Links angibt die Basis-URL der Seite.
<base>Optionale Attribute: target
target, die Werte sind _blank, _parent, _self, _top, Framename usw. geben an, wo alle Links auf der Seite geöffnet werden sollen. „_blank“ bedeutet beispielsweise „In einem neuen Fenster öffnen“. Das Element
<meta>
<meta>kann Metainformationen über die Seite bereitstellen, z. B. eine Beschreibung und einen Schlüssel für Suchmaschinen sowie ein Wort zur Aktualisierungshäufigkeit. Metadaten werden immer in Name/Wert-Paaren übergeben. Das Tag
<meta> befindet sich am Kopf des Dokuments und enthält keinen Inhalt. Die Attribute des <meta>-Tags definieren die mit dem Dokument verknüpften Name/Wert-Paare.
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
<meta>Erforderliche Attribute: Inhalt
Inhalt, der Wert ist ein Text, definiert mit http-Meta -Informationen zum Äquiv- oder Namensattribut. Metadaten werden immer in Name/Wert-Paaren übergeben.
z. B.:
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta>Hauptoptionale Attribute: http-äquiv, Name
http-equiv, der Wert ist Content-Type, Expires, Refresh, Set-Cookie usw., ordnet das Content-Attribut dem HTTP-Header zu.
Das http-equiv-Attribut stellt einen Namen für ein Name/Wert-Paar bereit. Und weist den Server an, ein „Name/Wert“-Paar in den Header der an den Browser gesendeten Nachricht einzufügen, bevor das eigentliche Dokument gesendet wird.
z. B.:
<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Weiterleitung (zur Webseitenverschiebung):
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Beschreibungsschlüsselwörter:
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Name , der Wert ist Autor, Beschreibung, Schlüsselwörter, Generator, überarbeitet, andere usw., verknüpfen Sie das Inhaltsattribut mit einem Namen.
Weder HTML- noch XHTML-Tags werden vordefinierte Namen zugewiesen. Im Allgemeinen steht es Ihnen frei, Namen zu verwenden, die für Sie und die Leser des Quelldokuments aussagekräftig sind.
„Schlüsselwörter“ ist ein häufig verwendeter Name. Es definiert eine Reihe von Schlüsselwörtern für das Dokument. Einige Suchmaschinen verwenden diese Schlüsselwörter, um Dokumente zu klassifizieren, wenn sie auf sie stoßen.
zB:
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<link>
<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<link>的主要属性：href，rel，type，charset
charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。
在下面的例子中，charset 属性指示被链接文档是用英文编写的：
<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
href，规定被链接文档的位置（URL）。
这个不解释了。
rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<script></script>
<script></script>标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
直接包含脚本语句
<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>通过 src 属性指向外部脚本文件
<script type="text/javascript" src="myscripts.js"></script>
<script></script>必需的属性：type
type，规定脚本的 MIME 类型。
对于不支持脚本的浏览器：
<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html><style></style>
<style></style>标签用于为 HTML 文档定义样式信息。
在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style></style>，内联样式用的是style属性。
内联样式
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
内部样式表
<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>也可以通过“id选择器”和“class选择器”进行：
id选择器
<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>class选择器
<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。
<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html><style></style>必需的属性：type
type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。
也可以通过style标签创建一个没有下划线的链接：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html>
Note：只有title标签<title></title>、script标签<script></script>和style标签<style></style>有完整的关闭标签。
Kopf
Titel
Basis
Meta
Link
Skript
style
Tag wird verwendet, um den Kopf des Dokuments zu definieren, Es ist ein Container für alle Header-Elemente. Elemente innerhalb von
können:
- Referenzskript
- dem Browser mitteilen, wo das Stylesheet zu finden ist
- Meta-Informationen bereitstellen
- usw.
Der Kopf des Dokuments beschreibt verschiedene Attribute und Informationen des Dokuments, einschließlich des Titels des Dokuments und seiner Position in das Web und die Beziehung zu anderen Dokumenten usw. Die in der Kopfzeile der meisten Dokumente enthaltenen Daten werden dem Leser nicht tatsächlich als Inhalt angezeigt.
Die folgenden Tags können im Kopfbereich verwendet werden: <base>, <link>, <meta>, <script></script>, <style></style>, <title></title>.
<title></title>
<title></title>definiert den Titel des Dokuments, es ist das einzige erforderliche Element im Kopfbereich .
<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Browser verwenden Titel auf besondere Weise und platzieren sie normalerweise in der Titelleiste oder Statusleiste des Browserfensters. Wenn ein Dokument zur Linkliste oder Favoriten- oder Lesezeichenliste eines Benutzers hinzugefügt wird, wird der Titel ebenfalls zum Standardnamen für den Link zum Dokument. Das Tag
<base>
<base>gibt die Standardadresse oder das Standardziel für alle Links auf der Seite an.
Normalerweise extrahiert der Browser die entsprechenden Elemente aus der URL des aktuellen Dokuments, um die Lücken in der relativen URL zu füllen.
Verwenden Sie das Tag <base>, um dies zu ändern. Der Browser verwendet dann nicht mehr die URL des aktuellen Dokuments, sondern die angegebene Basis-URL, um alle relativen URLs aufzulösen. Dazu gehören URLs in den Tags <a></a>, <img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" alt="Detaillierte Einführung in das <head>-Tag und seinen Inhalt in HTML" >, <link>, <form></form>.
<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" / alt="Detaillierte Einführung in das <head>-Tag und seinen Inhalt in HTML" ><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>
<base>Erforderliche Attribute: href
href, der Wert ist die URL, die alle relativen Links angibt die Basis-URL der Seite.
<base>Optionale Attribute: target
target, die Werte sind _blank, _parent, _self, _top, Framename usw. geben an, wo alle Links auf der Seite geöffnet werden sollen. „_blank“ bedeutet beispielsweise „In einem neuen Fenster öffnen“. Das Element
<meta>
<meta>kann Metainformationen über die Seite bereitstellen, z. B. eine Beschreibung und einen Schlüssel für Suchmaschinen sowie ein Wort zur Aktualisierungshäufigkeit. Metadaten werden immer in Name/Wert-Paaren übergeben. Das Tag
<meta> befindet sich am Kopf des Dokuments und enthält keinen Inhalt. Die Attribute des <meta>-Tags definieren die mit dem Dokument verknüpften Name/Wert-Paare.
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
<meta>Erforderliche Attribute: Inhalt
Inhalt, der Wert ist ein Text, definiert mit http-Meta -Informationen zum Äquiv- oder Namensattribut. Metadaten werden immer in Name/Wert-Paaren übergeben.
z. B.:
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta>Hauptoptionale Attribute: http-äquiv, Name
http-equiv, der Wert ist Content-Type, Expires, Refresh, Set-Cookie usw., ordnet das Content-Attribut dem HTTP-Header zu.
Das http-equiv-Attribut stellt einen Namen für ein Name/Wert-Paar bereit. Und weist den Server an, ein „Name/Wert“-Paar in den Header der an den Browser gesendeten Nachricht einzufügen, bevor das eigentliche Dokument gesendet wird.
z. B.:
<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Weiterleitung (zur Webseitenverschiebung):
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Beschreibungsschlüsselwörter:
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Name , der Wert ist Autor, Beschreibung, Schlüsselwörter, Generator, überarbeitet, andere usw., verknüpfen Sie das Inhaltsattribut mit einem Namen.
Weder HTML- noch XHTML-Tags werden vordefinierte Namen zugewiesen. Im Allgemeinen steht es Ihnen frei, Namen zu verwenden, die für Sie und die Leser des Quelldokuments aussagekräftig sind.
„Schlüsselwörter“ ist ein häufig verwendeter Name. Es definiert eine Reihe von Schlüsselwörtern für das Dokument. Einige Suchmaschinen verwenden diese Schlüsselwörter, um Dokumente zu klassifizieren, wenn sie auf sie stoßen.
zB:
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<link>
<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<link>的主要属性：href，rel，type，charset
charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。
在下面的例子中，charset 属性指示被链接文档是用英文编写的：
<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
href，规定被链接文档的位置（URL）。
这个不解释了。
rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<script></script>
<script></script>标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
直接包含脚本语句
<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>通过 src 属性指向外部脚本文件
<script type="text/javascript" src="myscripts.js"></script>
<script></script>必需的属性：type
type，规定脚本的 MIME 类型。
对于不支持脚本的浏览器：
<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html><style></style>
<style></style>标签用于为 HTML 文档定义样式信息。
在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style></style>，内联样式用的是style属性。
内联样式
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
内部样式表
<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>也可以通过“id选择器”和“class选择器”进行：
id选择器
<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>class选择器
<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。
<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html><style></style>必需的属性：type
type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。
也可以通过style标签创建一个没有下划线的链接：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html>
Note：只有title标签<title></title>、script标签<script></script>和style标签<style></style>有完整的关闭标签。
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das
-Tag und seinen Inhalt in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!