Hướng dẫn what is link tag in css? - thẻ liên kết trong css là gì?

Question

Phần tử HTML ____10 chỉ định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài. Yếu tố này được sử dụng phổ biến nhất để liên kết với các kiểu dáng, nhưng cũng được sử dụng để thiết lập các biểu tượng trang web (cả biểu tượng và biểu tượng kiểu "favicon" cho màn hình chính và ứng dụng trên thiết bị di động) trong số những thứ khác.

<link rel="icon" href="favicon.ico" />

0 HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

Nội dung chính Show

Thuộc tính
Các thuộc tính không chuẩn
Thuộc tính lỗi thời
Bao gồm một bảng kiểu
Cung cấp các kiểu dáng thay thế
Cung cấp biểu tượng cho các bối cảnh sử dụng khác nhau
Đang tải tài nguyên có điều kiện với các truy vấn truyền thông
Các sự kiện tải kiểu kiểu
Các ví dụ tải trước
Tóm tắt kỹ thuật
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Liên kết thẻ là gì?
Việc sử dụng liên kết là gì?
Bạn có thể đặt một liên kết trong CSS không?

Thử nó

Để liên kết bảng kiểu bên ngoài, bạn sẽ bao gồm một phần tử

<link rel="icon" href="favicon.ico" />

0 bên trong

<link rel="icon" href="favicon.ico" />

2 của bạn như thế này:

<link href="main.css" rel="stylesheet" />

Ví dụ đơn giản này cung cấp đường dẫn đến bảng kiểu bên trong thuộc tính

<link rel="icon" href="favicon.ico" />

3 và thuộc tính

<link rel="icon" href="favicon.ico" />

4 có giá trị là

<link rel="icon" href="favicon.ico" />

5.

<link rel="icon" href="favicon.ico" />

4 là viết tắt của "mối quan hệ" và có lẽ là một trong những tính năng chính của phần tử ____10 - giá trị biểu thị cách mục được liên kết với tài liệu chứa. Như bạn sẽ thấy từ tham chiếu loại liên kết của chúng tôi, có nhiều loại mối quan hệ.

Có một số loại phổ biến khác mà bạn sẽ gặp. Ví dụ: một liên kết đến favicon của trang web:

<link rel="icon" href="favicon.ico" />

Có một số giá trị biểu tượng

<link rel="icon" href="favicon.ico" />

4 khác, chủ yếu được sử dụng để chỉ ra các loại biểu tượng đặc biệt để sử dụng trên các nền tảng di động khác nhau, ví dụ:

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

Thuộc tính

<link rel="icon" href="favicon.ico" />

9 chỉ ra kích thước biểu tượng, trong khi

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

0 chứa loại MIME của tài nguyên được liên kết. Chúng cung cấp các gợi ý hữu ích để cho phép trình duyệt chọn biểu tượng phù hợp nhất có sẵn.

Bạn cũng có thể cung cấp một loại phương tiện hoặc truy vấn bên trong thuộc tính

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

1; Tài nguyên này sau đó sẽ chỉ được tải nếu điều kiện phương tiện là đúng. Ví dụ:

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

Một số tính năng hiệu suất và bảo mật mới thú vị cũng đã được thêm vào phần tử

<link rel="icon" href="favicon.ico" />

0. Lấy ví dụ này:

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

Giá trị

<link rel="icon" href="favicon.ico" />

4 của

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

4 chỉ ra rằng trình duyệt nên tải trước tài nguyên này (xem nội dung tải trước với rel = "preload" để biết thêm chi tiết), với thuộc tính

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

5 cho biết loại nội dung cụ thể được tìm nạp. Thuộc tính

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

6 cho biết liệu tài nguyên có nên được tìm nạp với yêu cầu CORS hay không.

Ghi chú sử dụng khác:

Phần tử

<link rel="icon" href="favicon.ico" />

0 có thể xảy ra trong phần tử

<link rel="icon" href="favicon.ico" />

2 hoặc

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

9, tùy thuộc vào việc nó có loại liên kết là cơ thể. Ví dụ, loại liên kết

<link rel="icon" href="favicon.ico" />

5 là cơ thể-OK, và do đó

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

1 được cho phép trong cơ thể. Tuy nhiên, đây không phải là một thực hành tốt để làm theo; Sẽ có ý nghĩa hơn khi tách các yếu tố

