首頁 >web前端 >html教學 >HTML中link標籤與a標籤有什麼差別？怎麼使用？

HTML中link標籤與a標籤有什麼差別？怎麼使用？

link標籤與a標籤都是用來連結的標籤，但是它們之間有什麼差別呢？本篇文章就來跟大家介紹link標籤與a標籤之間的差異。

首先我們來看看link標籤是什麼？

link標籤是用於連接與該頁面相關的其他頁面的標籤，但是，此標籤與網站的外觀無直接關係。

所以基本上它是在head標籤中寫的。

link標籤通常用於讀取作為外部檔案的CSS和JavaScript，以及讀取名為favicon的web圖示。

a標籤是什麼？

看到鏈接，可能就會有人想到a標籤

a標籤定義超鏈接，用於從一張頁面鏈接到另一張頁面。

下面我們就來看看link標籤與a標籤之間的差異

如如上面的定義所述，link標籤與網站的外觀沒有任何直接關係。

但是，a標籤會在頁面中建立一個超連結元素。

如果要建立基本超鏈接，請使用a標籤，如果要從HTML讀取其他文件，請使用link標籤。

如何使用link標籤？

這些檔案可以與HTML分開，並在外部儲存為.css檔案或.js檔案。

需要使用上面的link標籤讀取該檔案。

我們來看具體的範例

程式碼如下

HTML

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
    <div class="text">text</div>
</html>

CSS

.text {
    color: blue;
    }

運行結果如下所示

HTML中link標籤與a標籤有什麼差別？怎麼使用？

透過以上這種方式，可以看到在style.css中寫的CSS其實是透過link標籤成功的與HTML連結了。

rel屬性指定此HTML和CSS之間的關係， href屬性指定要讀取的檔案的路徑

如何使用a標籤？

a標籤的使用很簡單，我們來看具體範例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<a href="http://www.php.cn/">php中文网</a>
</body>
</html>

運行效果如下所示

HTML中link標籤與a標籤有什麼差別？怎麼使用？

#點擊上述的「php中文網」連結就可以跳到php中文網首頁。

以上是HTML中link標籤與a標籤有什麼差別？怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多