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 排名。

置字符編碼

屬性：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 表示不能搜索當前網頁與其鏈接的網頁

設置網頁說明

屬性：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用于設置字體的顏色

TML<head>元素

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 標簽定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題

一個簡單的 HTML 文檔:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>
</head>
 
<body>
文檔內容......
</body>
 
</html>

HTML <base> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta標簽描述了一些基本的元數據。

META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

<meta> 標簽- 使用實例

為搜索引擎定義關鍵詞:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網頁定義描述內容:

<meta name="description" content="免費 Web & 編程 教程">

定義網頁作者:

<meta name="author" content="tom">

每30秒鐘刷新當前頁面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

JavaScript 最常用于圖片操作、表單驗證以及內容動態更新。

下面的腳本會向瀏覽器輸出"Hello World!"：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>

HTML<noscript> 標簽

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head> 
<body>

<script>
document.write("Hello World!")
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容（文本）來替代。</p>
 
</body>
</html>

JavaScript事件響應:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head>
<body>

<h1>我的第一個 JavaScript </h1>

<p id="demo">
JavaScript 可以觸發事件，就像按鈕點擊。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">點我</button>

</body>
</html>

HTML 腳本標簽

標簽	描述
<script>	定義了客戶端腳本
<noscript>	定義了不支持腳本瀏覽器輸出的文本

HTML鏈接

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>
</body>
</html>

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關系
<meta>	定義了HTML文檔中的元數據
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件