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

1. 基本使用方法

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

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

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

2. 絕對路徑與相對路徑

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

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

3. 外部鏈接與內部鏈接

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

4. 使用target屬性

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

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

5. 使用rel屬性

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

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

6. 訪問性和 SEO 優化

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

7. 使用CSS美化鏈接

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

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

置字符編碼

屬性：http-equiv 值：Content-Type 內容：text/html; charset=utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

設置有效期

設置網頁的有效期之后, 過期網頁將無法脫機瀏覽, 只有重新登錄并連接該網頁才可以再次瀏覽。

屬性：http-equiv 值：expires 內容：Sun,1 Dec 2012 12:00:00 GMT

<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />

設置禁止緩存

網頁制作者希望隨時都能查看到最新的網頁內容，則可以設置禁止頁面緩存

屬性：http-equiv 值：cache-control 內容：no-cache

<meta http-equiv="cache-control" content="no-cache" />

設置自動刷新

設置頁面自動刷新，以實現信息的自動實時顯示(秒)

屬性：http-equiv 值：refresh 內容：5

<meta http-equiv="Refresh" content="5" />

設置自動跳轉

屬性：http-equiv 值：refresh 內容：5;url=http://www.xxx.com/

<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />

設置網頁關鍵詞

屬性：name 值：keywords 內容：油漆，涂料，涂料行業，汽車涂料

<meta name="keywords" content="油漆，涂料，涂料行業，汽車涂料" />

設置搜索限制

屬性：name 值：robots 內容：All

All 表示能搜索當前網頁與其鏈接的網頁，系統默認設置

Index 表示能搜素當前頁面

Nofollow 表示不能搜素與當前網頁鏈接的網頁

Noindex 表示不能搜素當前網頁

None 表示不能搜索當前網頁與其鏈接的網頁

<meta name="robots" content="All" />

設置網頁說明

屬性：name 值：description 內容：中國油漆網--您的油漆專家

<meta name="description" content="中國油漆網--您的油漆專家" />

設置網頁的作者

屬性: name 值: author 內容: LAMP Brother UI Team

<meta name="author" content="LAMP Brother UI Team" />

設置網頁的版權

屬性: name 值: copyright 內容: 2012-2014 EDU.

<meta name="copyright" content="2012-2014 EDU." />

設置移動網站

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/">

<base> 標簽

base 元素可規定頁面中所有鏈接的基準 URL。

通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。

這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

<base href="文件路徑" target="目標窗口"/>

必需的屬性

href URL 規定頁面中所有鏈接的基準 URL。

target _blank 在何處打開頁面中所有的鏈接?？赏ㄟ^在每個鏈接中使用 target 屬性來覆蓋此屬性。

_parent

_self

_top

_blank 在一個新的未命名的窗口載入文檔

_self 在相同的框架或窗口中載入目標文檔

_parent 把文檔載入父窗口或包含了超鏈接引用的框架的框架集

_top 把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架

實例:

<base target="_blank"/>

可以將該頁面的所有<a>鏈接的默認屬性設置為_blank

<base href="http://www.xxxxxx.com" />

在網頁出現的相對鏈接"test.html"將對應htp://www.xxxxxx.com/test.html的頁面

<basefont face="" size="" color=""/>

face屬性可以用于設置文字的名稱,可以是宋體、隸書、楷體等;

size屬性用于設置字號的大小(單位:字號),從 1 到 7 的數字,或h1-h6。瀏覽器默認值是 3。

color用于設置字體的顏色

div::before{
 content:"我是 before";
 color:red;
}
div::after{
 content:"我是 after";
 color:red;
}

<a  target="_blank">google</a>

a::before{
 content: attr(href);
 color:red;
}
a::after{
 content: attr(target);
 color:green;
}

a::before{
 content: "( " attr(href) " ) < ";
 color:red;
}
a::after{
 content: " > ( " attr(target) " ) ";
 color:green;
}

div::before{
 content:url(圖片網址) url(圖片網址) url(圖片網址);
}

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>

q{
 quotes: ' < ' ' > ';
}

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}