In HTML ist der link -Tag ein selbstschließendes Element, das sich normalerweise im head des Dokuments befindet. Es wird verwendet, um Verknüpfungen mit externen Ressourcen wie Stylesheets, Symbolen usw. herzustellen. Das link -Tag verfügt über mehrere Attribute, von denen rel und href am häufigsten verwendet werden.
Das rel Attribut definiert die Beziehung zwischen dem aktuellen Dokument und der verknüpften Ressource. Übliche rel -Attributwerte sind:
stylesheet : Stellt einen Link zu einem externen CSS-Stylesheet dar. icon : stellt ein Symbol dar, das mit einer Website verknüpft ist, beispielsweise ein Favicon. Das href -Attribut wird verwendet, um die URL der verknüpften Ressource anzugeben.
Ein typisches link Tag-Beispiel ist:
<!DOCTYPE html> <html> <Kopf> <meta charset="UTF-8"> <title>Meine Website</title> <!-- Link zum externen CSS-Stylesheet --> <link rel="stylesheet" href="styles.css"> <!-- Link zum Website-Symbol --> <link rel="icon" href="favicon.ico"> </head> <Körper> <h1>Link!</h1> <p>Dies ist eine Einführung in den Link. </p> </body> </html>
In diesem Beispiel verwenden wir zwei link Tags. Das erste link -Tag verknüpft das HTML-Dokument mit dem externen CSS-Stylesheet „ styles.css , das zum Definieren des Stils der Seite verwendet wird. Das zweite link -Tag verknüpft das HTML-Dokument mit der Website favicon.ico , die angezeigt wird, wenn der Benutzer die Website in einem Browser öffnet.
Natürlich hat das link -Tag noch andere Attribute und Verwendungszwecke. Hier sind einige häufige Attribute und Anwendungsfälle:
type : Dieses Attribut wird verwendet, um den MIME-Typ der verknüpften Ressource anzugeben. Wenn Sie beispielsweise auf ein CSS-Stylesheet verlinken, können Sie dessen Typ als text/css angeben. In den meisten Fällen können Browser Ressourcentypen automatisch identifizieren, sodass das type nicht erforderlich ist. Beispiel:
<link rel="stylesheet" href="styles.css" type="text/css">
media : Mit diesem Attribut können Sie angeben, für welche Medientypen das Stylesheet gilt. Sie können beispielsweise ein druckspezifisches Stylesheet erstellen, das verwendet wird, wenn Benutzer eine Seite drucken. Beispiel:
<link rel="stylesheet" href="print.css" media="print">
sizes : Wenn Sie das link -Tag verwenden, um auf Symbole mehrerer Größen zu verlinken, können Sie sizes Größenattribut verwenden, um die Größe des Symbols anzugeben. Dies ist in Situationen nützlich, in denen Symbole je nach Gerät in unterschiedlichen Größen angezeigt werden. Beispiel:
<link rel="icon" href="icon-48x48.png" size="48x48"> <link rel="icon" href="icon-96x96.png" size="96x96">
crossorigin : Beim Verknüpfen mit einer Cross-Origin-Ressource können Sie crossorigin -Attribut verwenden, um die CORS-Einstellungen (Cross-Origin Resource Sharing) für die Ressource anzugeben. Beispiel:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : Dieses Attribut wird verwendet, um die Integrität externer Ressourcen sicherzustellen und kann zusammen mit dem crossorigin -Attribut verwendet werden. Indem Sie der Ressource einen inhaltsbasierten Hash (z. B. SHA-256) zuweisen, können Sie sicherstellen, dass die Ressource nicht manipuliert wurde. Beispiel:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" Integrity="sha256-base64-encoded-hash">
preload : rel="preload" kann verwendet werden, um wichtige Ressourcen wie Schriftarten, Bilder oder Skripte vorab zu laden. Dadurch wird die Seitenladeleistung optimiert. Beispiel:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Dies sind einige häufige Attribute und Verwendungszwecke link Tags.
Zusätzlich zu den zuvor genannten verfügt rel über weitere Attributwerte:
alternate : Verwenden Sie rel="alternate" um alternative Versionen des Dokuments bereitzustellen, z. B. Seiten in einer anderen Sprache oder für verschiedene Geräte. Beispiel:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://link.com/mobile/a">
dns-prefetch : Domänennamen können über rel="dns-prefetch" vorab aufgelöst werden, um die DNS-Suchzeit zu verkürzen und das Laden von Ressourcen zu beschleunigen. Beispiel:
<link rel="dns-prefetch" href="//link.com">
preconnect : Ähnlich wie dns-prefetch kann rel="preconnect" vorab eine TCP-Verbindung zu einer Ressource eines Drittanbieters herstellen und so die für den Verbindungsaufbau erforderliche Zeit reduzieren. Beispiel:
<link rel="preconnect" href="https://link.com">
prefetch : Verwenden Sie rel="prefetch" um Ressourcen für die Verwendung auf nachfolgenden Seiten vorab abzurufen und zwischenzuspeichern. Dies ist nützlich, um Ressourcen vorab zu laden, die auf der Seite verwendet werden können. Beispiel:
<link rel="prefetch" href="pre-page.html">
canonical : Die Verwendung von rel="canonical" kann Suchmaschinen die kanonische URL einer Seite bereitstellen und so Probleme mit doppeltem Inhalt vermeiden. Beispiel:
<link rel="canonical" href="https://link.com/a/post">
license : Verwenden Sie rel="license" um die Lizenz-URL des Dokuments anzugeben. Beispiel:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : Verwenden Sie rel="manifest" um die Manifestdatei einer Webanwendung (normalerweise im JSON-Format) mit einem HTML-Dokument zu verknüpfen. Die Manifestdatei enthält die Metadaten der Webanwendung, wie Name, Beschreibung, Symbol usw. Beispiel:
<link rel="manifest" href="manifest.json">
Bitte beachten Sie, dass verschiedene Browser diese Eigenschaften und Funktionen möglicherweise unterschiedlich gut unterstützen. Es wird empfohlen, bei der Verwendung neuer Funktionen die entsprechende Dokumentation zu Rate zu ziehen, um Kompatibilität und Funktionalität sicherzustellen.
Damit ist dieser Artikel über die spezifische Verwendung des Link-Tag-Attributs in HTML abgeschlossen. Weitere Informationen zum HTML-Link-Tag-Attribut finden Sie in früheren Artikeln auf downcodes.com. Ich hoffe, Sie unterstützen mich weiter unten die Zukunft. downcodes.com!