首頁  >  文章  >  web前端  >  怎樣使用html網頁中的錨點

怎樣使用html網頁中的錨點

php中世界最好的语言
php中世界最好的语言原創
2018-02-10 09:11:482341瀏覽

這次帶給大家怎麼使用html網頁中的錨點,使用html網頁中的錨點的注意事項有哪些,下面就是實戰案例,一起來看一下。

錨點是網頁製作中超級連結的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接,運用相當普遍。
英文名稱:anchor
使用命名錨記可以在文件中設定標記,這些標記通常放在文件的特定主題或頂部。然後可以建立到這些命名錨記的鏈接,這些連結可快速將訪客帶到指定位置。
建立到命名錨記的連結的過程分為兩個步驟。首先,建立命名錨記,然後建立到該命名錨記的連結。
範例程式碼
在HTML頁面中適當位置定義如下的錨點:

<a name="top">这里是TOP部分</a> 
<a name="content">这里是CONTENT部分</a> 
<a name="foot">这里是FOOT部分</a>

(您可以使用id 屬性來取代name 屬性,命名錨同樣有效。用於頁面內的錨點存取

<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中就不行。
因為我們錨點的3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed值為空,為不影響美觀我們加個空格就行了,

如以下程式碼,就可以兼容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 中說到,創建錨點使用 3499910bf9dac5ae3c52d5ede7383485 (錨)標籤和 name 屬性,但這不是創建頁面錨點的唯一方法。下面簡單說一下製作 HTML 頁面錨點的兩種方式。
我們可以利用 W3School 的線上測試工具來進行測試。開啟連結後的測試程式碼使用的是 64fabc9fc6232be280e37d39127ad19c 和 fd7787ab928c3fdea11bcb30cd63ab44,測試沒有問題。再將「 c1a436a314ed609750bd7c7d319db4da 230141e294224cc17bdaf3286c7a8e39Chapter 4 5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd」改為「 201018ce4249a3f9acad947f7063b719Chapter 4 2e9b454fa8428549ca2e64dfac4625cd ” 後進行測試,效果一樣。 說明,製作頁面錨點除了使用 錨點標籤 name 屬性之外,還可以使用 id 屬性。錨點3499910bf9dac5ae3c52d5ede7383485 標籤中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>

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

Html中有哪些標記文字註解的符號

怎麼實作HTML的仿命令列介面

html+css+javascript如何實作清單循環滾動

#

以上是怎樣使用html網頁中的錨點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn