HTML 標籤的 href 屬性

w3school頁面的描述:

HTML <a> 標籤的 href 屬性

實例

href 屬性規定鏈接的目標:

<a href="http://www.w3school.com.cn">W3School</a>

親自試一試

定義和用法

<a> 標籤的 href 屬性用於指定超鏈接目標的 URL。

href 屬性的值可以是任何有效文檔的相對或絕對 URL,包括片段標識符和 JavaScript 代碼段。如果用戶選擇了 <a> 標籤中的內容,那麼瀏覽器會嘗試檢索並顯示 href 屬性指定的 URL 所表示的文檔,或者執行 JavaScript 表達式、方法和函數的列表。

提示和註釋

注意:<a> 標籤中必須提供 href 屬性或 name 屬性。

製作文本鏈接

一個引用其他文檔的簡單 <a> 標籤可以是下列形式:

<a href="http://www.w3school.com.cn/index.html">W3School 在線教程</a>

瀏覽器用特殊效果顯示短語“W3School 在線教程”(通常是帶下劃線的藍色文本),這樣用戶就會知道它是一個可以鏈接到其他文檔的超鏈接。就像這樣:

W3School 在線教程

用戶還可以利用瀏覽器中的選項來自己指定文本顏色、設置鏈接前和鏈接後鏈接文本的顏色。

提示:可以使用 CSS 僞類向文本超鏈接添加複雜而多樣的樣式。

製作圖像鏈接

更復雜的錨還可以包含圖像。下面這個 LOGO 是一個圖像鏈接,點擊該圖像,可以返回 W3school 的首頁:

<a href="http://www.w3school.com.cn/index.html">
<img src="/i/w3school_logo_white.gif" />
</a>

上面的代碼會爲 W3School 的 LOGO 添加一個返回首頁的超鏈接:

W3School 在線教程

大多數圖形瀏覽器都會在作爲錨的一部分的圖像周圍放置特殊的邊框。通過在 <img> 標籤中把圖像的 border 屬性設置爲 0 可以刪除超鏈接的邊框。也可以使用 CSS 的邊框屬性來全局性地改變元素的邊框樣式。

語法

<a href="value">

屬性值

描述
URL 超鏈接的 URL。可能的值:
  • 絕對 URL - 指向另一個站點(比如 href="http://www.example.com/index.htm")
  • 相對 URL - 指向站點內的某個文件(href="index.htm")
  • 錨 URL - 指向頁面中的錨(href="#top")

-------------------------------------------------------------------------------------------------------

html 網頁中的錨點(命名錨記)的使用介紹


1.錨點是網頁製作中超級鏈接的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接,運用相當普遍。
英文名:anchor
使用命名錨記可以在文檔中設置標記,這些標記通常放在文檔的特定主題處或頂部。然後可以創建到這些命名錨記的鏈接,這些鏈接可快速將訪問者帶到指定位置。
創建到命名錨記的鏈接的過程分爲兩步。首先,創建命名錨記,然後創建到該命名錨記的鏈接。

示例代碼

在HTML頁面中適當位置定義如下的錨點:
<a name="top">這裏是TOP部分</a>
<a name="content">這裏是CONTENT部分</a>
<a name="foot">這裏是FOOT部分</a>
(您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。[1])
對於如上錨點的訪問有兩種方法
一種是利用超鏈接標籤<a></a>製作錨點鏈接,主要用於頁面內的錨點訪問
<a href="#top">點擊我鏈接到TOP</a>
<a href="#content">點擊我鏈接到CONTENT</a>
<a href="#foot">點擊我鏈接到FOOT</a>
另一種方式是直接在頁面地址後面加錨點標記,主要用於不同頁面之間的錨點訪問
假如本頁面的地址是http://文件路徑/index.html,要訪問foot錨點只要訪問如下鏈接即可
http://文件路徑/index.html#foot

2.html 錨點 到底是幹嗎的?
通俗簡單地說,比如一篇很長的文章,你想按分段精確來看,那就可以用到錨點了。

代碼:
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略

其實錨點只需name就可以可,加id是爲了讓它兼容性更好.
href的值要跟name / i d 一致,前面必須加"#",以上代碼在ie6/7,ff中都可以兼容,但在ie8中就不行。
因爲我們錨點的<a></a>值爲空,爲不影響美觀我們加個空格就行了,

如以下代碼,就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略

另一問題,想顯示某頁面(如:123.html)的某錨點內容呢?

代碼如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略

這是昨天在做後臺時候,想實現“修改定位”,就把錨點標記搬了出來(平常它都被我遺忘)。
但是程序那邊說他們要取值,連接中必須要有“?”或“&”,那這樣我的錨點就不兼容了...
呵呵!以後會有解決方法的!
雖然在jsp頁面中錨點兼容有問題,但是在靜態頁面中是沒有問題的,還是值得學下的!

3.在 WEB 開發中,會使用到頁面錨點。HTML 頁面錨點用於鏈接到一個頁面的某一章節。W3School 中說到,創建錨點使用 <a> (錨)標籤和 name 屬性,但這不是創建頁面錨點的唯一方法。下面簡要說一下製作 HTML 頁面錨點的兩種方式。

我們可以利用 W3School 的在線測試工具來進行測試。打開鏈接後的測試代碼使用的是 <a href=”#C4″> 和 <a name=”C4″>,測試沒有問題。再將“ <h2> <a name=”C4″>Chapter 4 </a> </h2>”改爲“ <h2 id=”C4″>Chapter 4 </h2>” 後進行測試,效果一樣。

說明,製作頁面錨點除了使用 錨點標籤 name 屬性之外,還可以使用 id 屬性。錨點 <a> 標籤中 href 屬性的值爲 # 開頭加上目標的 name 或 id 的值:

複製代碼代碼如下:
<html>
<body>
<p>
<a href="#method1">頁面錨點方法一</a>
</p>
<p>
<a href="#method2">頁面錨點方法二</a>
</p>
<h2><a name="method1">方法一</a></h2>
<p>使用錨標籤的 href 和 name 屬性</p>
<h2 id="method2">方法二</h2>
<p>使用錨標籤和 id 屬性</p>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章