HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗

鏈接在現代網頁設計中發揮著不可或缺的作用。HTML中，href屬性在anchor標簽中扮演著關鍵角色，使得用戶可以輕松地跳轉到其他頁面或特定部分。在本文中，我們將探討href屬性的基本使用方法以及一些高級技巧，幫助您提升網站用戶體驗。

基本使用方法

HTML中，anchor標簽用于創建超鏈接，其基本結構如下：

<a href="鏈接地址">鏈接文本</a>

其中，href屬性指定了跳轉的目標地址，而鏈接文本則是用戶在頁面上看到的可點擊的文本。

絕對路徑與相對路徑

絕對路徑和相對路徑是href屬性中常見的兩種取值類型。

絕對路徑：完整的URL地址，包括協議（如http://或https://）、域名和頁面路徑。例如：https://www.example.com/page.html
相對路徑：相對于當前頁面的路徑，省略了協議和域名。例如，假設當前頁面為https://www.example.com/home.html，則可以使用/about.html指向https://www.example.com/about.html。

外部鏈接與內部鏈接

外部鏈接指向不同域名的頁面，而內部鏈接則是指向同一域名內的頁面或部分。在創建鏈接時，確保使用正確的協議（如http://或https://）以避免鏈接無法正常跳轉。

使用target屬性

通過使用target屬性，您可以控制超鏈接的打開方式。常見的取值有：

_self：在當前窗口或標簽頁中打開鏈接。
_blank：在新窗口或新標簽頁中打開鏈接。
_parent：在上一級窗口或框架中打開鏈接。
_top：清除當前窗口的內容，然后在新的頂級窗口中打開鏈接。

使用rel屬性

rel屬性用于在超鏈接中添加關聯信息，如：

nofollow：告訴搜索引擎不要按常規方式索引和跟蹤鏈接。
target="_blank" rel="noopener noreferrer"：同時使用target屬性的_blank值和rel屬性，可以禁止在新窗口中打開鏈接的JavaScript代碼訪問原始頁面的窗口對象。

訪問性和 SEO 優化

為了提升網站的訪問性和 SEO 排名，請確保鏈接文本清晰、描述性，避免使用過于短的單詞（如 "點擊這里"）。此外，使用有意義的 URL 以便搜索引擎更好地理解您的網頁內容。

使用CSS美化鏈接

通過CSS，您可以對超鏈接進行樣式定義，使其與網站設計相一致。例如，更改鏈接的顏色、字體、下劃線等。

掌握href屬性的使用方法和技巧，您可以創建更加易于導航且訪問性較好的網站。在提升用戶體驗的同時，還能夠為搜索引擎提供更多關于網頁內容的信息，從而提高網站的 SEO 排名。

標簽在網頁中是被用來鏈接其他頁面而使用的，今天我們我簡單了解下a標簽的幾種跳轉方式。以便于我們更加深入的了解a標簽。

使用

如下提供一個簡單的a標簽的使用方法

<a href="https://www.enjoytoday.cn" target="_blank">胖蔡叨叨叨</a>

如上，href屬性就是我們控制a標簽需要跳轉到的目標地址，而target就是我們控制跳轉方式的屬性。

跳轉方式

屬性值

target屬性值支持的值集如下：

_blank：這個就是上面設置的屬性值，也是我們比較常用到的，表示跳轉到一個新頁面打開，會打開一個新的頁面窗口
_self：這個屬性值是指直接在當前頁面打開a標簽的鏈接，這也是a標簽的默認設置
_parent：這個就需要結合框架類型frame一起使用，設置這個屬性表示當前frame引用的html代碼中的a標簽將在它的父框架中打開（替換）。
_top：同_parent類似，這個屬性值會控制頁面在當前框架的最頂部顯示。

案例

創建文件

1、常見一個nav.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #bbef88;
    }
  </style>
</head>

<body>

  我是nav.html
</body>
</html>

2、創建一個center.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      margin: 0;
      width: 100%;
      height: 500px;
      background-color: #2196F3;
    }
   .btn {
      display:inline-block;
      padding:8px 15px;
      background:green;
      color:white;
      margin: 30px 100px;
  }
  </style>
</head>

<body>
  我是center.html
  <a class="btn" href="https://www.enjoytoday.cn/" target="_self" style="color: #fff;text-decoration: none;">跳轉到胖蔡叨叨叨</a>
</body>
</hml>

3、創建一個header.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #FF952C;
    }
  </style>
</head>

<body>
  我是header.html
</body>
</html>

4、創建一個content.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      height: 600px;
      background-color: #FFCC00;
      display: flex;
      margin: 0;
    }

    iframe {
      height: 500px;
    }
  </style>
</head>

<body>
  <iframe src="nav.html" frameborder="0" style="width: 200px;"></iframe>
  <iframe src="center.html" frameborder="0" style="width: 1300px"></iframe>
</body>
</html>

5、創建一個index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>a標簽的4中打開跳轉方式</title>
  <style>
    body {
      width: 1500px;
      margin: 10px auto;
      display: flex;
      flex-direction: column;
    }

    iframe {
      width: 100%;
    }
  </style>
</head>

<body>
  <iframe src="header.html" frameborder="0" height="300px"></iframe>
  <iframe src="content.html" frameborder="0" height="600px"></iframe>
</body>
</html>

修改屬性值

通過上述的代碼我們可以通過改變center.html中a標簽的target值看了解下不同跳轉方式的區別：

target為_self

直接在center.html中打開替換

target為_blank

打開一個新的tab頁去顯示

target為_parent

會在center.html上層content.html打開替換

target為_top

會在最頂層main.html中打開并替換。

什么要去除首頁文件 index.html？

1、保持簡潔優雅的 URL。

保持網站首頁簡潔的域名格式。

2、搜索引擎友好，避免重復頁面。

雖然大部分網站首頁都是 index.html，但搜索引擎并不會將www.fuyeor.com/和www.fuyeor.com/index.html視為同一個頁面，而是當作兩個網址處理。

開始設置

1、設置網站目錄文件默認值

從 Apache 服務器的配置文件 /conf/httpd.conf 中的 DirectoryIndex 修改網站默認首頁。

<IfModule dir_module>
     DirectoryIndex index.html index.php
</IfModule>

確保www.fuyeor.com/和www.fuyeor.com/index.html都能正常訪問。

2、在首頁文件 index.html 中設置跳轉

在首頁文件 index.html 中通過 JavaScript 設置跳轉，跳轉至不帶 index.html 的域名。

<script>

if(window.location.href == 'https://www.fuyeor.com/index.html'){
    window.location.href="https://www.fuyeor.com/";
}

</script>

3、設置 rel=canonical <link> 標記，避免在搜索引擎出現 index.html

將具有 rel="canonical" 屬性的 <link> 元素添加到帶 index.html 的網頁 <head> 部分中，并使其指向規范網頁（主域名）。

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
         ...
         <link rel="canonical" href="https://www.fuyeor.com" />
         ...
    </head>

這樣搜索引擎即使發現了 index.html 的網址，也不會收錄。

在線咨詢

上一篇：打開網站就彈出網站公告提示框的JS彈窗代碼
下一篇：20個超炫的HTML5 /CSS3免費網頁設計模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商