수색…
소개
많은 스크립트, 아이콘 및 스타일 시트를 HTML 마크 업으로 직접 작성할 수 있지만 이러한 리소스를 자신의 파일에 포함하고 문서에 링크하는 것이 더 효과적이며보다 효율적입니다. 이 주제는 스타일 시트 W 스크립트와 같은 외부 자원을 HTML. 서로 링크하는 f}을 다룹니다.
통사론
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
매개 변수
| 속성 | 세부 |
|---|---|
charset | 링크 된 문서의 문자 인코딩을 지정합니다. |
crossorigin | 요소가 원본 교차 요청을 처리하는 방법을 지정합니다. |
href | 링크 된 문서의 위치를 지정합니다. |
hreflang | 링크 된 문서의 텍스트 언어를 지정합니다. |
media | 해당 장치를 기반으로 스타일 시트를 선택할 때 자주 사용되는 링크 된 문서가 표시 될 장치를 지정합니다. |
rel | 필수 사항 . 현재 문서와 링크 된 문서 간의 관계를 지정합니다. |
rev | 링크 된 문서와 현재 문서 간의 관계를 지정합니다. |
sizes | 링크 된 자원의 크기를 지정합니다. rel="icon" |
target | 링크 된 문서를로드 할 위치를 지정합니다. |
type | 링크 된 문서의 미디어 유형을 지정합니다. |
integrity | 브라우저가 정당성을 검증 할 수 있도록 링크 된 자원의 base64로 인코딩 된 해시 (sha256, sha384 또는 sha512)를 지정합니다. |
외부 CSS 스타일 시트
<link rel="stylesheet" href="path/to.css" type="text/css">
표준 연습은 HTML 상단의 <head> 태그 안에 CSS <link> 태그를 배치하는 것입니다. 이렇게하면 CSS가로드 될 때까지 스타일이없는 HTML을 표시하는 대신 CSS가 먼저로드되어 페이지가로드 될 때 페이지에 적용됩니다. HTML5는 일반적으로 CSS를 지원하기 때문에 HTML5에서는 type 속성이 필요하지 않습니다.
<link rel="stylesheet" href="path/to.css" type="text/css">
과
<link rel="stylesheet" href="path/to.css">
... HTML5에서도 동일한 작업을 수행합니다.
또 다른 방법은 직접적인 CSS 내에서 @import 문을 사용하는 것입니다. 이렇게 :
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
자바 스크립트
동기식
<script src="path/to.js"></script>
표준 연습은 닫는 </body> 태그 바로 앞에 JavaScript <script> 태그를 배치하는 것입니다. 스크립트를 마지막으로로드하면 사이트의 비주얼이 더 빠르게 표시되고 아직로드되지 않은 요소와 JavaScript가 상호 작용하지 못하도록 막을 수 있습니다.
비동기식
<script src="path/to.js" async></script>
또 다른 대안으로,로드중인 자바 스크립트 코드가 페이지 초기화에 필요하지 않을 때 비동기 적으로로드하여 페이지로드 속도를 높일 수 있습니다. async 사용하면 브라우저의 내용이 병렬로로드되고 완전히 다운로드되면 Javascript 파일을 구문 분석하기 위해 HTML 구문 분석이 중단됩니다.
연기 된
<script src="path/to.js" defer></script>
연기 된 스크립트는 HTML이 완전히 구문 분석 된 후에 만 구문 분석이 수행된다는 점을 제외하면 비동기 스크립트와 유사합니다. 지연된 스크립트는 동기 스크립트와 같은 방식으로 선언 된 순서로로드됩니다.
<noscript>
<noscript>JavaScript disabled</noscript>
<noscript> 요소는 사용자가 스크립트를 사용할 수 없거나 브라우저에서 스크립트 사용을 지원하지 않을 경우 표시 할 콘텐츠를 정의합니다. <noscript> 태그는 <head> 또는 <body> 배치 할 수 있습니다.
파비콘
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
PNG 파일에는 mime-type image/png 를 사용하고 아이콘 ( *.ico ) 파일에는 image/x-icon 을 사용하십시오. 차이점은 이 SO 질문을 참조하십시오.
웹 사이트 루트에있는 favicon.ico 라는 파일은 일반적으로 <link> 태그가 없어도 자동으로로드되어 적용됩니다. 이 파일이 변경되면 브라우저가 캐시를 업데이트하는 데 느리고 완고합니다.
대체 CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
일부 브라우저에서는 대체 스타일 시트가 제공되면이를 적용 할 수 있습니다. 기본적으로 적용되지 않지만 일반적으로 브라우저 설정을 통해 변경할 수 있습니다.
Firefox에서는보기> 페이지 스타일 하위 메뉴를 사용하여 스타일 시트를 선택할 수 있으며 Internet Explorer는보기> 페이지 스타일 (IE 11 이상)에서도 액세스 할 수 있지만 Internet Explorer는이 기능을 지원합니다 (IE 11 이상). 이 기능을 사용하십시오 (버전 48 현재). 웹 페이지는 사용자가 스타일을 전환 할 수 있도록 자체 사용자 인터페이스를 제공 할 수도 있습니다.
(출처 : MDN 문서 )
웹 피드
rel="alternate" 속성을 사용하여 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" />
RSS 피드 및 Atomic RSS에 대한 MDN 문서를 참조하십시오.
'미디어'속성 연결
<link rel="stylesheet" href="test.css" media="print">
Media는 어떤 유형의 미디어에 어떤 스타일 시트를 사용해야 하는지를 지정합니다. print 값을 사용하면 print 페이지에 대한 해당 스타일 시트 만 표시됩니다.
이 속성의 값은 mediatype 값 중 하나 일 수 있습니다 (CSS 미디어 쿼리 와 비슷 함).
이전 및 다음
예를 들어 페이지가 일련의 기사의 일부인 경우 prev 및 next 페이지를 가리키는 데 prev 및 next 페이지를 사용할 수 있습니다.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
리소스 힌트 : dns-prefetch, prefetch, prerender
사전 연결
preconnect 관계는 DNS를 해결한다는 점에서 dns-prefetch 와 유사합니다. 그러나 TCP 핸드 셰이크 및 선택적 TLS 협상도 수행합니다. 이는 실험적인 기능입니다.
<link rel="preconnect" href="URL">
DNS- 프리 페치
브라우저에 URL에 대한 DNS를 확인하도록 알려줌으로써 해당 URL의 모든 자산이 더 빨리로드됩니다.
<link rel="dns-prefetch" href="URL">
프리 페치
지정된 리소스를 더 빨리로드 할 수 있도록 브라우저에 미리 알려야 함을 알립니다.
<link rel="prefetch" href="URL">
DNS-Prefetch는 도메인 이름 만 분석하지만 프리 페치는 지정된 리소스를 다운로드 / 저장합니다.
미리 렌더링
브라우저가 백그라운드에서 URL을 가져오고 렌더링하도록 알려줌으로써 사용자가 해당 URL을 탐색 할 때 즉각적으로 사용자에게 전달할 수 있도록합니다. 이는 실험적인 기능입니다.
<link rel="prerender" href="URL">