HTML
Ressourcen verknüpfen
Suche…
Einführung
Während viele Skripts, Symbole und Stylesheets direkt in HTML-Markup geschrieben werden können, ist es empfehlenswert und effizienter, diese Ressourcen in eine eigene Datei einzubinden und mit Ihrem Dokument zu verknüpfen. In diesem Thema wird das Verknüpfen externer Ressourcen wie Stylesheets und Skripts in ein HTML-Dokument beschrieben.
Syntax
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
Parameter
| Attribut | Einzelheiten |
|---|---|
charset | Gibt die Zeichenkodierung des verknüpften Dokuments an |
crossorigin | Gibt an, wie das Element Ursprungsanforderungen behandelt |
href | Gibt den Speicherort des verknüpften Dokuments an |
hreflang | Gibt die Sprache des Texts im verknüpften Dokument an |
media | Gibt an, auf welchem Gerät das verknüpfte Dokument angezeigt wird, und wird häufig verwendet, wenn Stylesheets basierend auf dem betreffenden Gerät ausgewählt werden |
rel | Erforderlich Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an |
rev | Gibt die Beziehung zwischen dem verknüpften Dokument und dem aktuellen Dokument an |
sizes | Gibt die Größe der verknüpften Ressource an. Nur wenn rel="icon" |
target | Gibt an, wo das verknüpfte Dokument geladen werden soll |
type | Gibt den Medientyp des verknüpften Dokuments an |
integrity | Gibt einen Base64-codierten Hash (sha256, sha384 oder sha512) der verknüpften Ressource an, damit der Browser seine Berechtigung überprüfen kann. |
Externes CSS-Stylesheet
<link rel="stylesheet" href="path/to.css" type="text/css">
Standardmäßig werden CSS-Tags <link> im <head> -Tag oben in Ihrem HTML-Code platziert. Auf diese Weise wird das CSS zuerst geladen und auf Ihre Seite angewendet, während es geladen wird, anstatt ungestyltes HTML anzuzeigen, bis das CSS geladen wird. Das type Attribut ist in HTML5 nicht erforderlich, da HTML5 normalerweise CSS unterstützt.
<link rel="stylesheet" href="path/to.css" type="text/css">
und
<link rel="stylesheet" href="path/to.css">
... machen Sie dasselbe in HTML5.
Eine andere, wenn auch weniger verbreitete Praxis ist die Verwendung einer @import Anweisung in direktem CSS. So was:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Synchron
<script src="path/to.js"></script>
Standardmäßig werden JavaScript-Tags <script> unmittelbar vor dem schließenden Tag </body> . Wenn Sie Ihre Skripts zuletzt laden, können die visuellen Elemente Ihrer Website schneller angezeigt werden, und Ihr JavaScript wird davon abgehalten, mit Elementen zu interagieren, die noch nicht geladen wurden.
Asynchron
<script src="path/to.js" async></script>
Wenn der geladene Javascript-Code für die Seiteninitialisierung nicht erforderlich ist, kann er alternativ asynchron geladen werden, wodurch das Laden der Seite beschleunigt wird. Bei Verwendung von async lädt der Browser den Inhalt des Skripts parallel und unterbricht nach dem vollständigen Download die HTML-Analyse, um die Javascript-Datei zu analysieren.
Aufgeschoben
<script src="path/to.js" defer></script>
Zurückgestellte Skripts sind wie asynchrone Skripte, mit der Ausnahme, dass die Analyse nur durchgeführt wird, wenn der HTML-Code vollständig analysiert wurde. Verzögerte Skripte werden garantiert in der Reihenfolge der Deklaration geladen, genau wie synchrone Skripte.
<noscript>
<noscript>JavaScript disabled</noscript>
Das <noscript> -Element definiert den Inhalt, der angezeigt werden soll, wenn der Benutzer Skripts deaktiviert hat oder der Browser die Verwendung von Skripts nicht unterstützt. Das <noscript> -Tag kann entweder im <head> oder im <body> .
Favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Verwenden Sie für PNG-Dateien den Mime-Typ image/png und für Symboldateien ( *.ico ) das Symbol image/x-icon . Für den Unterschied siehe diese SO-Frage .
Eine Datei namens favicon.ico im Stammverzeichnis Ihrer Website wird in der Regel automatisch geladen und angewendet, ohne dass ein <link> -Tag erforderlich ist. Wenn sich diese Datei ändert, können Browser langsam und hartnäckig sein, um ihren Cache zu aktualisieren.
Alternative CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Bei einigen Browsern können alternative Stylesheets angewendet werden, wenn sie angeboten werden. Standardmäßig werden sie nicht angewendet, können jedoch normalerweise über die Browsereinstellungen geändert werden:
In Firefox kann der Benutzer das Stylesheet über das Untermenü Ansicht> Seitenstil auswählen. Internet Explorer unterstützt auch diese Funktion (beginnend mit IE 8), auf die auch über Ansicht> Seitenstil (mindestens ab IE 11) zugegriffen werden kann. Chrome erfordert jedoch eine Erweiterung Verwenden Sie die Funktion (ab Version 48). Die Webseite kann auch eine eigene Benutzeroberfläche bereitstellen, über die der Benutzer die Stile wechseln kann.
(Quelle: die MDN-Dokumente )
Web-Feed
Verwenden Sie das Attribut rel="alternate" , um die rel="alternate" Ihrer Atom- / RSS-Feeds zu ermöglichen.
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
In den MDN-Dokumenten finden Sie RSS-Feeds und Atomic RSS .
Verknüpfen Sie das 'Medien'-Attribut
<link rel="stylesheet" href="test.css" media="print">
Medien legt fest, welches Stylesheet für welche Art von Medien verwendet werden soll. Wenn Sie den print wird dieses Stylesheet nur für Druckseiten angezeigt.
Der Wert dieses Attributs kann ein beliebiger mediatype (ähnlich einer CSS- Medienabfrage ).
Zurück und Weiter
Wenn eine Seite eines Teil einer Reihe von Artikeln, zum Beispiel, kann man verwenden prev und next den Seiten verweisen , die vor und nach kommen.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Hinweis zur Ressource: DNS-Prefetch, Prefetch, Prerender
Vorverbindung
Die preconnect ähnelt dem DNS dns-prefetch preconnect dass der DNS aufgelöst wird. Es wird jedoch auch der TCP-Handshake und die optionale TLS-Aushandlung durchgeführt. Dies ist eine experimentelle Funktion.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informiert Browser über das Auflösen des DNS für eine URL, sodass alle Assets dieser URL schneller geladen werden.
<link rel="dns-prefetch" href="URL">
Vorabruf
Informiert die Browser darüber, dass eine bestimmte Ressource vorabgerufen werden muss, damit sie schneller geladen werden kann.
<link rel="prefetch" href="URL">
DNS-Prefetch löst nur den Domänennamen auf, während Prefetch die angegebenen Ressourcen herunterlädt / speichert.
Prerender
Informiert Browser über das Abrufen und Rendern der URL im Hintergrund, sodass sie dem Benutzer sofort übermittelt werden können, wenn der Benutzer zu dieser URL navigiert. Dies ist eine experimentelle Funktion.
<link rel="prerender" href="URL">