<link rel="icon" href="favicon.ico" />

0 của bạn khỏi nội dung cơ thể của bạn, đưa chúng vào

<link rel="icon" href="favicon.ico" />

2.body-ok. For example, the

<link rel="icon" href="favicon.ico" />

5 link type is body-ok, and therefore

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

1 is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your

<link rel="icon" href="favicon.ico" />

0 elements from your body content, putting them in the

<link rel="icon" href="favicon.ico" />

2.

Khi sử dụng
```
<link rel="icon" href="favicon.ico" />
```
0 để thiết lập favicon cho một trang web và trang web của bạn sử dụng Chính sách bảo mật nội dung (CSP) để tăng cường bảo mật của nó, chính sách áp dụng cho Favicon. Nếu bạn gặp sự cố với Favicon không tải, hãy xác minh rằng Chỉ thị
```
<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />
```
6 của
```
<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />
```
5 không ngăn được quyền truy cập vào nó.
Thông số kỹ thuật HTML và XHTML xác định trình xử lý sự kiện cho phần tử
```
<link rel="icon" href="favicon.ico" />
```
0, nhưng không rõ chúng sẽ được sử dụng như thế nào.

Theo XHTML 1.0, các phần tử void như

<link rel="icon" href="favicon.ico" />

0 yêu cầu một dấu gạch chéo:

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

9.

WebTV hỗ trợ việc sử dụng giá trị

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

0 cho

<link rel="icon" href="favicon.ico" />

4 để tải trước trang tiếp theo trong một chuỗi tài liệu.

Thuộc tính

Yếu tố này bao gồm các thuộc tính toàn cầu.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />
5

Thuộc tính này chỉ được sử dụng khi

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3 hoặc

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

4 đã được đặt trên phần tử

<link rel="icon" href="favicon.ico" />

0. Nó chỉ định loại nội dung được tải bởi ____10, cần thiết cho yêu cầu khớp, áp dụng chính sách bảo mật nội dung chính xác và cài đặt tiêu đề yêu cầu

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

7 chính xác. Hơn nữa,

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3 sử dụng điều này như một tín hiệu để ưu tiên yêu cầu. Bảng dưới đây liệt kê các giá trị hợp lệ cho thuộc tính này và các yếu tố hoặc tài nguyên mà chúng áp dụng.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />
6

Thuộc tính được liệt kê này cho biết liệu CORS có phải được sử dụng khi tìm nạp tài nguyên hay không. Hình ảnh hỗ trợ CORS có thể được sử dụng lại trong phần tử

<link href="style.css" rel="stylesheet" />

0 mà không bị nhiễm độc. Các giá trị được phép là:

<link href="style.css" rel="stylesheet" />

1

Một yêu cầu có nguồn gốc chéo (tức là với tiêu đề

<link href="style.css" rel="stylesheet" />

2 HTTP) được thực hiện, nhưng không có thông tin xác thực được gửi (tức là không có cookie, chứng chỉ X.509 hoặc xác thực cơ bản HTTP). Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (bằng cách không đặt tiêu đề

<link href="style.css" rel="stylesheet" />

3 HTTP), tài nguyên sẽ bị ô nhiễm và việc sử dụng của nó bị hạn chế.

<link href="style.css" rel="stylesheet" />

4

Một yêu cầu có nguồn gốc chéo (nghĩa là với tiêu đề HTTP

<link href="style.css" rel="stylesheet" />

2) được thực hiện cùng với thông tin xác thực được gửi (nghĩa là cookie, chứng chỉ và/hoặc xác thực cơ bản HTTP được thực hiện). Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (thông qua tiêu đề

<link href="style.css" rel="stylesheet" />

6 HTTP), tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế.

Nếu thuộc tính không có mặt, tài nguyên được tìm nạp mà không có yêu cầu CORS (tức là mà không gửi tiêu đề

<link href="style.css" rel="stylesheet" />

2 HTTP), ngăn chặn việc sử dụng không bị lỗi. Nếu không hợp lệ, nó được xử lý như thể từ khóa được liệt kê ẩn danh được sử dụng. Xem các thuộc tính CASS Cài đặt để biết thêm thông tin.anonymous was used. See CORS settings attributes for additional information.

