A标签超链接

超链接

• 超链接：点击某个文字或者图片等，然后跳转到另外一个 URL 地址（网址）
• 这个网址可能是网站外部的，也可能是网站内部的

超链接的两种方式

方式一：通过 <a> 标签的 href 属性

• 添加一个地址，点击时跳转到该地址

<a href="http://www.google.com">Google</a>Code language: HTML, XML (xml)

• 点击”google”文字 → 跳转到 http://www.google.com

方式二：通过锚（锚点）实现

• 可以跳到页面的某个位置（页内跳转）

原理

1. 在目标位置放一个锚点（用 name 或 id 属性标记）
2. 在链接里用 #锚点名 指向它

示例

<a href="http://www.google.com">google</a>

<!-- 这是锚点，标记了一个叫 "google" 的位置 -->
<a name="google">顶部google</a>

<!-- 中间放了很多 <br/> 把页面撑长，模拟滚动效果 -->
<br/><br/><br/>（此处省略大量<br/>）

<!-- 点击这个链接，页面会跳回到 name="baidu" 的位置 -->
<a href="#google">跳到顶部google</a>

<!-- 也可以带完整URL + 锚点名 -->
<a href="http://www.google.com/#google">跳到顶部google</a>Code language: HTML, XML (xml)

说明

写法	作用
href="#google"	跳到当前页面中 name="google" 的锚点位置
href="http://www.google.com/#google"	跳到 www.google.com 这个页面中 name="google" 的锚点位置
<a name="baidu">顶部google</a>	定义一个锚点，name 值为 “google”

锚点也可以用 id 来定义，比如 <h2 id="google">顶部google</h2>，然后用 href="#google" 跳转，效果一样，而且 id 方式更常用

---

两种超链接方式对比

方式	用途	示例
href="URL"	跳转到其他网页	<a href="http://www.google.com">百度</a>
href="#锚点名"	跳到页面内部某个位置	<a href="#google">回到顶部</a>