HTML
Länka resurser
Sök…
Introduktion
Medan många skript, ikoner och stilark kan skrivas direkt i HTML-markering, är det bästa praxis och effektivare att inkludera dessa resurser i sin egen fil och länka dem till ditt dokument. Det här ämnet täcker att länka externa resurser som stilmallar och skript till ett HTML-dokument.
Syntax
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
parametrar
| Attribut | detaljer |
|---|---|
charset | Anger teckenkodningen för det länkade dokumentet |
crossorigin | Anger hur elementet hanterar förfrågningar om korsuppkomst |
href | Anger platsen för det länkade dokumentet |
hreflang | Anger språket på texten i det länkade dokumentet |
media | Anger på vilken enhet det länkade dokumentet ska visas, ofta används för att välja formatmall baserat på den aktuella enheten |
rel | Krävs . Anger förhållandet mellan det aktuella dokumentet och det länkade dokumentet |
rev | Anger förhållandet mellan det länkade dokumentet och det aktuella dokumentet |
sizes | Anger storleken på den länkade resursen. Endast när rel="icon" |
target | Anger var det länkade dokumentet ska laddas |
type | Anger mediatypen för det länkade dokumentet |
integrity | Anger en bas64-kodad hash (sha256, sha384 eller sha512) för den länkade resursen så att webbläsaren kan verifiera dess legitimitet. |
Externt CSS-formatmall
<link rel="stylesheet" href="path/to.css" type="text/css">
Standardmetoden är att placera CSS <link> -taggar i <head> -taggen högst upp på din HTML. På så sätt laddas CSS först och kommer att tillämpas på din sida när den laddas, snarare än att visa ostylerad HTML tills CSS laddas. Den type attributet är inte nödvändigt i HTML5, eftersom HTML5 stöder vanligtvis CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
och
<link rel="stylesheet" href="path/to.css">
... gör samma sak i HTML5.
En annan, men mindre vanlig praxis, är att använda ett @import uttalande i direkt CSS. Så här:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Synkron
<script src="path/to.js"></script>
Standardpraxis är att placera JavaScript <script> -taggar strax före den stängande </body> -taggen. Om du laddar dina skript senast gör det möjligt för webbplatsens bilder att visas snabbare och avskräcker din JavaScript från att försöka interagera med element som ännu inte laddats.
Asynchronous
<script src="path/to.js" async></script>
Ett annat alternativ, när Javascript-koden som laddas inte är nödvändig för sidinitialisering, kan den laddas asynkront, vilket påskyndar sidbelastningen. Med hjälp av async kommer webbläsaren att ladda innehållet i skriptet parallellt och, när det har laddats ner helt, avbryter HTML-parsningen för att analysera Javascript-filen.
uppskjuten
<script src="path/to.js" defer></script>
Uppskjutna skript är som async-skript, med undantag för att parsningen endast kommer att utföras när HTML är fullständigt analyserad. Uppskjutna skript garanteras att laddas i deklarationsordningen, på samma sätt som synkrona skript.
<Noscript>
<noscript>JavaScript disabled</noscript>
<noscript> definierar innehåll som ska visas om användaren har skript inaktiverade eller om webbläsaren inte stöder användning av skript. <noscript> -taggen kan placeras i antingen <head> eller <body> .
favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Använd image/png av image/png för PNG-filer och image/x-icon för ikonfiler ( *.ico ). För skillnaden, se denna SO-fråga .
En fil med namnet favicon.ico i roten på din webbplats kommer vanligtvis att laddas och tillämpas automatiskt utan behov av en <link> -tagg. Om den här filen ändras kan webbläsare vara långsamma och envisa när de uppdaterar sin cache.
Alternativ CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Vissa webbläsare tillåter alternativa stilark att tillämpa om de erbjuds. Som standard kommer de inte att tillämpas, men vanligtvis kan de ändras genom webbläsarinställningarna:
Firefox låter användaren välja formatmallen med undermenyn Visa> Sidastil, Internet Explorer stöder också den här funktionen (börjar med IE 8), också åtkomst från Visa> Sidastil (åtminstone från IE 11), men Chrome kräver en tillägg till använd funktionen (från version 48). Webbsidan kan också tillhandahålla ett eget användargränssnitt för att låta användaren växla stilar.
(Källa: MDN Docs )
Webbflöde
Använd attributet rel="alternate" att möjliggöra upptäckt av dina Atom / RSS-flöden.
<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" />
Se MDN-dokument för RSS-flöden och Atomic RSS .
Länka "media" -attribut
<link rel="stylesheet" href="test.css" media="print">
Media anger vilket formatmall som ska användas för vilken typ av media. Om du använder print visas bara det formatmallen för utskriftssidor.
Värdet på detta attribut kan vara vilket som helst av mediatype (liknande en CSS- mediefråga ).
Föregående och Nästa
När en sida till exempel är en del av en serie artiklar kan man använda prev och next att peka på sidor som kommer före och efter.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Resurs Tips: dns-prefetch, prefetch, prerender
Preconnect
preconnect liknar dns-prefetch det kommer att lösa DNS. Men det kommer också att göra TCP-handskakning och valfri TLS-förhandling. Detta är en experimentell funktion.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informerar webbläsare om att lösa DNS för en URL, så att alla tillgångar från denna URL laddas snabbare.
<link rel="dns-prefetch" href="URL">
prefetch
Informerar webbläsarna att en given resurs bör förhämtas så att den kan laddas snabbare.
<link rel="prefetch" href="URL">
DNS-Prefetch löser endast domännamnet medan prefetch hämtar / lagrar de angivna resurserna.
renderare
Informerar webbläsare att hämta och återge URL: en i bakgrunden, så att de kan levereras till användaren omedelbart när användaren navigerar till den webbadressen. Detta är en experimentell funktion.
<link rel="prerender" href="URL">