例
鏈接到外部樣式文件:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
瀏覽器支持
所有主流瀏覽器都支持 <link> 標簽。
標簽定義及使用說明
<link> 標簽定義文檔與外部資源的關系。
<link> 標簽最常見的用途是鏈接樣式表。
注意: link 元素是空元素,它僅包含屬性。
注意: 此元素只能存在于 head 部分,不過它可出現任何次數。
HTML 4.01 與 HTML5之間的差異
一些 HTML 4.01 屬性在 HTML5 中不支持。
HTML5 新增了 "sizes" 屬性。
HTML 與 XHTML 之間的差異
在 HTML 中,<link> 標簽沒有結束標簽。
在 XHTML 中,<link> 標簽必須被正確地關閉。
屬性
New:HTML5 新屬性。
屬性 | 值 | 描述 |
---|---|---|
charset | char_encoding | HTML5 不支持該屬性。 定義被鏈接文檔的字符編碼方式。 |
href | URL | 定義被鏈接文檔的位置。 |
hreflang | language_code | 定義被鏈接文檔中文本的語言。 |
media | media_query | 規定被鏈接文檔將顯示在什么設備上。 |
rel | alternatearchivesauthorbookmarkexternalfirsthelpiconlastlicensenextnofollownoreferrerpingbackprefetchprevsearchsidebarstylesheettagup | 必需。定義當前文檔與被鏈接文檔之間的關系。 |
rev | reversed relationship | HTML5 不支持該屬性。 定義被鏈接文檔與當前文檔之間的關系。 |
sizesNew | HeightxWidthany | 定義了鏈接屬性大小,只對屬性 rel="icon" 起作用。 |
target | _blank_self_top_parentframe_name | HTML5 不支持該屬性。 定義在何處加載被鏈接文檔。 |
type | MIME_type | 規定被鏈接文檔的 MIME 類型。 |
全局屬性
<link> 標簽支持全局屬性,查看完整屬性表 HTML 全局屬性。
事件屬性
<link> 標簽支持所有 HTML 事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
頁link和import語法結構不同,前者<link>是html標簽,只能放入html源代碼中使用,后者可看作為css樣式,作用是引入css樣式功能。import在html使用時候需要<style type="text/css">標簽,同時可以直接“@import url(CSS文件路徑地址);”放入css文件或css代碼里引入其它css文件。
本質上兩者使用選擇區別不大,但為了軟件中編輯布局網頁html代碼,一般使用link較多,也推薦使用link。
雖然,這兩種方式都是為了加載css文件,但還是存在細微的差別。
1:本質的差別,link屬于XHTML標簽,而@import完全是css提供的一種方式。
link標簽除了可以加載css外,還可以做很多其他的事情,比如定義RSS,定義rel連接屬性等,@import只能加載CSS。
2:加載順序的差別:當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再加載。所以有時候瀏覽@import加載CSS的頁面時會沒有樣式(就是閃爍),網速慢的時候還挺明顯。
3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題,完全兼容。
4:使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的(不支持)。
5(不推薦):@import可以在css中再次引入其他樣式表,比如創建一個主樣式表,在主樣式表中再引入其他的樣式表。
lt;link> 和 @import 是用于在網頁中引入外部資源(如樣式表)的兩種不同的方法。它們之間有以下幾個區別:
下面是 <link> 和 @import 的區別以及相應的代碼例子:
<link rel="stylesheet" href="styles.css">
@import url("styles.css");
注意:@import 只能在 CSS 文件中使用。
<link rel="stylesheet" href="styles.css">
@import url("styles.css");
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
通過將 rel 屬性設置為 "preload",樣式表可以以異步方式加載,以提高頁面加載性能。<noscript> 標簽內的 <link> 標簽是為了在不支持 JavaScript 的情況下提供回退。
綜上所述,<link> 標簽是更常見、更靈活且性能更好的方法,而 @import 仍然可以在某些特定情況下使用。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。