HTML
Hulpbronnen koppelen
Zoeken…
Invoering
Hoewel veel scripts, pictogrammen en stylesheets rechtstreeks in HTML-opmaak kunnen worden geschreven, is het best en efficiënter om deze bronnen in hun eigen bestand op te nemen en aan uw document te koppelen. Dit onderwerp behandelt het koppelen van externe bronnen zoals stylesheets en scripts aan een HTML-document.
Syntaxis
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
parameters
| Attribuut | Details |
|---|---|
charset | Hiermee geeft u de tekencodering van het gekoppelde document op |
crossorigin | Specificeert hoe het element omgaat met aanvragen van oorsprong |
href | Specificeert de locatie van het gekoppelde document |
hreflang | Specificeert de taal van de tekst in het gekoppelde document |
media | Geeft aan op welk apparaat het gekoppelde document wordt weergegeven, vaak gebruikt bij het selecteren van stylesheets op basis van het betreffende apparaat |
rel | Vereist Specificeert de relatie tussen het huidige document en het gekoppelde document |
rev | Specificeert de relatie tussen het gekoppelde document en het huidige document |
sizes | Specificeert de grootte van de gekoppelde resource. Alleen wanneer rel="icon" |
target | Geeft aan waar het gekoppelde document moet worden geladen |
type | Specificeert het mediatype van het gekoppelde document |
integrity | Geeft een met base64 gecodeerde hash (sha256, sha384 of sha512) van de gekoppelde bron op, zodat de browser zijn legitimiteit kan verifiëren. |
Externe CSS-stylesheet
<link rel="stylesheet" href="path/to.css" type="text/css">
De standaardprocedure is om CSS <link> -tags in de <head> -tag boven aan uw HTML te plaatsen. Op deze manier wordt de CSS eerst geladen en is deze van toepassing op uw pagina tijdens het laden, in plaats van dat HTML zonder stijl wordt weergegeven totdat de CSS is geladen. Het type attribuut is niet nodig in HTML5, omdat HTML5 meestal CSS ondersteunt.
<link rel="stylesheet" href="path/to.css" type="text/css">
en
<link rel="stylesheet" href="path/to.css">
... doe hetzelfde in HTML5.
Een andere, hoewel minder gangbare praktijk, is het gebruik van een @import statement in directe CSS. Soortgelijk:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
synchrone
<script src="path/to.js"></script>
Standaardpraktijk is het plaatsen van JavaScript <script> -tags net voor de afsluitende </body> -tag. Door uw scripts als laatste te laden, kunnen de visuals van uw site sneller verschijnen en wordt uw JavaScript ontmoedigd te proberen te communiceren met elementen die nog niet zijn geladen.
Asynchronous
<script src="path/to.js" async></script>
Een ander alternatief, wanneer de JavaScript-code die wordt geladen niet nodig is voor pagina-initialisatie, kan deze asynchroon worden geladen, waardoor het laden van de pagina wordt versneld. Met behulp van async laadt de browser de inhoud van het script parallel en onderbreekt de HTML-parsing zodra deze volledig is gedownload om het JavaScript-bestand te ontleden.
uitgestelde
<script src="path/to.js" defer></script>
Uitgestelde scripts zijn vergelijkbaar met async-scripts, behalve dat het parseren alleen wordt uitgevoerd als de HTML volledig is ontleed. Uitgestelde scripts worden gegarandeerd geladen in de volgorde van aangifte, op dezelfde manier als synchrone scripts.
<Noscript>
<noscript>JavaScript disabled</noscript>
Het element <noscript> definieert de inhoud die moet worden weergegeven als de gebruiker scripts heeft uitgeschakeld of als de browser het gebruik van scripts niet ondersteunt. De tag <noscript> kan in de <head> of de <body> .
favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Gebruik het mime-type image/png voor PNG-bestanden en image/x-icon voor icon ( *.ico ) bestanden. Voor het verschil, zie deze ZO-vraag .
Een bestand met de naam favicon.ico in de hoofdmap van uw website wordt meestal automatisch geladen en toegepast, zonder dat u een <link> -tag nodig hebt. Als dit bestand ooit verandert, kunnen browsers traag en koppig zijn in het bijwerken van hun cache.
Alternatieve CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
In sommige browsers kunnen alternatieve stylesheets worden toegepast als deze worden aangeboden. Standaard worden ze niet toegepast, maar meestal kunnen ze worden gewijzigd via de browserinstellingen:
Firefox laat de gebruiker de stylesheet selecteren met behulp van het menu Beeld> Paginastijl, Internet Explorer ondersteunt ook deze functie (beginnend met IE 8), ook toegankelijk via Beeld> Paginastijl (ten minste vanaf IE 11), maar Chrome vereist een extensie voor gebruik de functie (vanaf versie 48). De webpagina kan ook een eigen gebruikersinterface bieden om de gebruiker van stijl te laten wisselen.
(Bron: de MDN Docs )
Webfeed
Gebruik het kenmerk rel="alternate" om de ontdekbaarheid van uw Atom / RSS-feeds mogelijk te maken.
<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" />
Zie de MDN-documenten voor RSS-feeds en Atomic RSS .
Link 'media' attribuut
<link rel="stylesheet" href="test.css" media="print">
Media geeft aan welk stijlblad moet worden gebruikt voor welk type media. Als u de print gebruikt, wordt dat stijlblad alleen voor afdrukpagina's weergegeven.
De waarde van dit kenmerk kan elk van de mediatype waarden zijn (vergelijkbaar met een CSS- mediaquery ).
Vorige en volgende
Wanneer een pagina bijvoorbeeld deel uitmaakt van een reeks artikelen, kunt u prev en next om te verwijzen naar pagina's die voor en na komen.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Resource Hint: dns-prefetch, prefetch, prerender
preconnect
De preconnect relatie is vergelijkbaar met dns-prefetch omdat de DNS wordt opgelost. Het maakt echter ook de TCP-handshake en optionele TLS-onderhandeling. Dit is een experimentele functie.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informeert browsers om de DNS voor een URL op te lossen, zodat alle activa van die URL sneller worden geladen.
<link rel="dns-prefetch" href="URL">
prefetch
Laat de browsers weten dat een bepaalde bron vooraf moet worden opgehaald, zodat deze sneller kan worden geladen.
<link rel="prefetch" href="URL">
DNS-Prefetch lost alleen de domeinnaam op, terwijl prefetch de opgegeven bronnen downloadt / opslaat.
prerender
Informeert browsers om de URL op te halen en op de achtergrond weer te geven, zodat deze onmiddellijk aan de gebruiker kunnen worden bezorgd wanneer de gebruiker naar die URL navigeert. Dit is een experimentele functie.
<link rel="prerender" href="URL">