Link 對象
Link 對象代表某個 HTML 的 <link> 元素。<link> 元素可定義兩個鏈接文檔之間的關系。
<link> 元素被定義于 HTML 文檔的 head 部分。
Link 對象屬性
W3C: W3C 標準。
屬性 | 描述 | W3C |
---|---|---|
charset | 設置或返回目標 URL 的字符編碼。 | Yes |
href | 設置或返回被鏈接資源的 URL。 | Yes |
hreflang | 設置或返回目標 URL 的基準語言。 | Yes |
media | 設置或返回文檔顯示的設備類型。 | Yes |
rel | 設置或返回當前文檔與目標 URL之間的關系。 | Yes |
rev | 設置或返回目標 URL 與當前文檔之間的關系。 | Yes |
type | 設置或返回目標 URL 的 MIME 類型。 | Yes |
標準屬性和事件
Link 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
然,這兩種方式都是為了加載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中再次引入其他樣式表,比如創建一個主樣式表,在主樣式表中再引入其他的樣式表。
前端ES6高頻面試題
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小時內與您取得聯系。