目录
-
实例展示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>-My favorite fruit-</title>
</head >
<body align=center>
<h1>-My favorite fruit-</h1>
<a href="#这是苹果"><h4>Apple</h4></a>
<a href="#这是车厘子"><h4>Cherry</h4></a>
<a href="#这是蓝莓"><h4>Blueberry</h4></a>
<br>
<br>
<a name="这是苹果">
<p>-Apple-<br>"Read me,like an apple."<br>蘋果不是無聊的水果，或許你討厭喫蘋果，
那你肯定不會搜索這個水果相關的內容。<br>可是我還挺喜歡蘋果的，酸酸甜甜的，圓潤的，
從青到紅都有淡淡的香氣的，<br>也是普通的，就像我一樣，蘋果呀蘋果~</p>
</a><br>
<img src="../图象标签/苹果.jpg" alt="苹果图片加载失败" width="500rpx" border="2rpx">
<br>
<br>
<br>
<a name="这是车厘子">
<p>-Cherry-<br>車釐子，這個小小的紅色寶石。<br>或許你聽說過沒有女生可以拒絕車釐子嗎...？</p>
</a><br>
<img src="../图象标签/车厘子.jpg" alt="车厘子图片加载失败" width="500rpx" border="2rpx">
<br>
<br>
<br>
<br>
<a name="这是蓝莓">
<p>-Blueberry- <br>藍莓的英文居然是...感覺好可愛。<br>一抹深藍，世界上唯一的藍色水果，藍紫色調最配炎熱的夏天。</plan>
</a><br>
<img src="../图象标签/蓝莓.jpg" alt="蓝莓图片加载失败" width="500rpx" border="2rpx">
</body>
</html>
超链接
什么是超链接
超链接描述：
HTML 中的超链接（Hyperlink）是通过 <a> 标签实现的网页导航核心功能，其本质是建立文档与文档、文档与资源之间的关联路径。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接标签<a>
标签<a>使用href属性来指定跳转链接。
<!-- "点击即可跳转到CSDN社区" -->
<a href="https://www.csdn.net/"></a>
通常情况下链接的显示形式：
- 未被点击的链接是蓝色字体并带有下划线
- 点击链接时，链接显示为红色并带有下划线
- 点击过的链接是带紫色字体并带有下划线（后续可通过CSS修改原生超链接的显示效果）
基本语法：
| 属性 | 描述 |
| href | 指定链接跳转地址 |
| target（可选） | 链接打开方式，常用值包括 _blank（在新标签或窗口中打开新标签 和 _self（在当前标签或窗口中打开链接） |
| title（可选） | 文字提示属性 |
| name（可选） | 定义瞄点 |
本窗口跳转是一种方式，打开新窗口也是一种方式，打开窗口就用的更加多。
如果<a>标签里面设置”name”属性，那么”#name”+名称，相当于瞄点
链接形式：
1.跳转外部URL-URL
2.跳转到本地资源（绝对路径与相对路径的区分）
绝对路径：
绝对路径是电脑的盘符存储与访问的具体地址。
<!-- 点击以打开桌面Mydata文件夹里的HomeWork图片 -->
<a href="C:\Mydata\HomeWork.jpg"></a>
相对路径：
两者相对关系，两者在同一路径下可以直接访问。
<a href="../Desktop/hw.jpg"></a>
3.跳转到当前文档中的某个地方（瞄点）
先使用name属性建立锚点，再通过为href属性添加#链接锚点。
建立锚点：
<a name="书签名">书签内容</a>
链接锚点：
<a href="#书签名">链接文字</a>