HTML超链接练习 - My favorite fruit-CSDN博客

本文链接：https://blog.csdn.net/irotoru/article/details/145972410

2.跳转到本地资源（绝对路径与相对路径的区分）

3.跳转到当前文档中的某个地方（瞄点）

实例展示

源代码

<!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>