連結標籤和錨點標籤的區別


在開發網站時,我們可能會遇到需要建立指向另一個網頁或網頁特定部分的超連結的情況(這些連結是可點選的)。此外,我們可能還需要使用外部 CSS 對網站內容新增樣式(這些不可點選)。這些行為可以透過使用 HTML 的 <link> 和 <a> 錨點標籤來實現。

HTML <link> 標籤

在 HTML 中,<link> 標籤用於連結外部資源,例如 CSS 樣式表,或向網站新增 favicon(瀏覽器選項卡中頁面標題旁邊顯示的小影像)。它不是頁面上的可見內容。

以下是一些最常與 HTML <link> 標籤一起使用的屬性:href、hreflang、rel、title、type 等。

示例

在以下示例中,我們嘗試使用 HTML 的 <link> 標籤將外部 CSS 檔案連結到我們的 HTML 文件中。以下是 HTML 文件 -

<!DOCTYPE html>
<html>
<head>
   <title>Link Tag in HTML</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <div>
      <h2>Hello, tutorialspoint</h2>
      <p>Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</p>
   </div>
</body>
</html>

以下是外部 CSS 檔案 -

body {
   background-color: bisque;
}
h2 {
   color: green;
}
div {
   text-align: center;
}

輸出

當我們執行 HTML 檔案時,我們可以看到背景顏色和 <h2> 元素髮生的樣式變化。這些行為是透過將外部 CSS 檔案連結到我們的 HTML 文件來實現的。

HTML 錨點 <a> 標籤

在 HTML 中,錨點 <a> 標籤用於在網站上建立超連結。此超連結用於從一個網頁連結到另一個網頁或同一網頁的某個部分。以下是一些最常與 HTML 錨點 <a> 標籤一起使用的屬性:href、hreflang、media、ping、rel、type 等。

示例

在以下示例中,我們使用 HTML 錨點 <a> 標籤建立指向另一個網頁的超連結。

<!DOCTYPE html>
<html>
<head>
   <title>Anchor tag in HTML</title>
</head>
<body>
   <a href="https://tutorialspoint.tw/index.htm"> Click here for tutorialspoint...</a>
</body>
</html>

正如我們在下面的輸出中看到的,<a> 標籤建立了一個指向 tutorialspoint 網站的超連結。

HTML <link> 和錨點 <a> 標籤的區別 -

下表展示了 HTML 中 <link> 和 <a> 標籤的區別 -

<link> 標籤

<a> 錨點標籤

HTML <link> 標籤用於將外部文件連結到我們的 HTML 文件。

HTML <a> 錨點標籤用於建立指向其他網頁或網頁特定部分的超連結。

此標籤用於 <head> 部分。

此標籤用於 <body> 部分。

它不可見且不可點選,因為它僅用於內部目的。

它以超連結格式顯示,標籤內提供了名稱,使用者可以與其互動。

由於它是一個空元素,因此不能包含巢狀元素。

由於它不是空元素,因此它可能包含多個巢狀項。

連結標籤 -<head><link rel="stylesheet" type="text/css" href="file_name.css"></head>

<a> 錨點標籤 -<a href="www.example.com">虛擬網站</a>

更新於: 2023年8月29日

4K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告