html 網(wǎng)頁(yè)中的錨點(diǎn)(命名錨記)的使用介紹
來(lái)源:易賢網(wǎng) 閱讀:2792 次 日期:2016-06-16 15:14:00
溫馨提示:易賢網(wǎng)小編為您整理了“html 網(wǎng)頁(yè)中的錨點(diǎn)(命名錨記)的使用介紹”,方便廣大網(wǎng)友查閱!

以下資料整理自網(wǎng)路

1.錨點(diǎn)是網(wǎng)頁(yè)制作中超級(jí)鏈接的一種,又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁(yè)面內(nèi)的超級(jí)鏈接,運(yùn)用相當(dāng)普遍。

英文名:anchor

使用命名錨記可以在文檔中設(shè)置標(biāo)記,這些標(biāo)記通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些命名錨記的鏈接,這些鏈接可快速將訪問(wèn)者帶到指定位置。

創(chuàng)建到命名錨記的鏈接的過(guò)程分為兩步。首先,創(chuàng)建命名錨記,然后創(chuàng)建到該命名錨記的鏈接。

示例代碼

在HTML頁(yè)面中適當(dāng)位置定義如下的錨點(diǎn):

<a name="top">這里是TOP部分</a>

<a name="content">這里是CONTENT部分</a>

<a name="foot">這里是FOOT部分</a>

(您可以使用 id 屬性來(lái)替代 name 屬性,命名錨同樣有效。[1])

對(duì)于如上錨點(diǎn)的訪問(wèn)有兩種方法

一種是利用超鏈接標(biāo)簽<a></a>制作錨點(diǎn)鏈接,主要用于頁(yè)面內(nèi)的錨點(diǎn)訪問(wèn)

<a href="#top">點(diǎn)擊我鏈接到TOP</a>

<a href="#content">點(diǎn)擊我鏈接到CONTENT</a>

<a href="#foot">點(diǎn)擊我鏈接到FOOT</a>

另一種方式是直接在頁(yè)面地址后面加錨點(diǎn)標(biāo)記,主要用于不同頁(yè)面之間的錨點(diǎn)訪問(wèn)

假如本頁(yè)面的地址是http://文件路徑/index.html,要訪問(wèn)foot錨點(diǎn)只要訪問(wèn)如下鏈接即可

http://文件路徑/index.html#foot

2.html 錨點(diǎn) 到底是干嗎的?

通俗簡(jiǎn)單地說(shuō),比如一篇很長(zhǎng)的文章,你想按分段精確來(lái)看,那就可以用到錨點(diǎn)了。

代碼:

<a href="#001">跳到001</a>

...文字省略

<a name="001" id="001" ></a>

...文字省略

其實(shí)錨點(diǎn)只需name就可以可,加id是為了讓它兼容性更好.

href的值要跟name \ i d 一致,前面必須加"#",以上代碼在ie6/7,ff中都可以兼容,但在ie8中就不行。

因?yàn)槲覀冨^點(diǎn)的<a></a>值為空,為不影響美觀我們加個(gè)空格就行了,

如以下代碼,就可以兼容ie8

<a href="#001">跳到001</a>

...文字省略

<a name="001" id="001" > & n b s p </a>

...文字省略

另一問(wèn)題,想顯示某頁(yè)面(如:123.html)的某錨點(diǎn)內(nèi)容呢?

代碼如下

<a href="123.html#001">跳到001</a>

...文字省略

<a name="001" id="001" > & n b s p </a>

...文字省略

這是昨天在做后臺(tái)時(shí)候,想實(shí)現(xiàn)“修改定位”,就把錨點(diǎn)標(biāo)記搬了出來(lái)(平常它都被我遺忘)。

但是程序那邊說(shuō)他們要取值,連接中必須要有“?”或“&”,那這樣我的錨點(diǎn)就不兼容了...

呵呵!以后會(huì)有解決方法的!

雖然在jsp頁(yè)面中錨點(diǎn)兼容有問(wèn)題,但是在靜態(tài)頁(yè)面中是沒(méi)有問(wèn)題的,還是值得學(xué)下的!

3.在 WEB 開(kāi)發(fā)中,會(huì)使用到頁(yè)面錨點(diǎn)。HTML 頁(yè)面錨點(diǎn)用于鏈接到一個(gè)頁(yè)面的某一章節(jié)。W3School 中說(shuō)到,創(chuàng)建錨點(diǎn)使用 <a> (錨)標(biāo)簽和 name 屬性,但這不是創(chuàng)建頁(yè)面錨點(diǎn)的唯一方法。下面簡(jiǎn)要說(shuō)一下制作 HTML 頁(yè)面錨點(diǎn)的兩種方式。

我們可以利用 W3School 的在線測(cè)試工具來(lái)進(jìn)行測(cè)試。打開(kāi)鏈接后的測(cè)試代碼使用的是 <a href=”#C4″> 和 <a name=”C4″>,測(cè)試沒(méi)有問(wèn)題。再將“ <h2> <a name=”C4″>Chapter 4 </a> </h2>”改為“ <h2 id=”C4″>Chapter 4 </h2>” 后進(jìn)行測(cè)試,效果一樣。

說(shuō)明,制作頁(yè)面錨點(diǎn)除了使用 錨點(diǎn)標(biāo)簽 name 屬性之外,還可以使用 id 屬性。錨點(diǎn) <a> 標(biāo)簽中 href 屬性的值為 # 開(kāi)頭加上目標(biāo)的 name 或 id 的值:

代碼如下:

<html>

<body>

<p>

<a href="#method1">頁(yè)面錨點(diǎn)方法一</a>

</p>

<p>

<a href="#method2">頁(yè)面錨點(diǎn)方法二</a>

</p>

<h2><a name="method1">方法一</a></h2>

<p>使用錨標(biāo)簽的 href 和 name 屬性</p>

<h2 id="method2">方法二</h2>

<p>使用錨標(biāo)簽和 id 屬性</p>

</body>

</html>

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:html 網(wǎng)頁(yè)中的錨點(diǎn)(命名錨記)的使用介紹
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)