<link href="style.css" rel="stylesheet" />
8DeprecatedNon-standard Deprecated Non-standard

Chỉ dành cho

<link href="style.css" rel="stylesheet" />

9, thuộc tính boolean

<link href="style.css" rel="stylesheet" />

8 cho biết liệu bảng kiểu được mô tả có nên được tải và áp dụng cho tài liệu hay không. Nếu

<link href="style.css" rel="stylesheet" />

8 được chỉ định trong HTML khi được tải, bảng kiểu sẽ không được tải trong quá trình tải trang. Thay vào đó, bảng kiểu sẽ được tải theo yêu cầu, nếu và khi thuộc tính

<link href="style.css" rel="stylesheet" />

8 được thay đổi thành

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

3 hoặc bị xóa.

Đặt thuộc tính

<link href="style.css" rel="stylesheet" />

8 trong DOM làm cho bảng kiểu bị xóa khỏi danh sách

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

5 của tài liệu.

<link href="default.css" rel="stylesheet" title="Default Style" /> <link href="fancy.css" rel="alternate stylesheet" title="Fancy" /> <link href="basic.css" rel="alternate stylesheet" title="Basic" />
6Experimental Experimental

Cung cấp một gợi ý về mức độ ưu tiên tương đối để sử dụng khi tìm nạp tài nguyên được tải sẵn. Giá trị cho phép:

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

7

Báo hiệu một phép tìm nạp ưu tiên cao so với các tài nguyên khác cùng loại.

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

8

Báo hiệu một phép tìm nạp ưu tiên thấp so với các tài nguyên khác cùng loại.

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

9

Mặc định: Tín hiệu Xác định tự động của mức độ ưu tiên tìm nạp so với các tài nguyên khác cùng loại.

<link rel="icon" href="favicon.ico" />
3

Thuộc tính này chỉ định URL của tài nguyên được liên kết. Một URL có thể là tuyệt đối hoặc tương đối.

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png" />  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" />  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />  <link rel="apple-touch-icon-precomposed" href="favicon57.png" />  <link rel="icon" href="favicon32.png" />
1

Thuộc tính này chỉ ra ngôn ngữ của tài nguyên được liên kết. Nó hoàn toàn là tư vấn. Các giá trị được phép được chỉ định bởi RFC 5646: Thẻ để xác định ngôn ngữ (còn được gọi là BCP 47). Chỉ sử dụng thuộc tính này nếu thuộc tính

<link rel="icon" href="favicon.ico" />

3 có mặt.

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png" />  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" />  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />  <link rel="apple-touch-icon-precomposed" href="favicon57.png" />  <link rel="icon" href="favicon32.png" />
3

Chỉ dành cho

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3 và

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

5, thuộc tính

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

3 là thuộc tính kích thước cho biết đã tải trước tài nguyên thích hợp được sử dụng bởi phần tử

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

7 với các giá trị tương ứng cho các thuộc tính

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

8 và

<link rel="icon" href="favicon.ico" />

9 của nó.

<link href="print.css" rel="stylesheet" media="print" /> <link href="mobile.css" rel="stylesheet" media="all" /> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" /> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" />
0

Chỉ dành cho

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3 và

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

5, thuộc tính

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />

0 là thuộc tính Nguồn cho biết đã tải trước tài nguyên thích hợp được sử dụng bởi phần tử

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

7 với các giá trị tương ứng cho các thuộc tính

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

8 và

<link rel="icon" href="favicon.ico" />

9 của nó.

<link href="print.css" rel="stylesheet" media="print" /> <link href="mobile.css" rel="stylesheet" media="all" /> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" /> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" />
7

Chứa siêu dữ liệu nội tuyến-một hàm băm mật mã được mã hóa cơ sở64 của tài nguyên (tệp) mà bạn đang nói với trình duyệt để tìm nạp. Trình duyệt có thể sử dụng điều này để xác minh rằng tài nguyên được tìm nạp đã được cung cấp không có thao tác bất ngờ. Xem tính toàn vẹn của Subresource.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />
1

Thuộc tính này chỉ định các phương tiện mà tài nguyên được liên kết áp dụng cho. Giá trị của nó phải là một loại truy vấn phương tiện / phương tiện truyền thông. Thuộc tính này chủ yếu hữu ích khi liên kết với các bảng kiểu bên ngoài - nó cho phép tác nhân người dùng chọn một tác nhân thích nghi tốt nhất cho thiết bị mà nó chạy.

Note:

Trong HTML 4, đây chỉ có thể là một danh sách phân tách không gian trắng đơn giản theo nghĩa đen mô tả phương tiện, tức là, các loại phương tiện và nhóm, trong đó được xác định và cho phép là giá trị cho thuộc tính này, chẳng hạn như

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />

9,

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

0,

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

1,

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

2. HTML5 đã mở rộng điều này cho bất kỳ loại truy vấn truyền thông nào, là một siêu của các giá trị được phép của HTML 4.

Các trình duyệt không hỗ trợ các truy vấn phương tiện CSS sẽ không nhất thiết nhận ra liên kết đầy đủ; Đừng quên đặt các liên kết dự phòng, bộ truy vấn phương tiện bị hạn chế được xác định trong HTML 4.

<script> const stylesheet = document.querySelector("#my-stylesheet"); stylesheet.onload = () => { // Do something interesting; the sheet has been loaded }; stylesheet.onerror = () => { console.log("An error occurred loading the stylesheet!"); }; </script> <link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
3Secure contextexperimental Secure context Experimental

Xác định một tài nguyên có thể được yêu cầu bởi điều hướng tiếp theo và tác nhân người dùng nên truy xuất nó. Điều này cho phép tác nhân người dùng phản hồi nhanh hơn khi tài nguyên được yêu cầu trong tương lai.

<script> const stylesheet = document.querySelector("#my-stylesheet"); stylesheet.onload = () => { // Do something interesting; the sheet has been loaded }; stylesheet.onerror = () => { console.log("An error occurred loading the stylesheet!"); }; </script> <link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
4

Một chuỗi chỉ ra người giới thiệu nào sẽ sử dụng khi tìm nạp tài nguyên:

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

5 có nghĩa là tiêu đề

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

6 sẽ không được gửi.

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

7 có nghĩa là không có tiêu đề

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

6 sẽ được gửi khi điều hướng đến một nguồn gốc mà không có TLS (HTTPS). Đây là hành vi mặc định của tác nhân người dùng, nếu không có chính sách nào được chỉ định.

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

9 có nghĩa là người giới thiệu sẽ là nguồn gốc của trang, gần như là sơ đồ, máy chủ và cổng.

```
<link rel="icon" href="favicon.ico" />
```
00 có nghĩa là việc điều hướng đến các nguồn gốc khác sẽ được giới hạn trong sơ đồ, máy chủ và cổng, trong khi điều hướng trên cùng một nguồn gốc sẽ bao gồm đường dẫn của người giới thiệu.
```
<link rel="icon" href="favicon.ico" />
```
01 có nghĩa là người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn (nhưng không phải là đoạn, mật khẩu hoặc tên người dùng). Trường hợp này không an toàn vì nó có thể rò rỉ nguồn gốc và đường dẫn từ các tài nguyên được bảo vệ TLS đến nguồn gốc không an toàn.

<link rel="icon" href="favicon.ico" />
4

Thuộc tính này đặt tên cho một mối quan hệ của tài liệu được liên kết với tài liệu hiện tại. Thuộc tính phải là một danh sách phân tách không gian của các giá trị loại liên kết.

<link rel="icon" href="favicon.ico" />
9Experimental Experimental

Thuộc tính này xác định kích thước của các biểu tượng cho phương tiện trực quan có trong tài nguyên. Nó chỉ có mặt nếu

<link rel="icon" href="favicon.ico" />

4 chứa giá trị

<link rel="icon" href="favicon.ico" />

05 hoặc loại không chuẩn như

<link rel="icon" href="favicon.ico" />

06 của Apple. Nó có thể có các giá trị sau:

```
<link rel="icon" href="favicon.ico" />
```
07, có nghĩa là biểu tượng có thể được chia tỷ lệ theo bất kỳ kích thước nào như ở định dạng vectơ, như
```
<link rel="icon" href="favicon.ico" />
```
08.
Một danh sách không gian trắng phân tách các kích thước, mỗi kích thước ở định dạng
```
<link rel="icon" href="favicon.ico" />
```
09 hoặc
```
<link rel="icon" href="favicon.ico" />
```
10. Mỗi kích thước này phải được chứa trong tài nguyên.

Lưu ý: Hầu hết các định dạng biểu tượng chỉ có thể lưu trữ một biểu tượng duy nhất; Do đó, hầu hết thời gian thuộc tính

<link rel="icon" href="favicon.ico" />

9 chỉ chứa một mục. Định dạng ICO của MS, cũng như ICN của Apple. ICO có mặt khắp nơi hơn, vì vậy bạn nên sử dụng định dạng này nếu hỗ trợ trình duyệt chéo là một mối quan tâm (đặc biệt là đối với các phiên bản IE cũ). Most icon formats are only able to store one single icon; therefore most of the time the

<link rel="icon" href="favicon.ico" />

9 attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).

<link rel="icon" href="favicon.ico" />
12

Thuộc tính

<link rel="icon" href="favicon.ico" />

12 có ngữ nghĩa đặc biệt trên phần tử

<link rel="icon" href="favicon.ico" />

0. Khi được sử dụng trên

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

1, nó xác định bảng kiểu mặc định hoặc thay thế.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />
0

Thuộc tính này được sử dụng để xác định loại nội dung được liên kết với. Giá trị của thuộc tính phải là loại MIME như văn bản/HTML, Text/CSS, v.v. Việc sử dụng phổ biến của thuộc tính này là xác định loại bảng kiểu được tham chiếu (chẳng hạn như văn bản/CSS), nhưng cho rằng CSS là ngôn ngữ biểu định kiểu duy nhất được sử dụng trên web, không chỉ có thể bỏ qua thuộc tính

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

0, mà còn là thực sự bây giờ được đề xuất thực hành. Nó cũng được sử dụng trên các loại liên kết

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3, để đảm bảo trình duyệt chỉ tải xuống các loại tệp mà nó hỗ trợ.text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

0 attribute, but is actually now recommended practice. It is also used on

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3 link types, to make sure the browser only downloads file types that it supports.

Các thuộc tính không chuẩn

<link rel="icon" href="favicon.ico" />

19Non-standardDeprecated Non-standard Deprecated

Giá trị của thuộc tính này cung cấp thông tin về các chức năng có thể được thực hiện trên một đối tượng. Các giá trị thường được đưa ra bởi giao thức HTTP khi nó được sử dụng, nhưng nó có thể (vì lý do tương tự như đối với thuộc tính tiêu đề) hữu ích để bao gồm thông tin tư vấn trước trong liên kết. Ví dụ: trình duyệt có thể chọn một kết xuất khác nhau của một liên kết làm hàm của các phương thức được chỉ định; Một cái gì đó có thể tìm kiếm có thể nhận được một biểu tượng khác hoặc một liên kết bên ngoài có thể hiển thị với một dấu hiệu rời khỏi trang web hiện tại. Thuộc tính này không được hiểu rõ cũng như không được hỗ trợ, ngay cả bởi trình duyệt xác định, Internet Explorer 4.title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.

<link rel="icon" href="favicon.ico" />
20Deprecated Deprecated

Xác định tên khung hoặc cửa sổ có mối quan hệ liên kết được xác định hoặc sẽ hiển thị kết xuất của bất kỳ tài nguyên được liên kết nào.

Thuộc tính lỗi thời

<link rel="icon" href="favicon.ico" />

21Deprecated Deprecated

Thuộc tính này xác định mã hóa ký tự của tài nguyên được liên kết. Giá trị là một danh sách các bộ ký tự được phân phối không gian và/hoặc dấu phẩy như được định nghĩa trong RFC 2045. Giá trị mặc định là

<link rel="icon" href="favicon.ico" />

22.

Lưu ý: Để tạo ra hiệu ứng tương tự như thuộc tính lỗi thời này, hãy sử dụng tiêu đề

<link rel="icon" href="favicon.ico" />

23 HTTP trên tài nguyên được liên kết. To produce the same effect as this obsolete attribute, use the

<link rel="icon" href="favicon.ico" />

23 HTTP header on the linked resource.

<link rel="icon" href="favicon.ico" />
24Deprecated Deprecated

Giá trị của thuộc tính này cho thấy mối quan hệ của tài liệu hiện tại với tài liệu được liên kết, như được định nghĩa bởi thuộc tính

<link rel="icon" href="favicon.ico" />

3. Do đó, thuộc tính xác định mối quan hệ ngược lại so với giá trị của thuộc tính

<link rel="icon" href="favicon.ico" />

4. Các giá trị loại liên kết cho thuộc tính tương tự như các giá trị có thể cho

<link rel="icon" href="favicon.ico" />

4.

Lưu ý: Thay vì

<link rel="icon" href="favicon.ico" />

24, bạn nên sử dụng thuộc tính
<link rel="icon" href="favicon.ico" />
4 với giá trị loại liên kết ngược lại. Ví dụ: để thiết lập liên kết ngược cho
<link rel="icon" href="favicon.ico" />
30, chỉ định
<link rel="icon" href="favicon.ico" />
31. Ngoài ra, thuộc tính này không đại diện cho "Sửa đổi" và không được sử dụng với số phiên bản, mặc dù nhiều trang web sử dụng sai theo cách này. Instead of

<link rel="icon" href="favicon.ico" />

24, you should use the

<link rel="icon" href="favicon.ico" />

4 attribute with the opposite link type value. For example, to establish the reverse link for

<link rel="icon" href="favicon.ico" />

30, specify

<link rel="icon" href="favicon.ico" />

31. Also, this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.

Ví dụ

Bao gồm một bảng kiểu

Để bao gồm một bảng kiểu trong một trang, hãy sử dụng cú pháp sau:

<link href="style.css" rel="stylesheet" />

Cung cấp các kiểu dáng thay thế

Bạn cũng có thể chỉ định các bảng phong cách thay thế.

Người dùng có thể chọn cách sử dụng bảng kiểu nào bằng cách chọn nó từ menu Kiểu xem> Trang. Điều này cung cấp một cách để người dùng xem nhiều phiên bản của một trang.View > Page Style menu. This provides a way for users to see multiple versions of a page.

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

Cung cấp biểu tượng cho các bối cảnh sử dụng khác nhau

Bạn có thể bao gồm các liên kết đến một số biểu tượng trên cùng một trang và trình duyệt sẽ chọn cái nào hoạt động tốt nhất cho bối cảnh cụ thể của nó bằng cách sử dụng các giá trị

<link rel="icon" href="favicon.ico" />

4 và

<link rel="icon" href="favicon.ico" />

9 làm gợi ý.

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />

Đang tải tài nguyên có điều kiện với các truy vấn truyền thông

Bạn có thể cung cấp một loại phương tiện hoặc truy vấn bên trong thuộc tính

<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

1; Tài nguyên này sau đó sẽ chỉ được tải nếu điều kiện phương tiện là đúng. Ví dụ:

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />

Các sự kiện tải kiểu kiểu

Bạn có thể xác định khi nào một bảng kiểu đã được tải bằng cách xem một sự kiện

<link rel="icon" href="favicon.ico" />

35 để bắn vào nó; Tương tự, bạn có thể phát hiện nếu xảy ra lỗi trong khi xử lý một bảng kiểu bằng cách xem sự kiện

<link rel="icon" href="favicon.ico" />

36:

<script>
  const stylesheet = document.querySelector("#my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

Lưu ý: Sự kiện

<link rel="icon" href="favicon.ico" />

35 bắn một khi bảng kiểu và tất cả nội dung nhập của nó đã được tải và phân tích cú pháp, và ngay trước khi các kiểu bắt đầu được áp dụng cho nội dung. The

<link rel="icon" href="favicon.ico" />

35 event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

Các ví dụ tải trước

Bạn có thể tìm thấy một số ví dụ

<link rel="icon" href="favicon.ico" />

38 trong nội dung tải trước với

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

3.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Sự chỉ rõ
Tiêu chuẩn HTML # phần tử liên kết # the-link-element

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

```
<link rel="icon" href="favicon.ico" />
```
40 Tiêu đề HTTP

Liên kết thẻ là gì?

Định nghĩa và cách sử dụng.TAG xác định một siêu liên kết, được sử dụng để liên kết từ trang này sang trang khác.Thuộc tính quan trọng nhất của phần tử là thuộc tính HREF, chỉ ra đích của liên kết.Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt: một liên kết không được gạch chân được gạch chân và màu xanh.The tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue.