html中的錨點介紹和使用

y_keven發表於2013-11-05
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>


 

相關文章