HTML
Łączenie zasobów
Szukaj…
Wprowadzenie
Chociaż wiele skryptów, ikon i arkuszy stylów można zapisać bezpośrednio w znacznikach HTML, najlepszą praktyką i bardziej wydajne jest włączenie tych zasobów do własnego pliku i połączenie ich z dokumentem. Ten temat obejmuje łączenie zewnętrznych zasobów, takich jak arkusze stylów i skrypty, z dokumentem HTML.
Składnia
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
Parametry
| Atrybut | Detale |
|---|---|
charset | Określa kodowanie znaków połączonego dokumentu |
crossorigin | Określa sposób, w jaki element obsługuje żądania krzyżowego pochodzenia |
href | Określa lokalizację połączonego dokumentu |
hreflang | Określa język tekstu w połączonym dokumencie |
media | Określa, na jakim urządzeniu będzie wyświetlany połączony dokument, często używany do wybierania arkuszy stylów na podstawie danego urządzenia |
rel | Wymagane Określa związek między bieżącym dokumentem a połączonym dokumentem |
rev | Określa związek między połączonym dokumentem a bieżącym dokumentem |
sizes | Określa rozmiar połączonego zasobu. Tylko gdy rel="icon" |
target | Określa miejsce załadowania połączonego dokumentu |
type | Określa typ nośnika połączonego dokumentu |
integrity | Określa hash zakodowany w standardzie base64 (sha256, sha384 lub sha512) połączonego zasobu, umożliwiając przeglądarce sprawdzenie jego zasadności. |
Zewnętrzny arkusz stylów CSS
<link rel="stylesheet" href="path/to.css" type="text/css">
Standardową praktyką jest umieszczanie <link> CSS <link> wewnątrz znacznika <head> u góry kodu HTML. W ten sposób CSS zostanie załadowany jako pierwszy i zastosuje się do twojej strony podczas ładowania, zamiast pokazywać niestylowany HTML aż do załadowania CSS. Atrybut type nie jest konieczny w HTML5, ponieważ HTML5 zwykle obsługuje CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
i
<link rel="stylesheet" href="path/to.css">
... zrób to samo w HTML5.
Inną, choć mniej powszechną praktyką, jest użycie instrukcji @import w bezpośrednim CSS. Lubię to:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Synchroniczny
<script src="path/to.js"></script>
Standardową praktyką jest umieszczanie tagów JavaScript <script> tuż przed tagiem zamykającym </body> . Ostatnie ładowanie skryptów pozwala na szybsze wyświetlanie wizualizacji witryny i zniechęca JavaScript do próby interakcji z elementami, które nie zostały jeszcze załadowane.
Asynchroniczny
<script src="path/to.js" async></script>
Inna alternatywa, gdy ładowany kod JavaScript nie jest konieczny do inicjalizacji strony, można go załadować asynchronicznie, przyspieszając ładowanie strony. Za pomocą async przeglądarka załaduje zawartość skryptu równolegle, a po jego pełnym pobraniu przerwie parsowanie HTML w celu parsowania pliku JavaScript.
Odroczony
<script src="path/to.js" defer></script>
Odroczone skrypty są jak skrypty asynchroniczne, z tym wyjątkiem, że parsowanie zostanie wykonane dopiero po pełnym przeanalizowaniu kodu HTML. Odroczone skrypty gwarantują ładowanie w kolejności deklaracji, tak samo jak skrypty synchroniczne.
<noscript>
<noscript>JavaScript disabled</noscript>
Element <noscript> określa treść, która ma być wyświetlana, jeśli użytkownik ma wyłączone skrypty lub jeśli przeglądarka nie obsługuje używania skryptów. Znacznik <noscript> można umieścić w <head> lub <body> .
Favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Użyj plików typu mime image/png dla plików PNG i image/x-icon dla plików ikon ( *.ico ). Dla różnicy zobacz to SO pytanie .
Plik o nazwie favicon.ico w katalogu głównym witryny zazwyczaj jest ładowany i stosowany automatycznie, bez potrzeby używania tagu <link> . Jeśli ten plik kiedykolwiek się zmieni, przeglądarki mogą być powolne i uparte w aktualizowaniu pamięci podręcznej.
Alternatywny CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Niektóre przeglądarki zezwalają na stosowanie alternatywnych arkuszy stylów, jeśli są oferowane. Domyślnie nie będą stosowane, ale zwykle można je zmienić w ustawieniach przeglądarki:
Firefox pozwala użytkownikowi wybrać arkusz stylów za pomocą podmenu Widok> Styl strony, Internet Explorer obsługuje również tę funkcję (od IE 8), do której można również uzyskać dostęp z Widok> Styl strony (przynajmniej od IE 11), ale Chrome wymaga rozszerzenia do użyj funkcji (od wersji 48). Strona internetowa może również zawierać własny interfejs użytkownika, umożliwiający użytkownikowi zmianę stylu.
(Źródło: Dokumenty MDN )
Kanał internetowy
Użyj atrybutu rel="alternate" aby umożliwić wykrywanie kanałów Atom / RSS.
<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" />
Zobacz dokumentację MDN dla kanałów RSS i Atomic RSS .
Link do atrybutu „media”
<link rel="stylesheet" href="test.css" media="print">
Nośnik określa, jakiego arkusza stylów należy użyć dla jakiego rodzaju nośnika. Użycie wartości print spowoduje wyświetlenie tego arkusza stylów tylko w przypadku stron drukowania.
Wartością tego atrybutu może być dowolna z wartości mediatype (podobna do zapytania medialnego CSS).
Poprzedni i następny
Na przykład, gdy strona jest częścią serii artykułów, można użyć prev i next aby wskazać strony, które pojawiają się przed i po.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Wskazówka dotycząca zasobów: dns-prefetch, prefetch, prerender
Połącz wstępnie
preconnect relacja jest podobna do dns-prefetch , że będzie ona rozwiązać DNS. Jednak spowoduje to również uzgodnienie protokołu TCP i opcjonalne negocjacje TLS. To jest funkcja eksperymentalna.
<link rel="preconnect" href="URL">
Wstępne pobieranie DNS
Informuje przeglądarki, aby rozpoznały DNS dla adresu URL, aby wszystkie zasoby z tego adresu URL ładowały się szybciej.
<link rel="dns-prefetch" href="URL">
Pobranie wstępne
Informuje przeglądarki, że dany zasób powinien zostać wstępnie pobrany, aby można go było szybciej załadować.
<link rel="prefetch" href="URL">
Funkcja DNS-Prefetch rozwiązuje tylko nazwę domeny, podczas gdy pobieranie wstępne pobiera / przechowuje określone zasoby.
Prerender
Informuje przeglądarki, aby pobierały i renderowały adres URL w tle, dzięki czemu mogą one zostać dostarczone użytkownikowi natychmiast po przejściu do tego adresu URL. To jest funkcja eksperymentalna.
<link rel="prerender" href="URL">