【HTML入门】第八课 - 链接的学习(二)

我们上一节学习了,链接的基本知识,有锚点,还有鼠标上移的title属性的作用,这一节,我们继续说链接的知识点。

目录

[1 跳转本项目的网页](#1 跳转本项目的网页)

[1.1 修改html文件名](#1.1 修改html文件名)

[1.2 新建index1.html文件](#1.2 新建index1.html文件)

[1.3 修改index1.html文件](#1.3 修改index1.html文件)

[1.4 修改 index.html 的内容](#1.4 修改 index.html 的内容)

[1.5 开点](#1.5 开点)

[2 打开新的标签页](#2 打开新的标签页)

[3 打开完整的网页url](#3 打开完整的网页url)

[4 做下载功能](#4 做下载功能)

[4.1 添加文件目录和文件](#4.1 添加文件目录和文件)

[4.2 修改代码](#4.2 修改代码)

[4.3 查看下载效果](#4.3 查看下载效果)


1 跳转本项目的网页

我们上一节说,锚点是在当前网页来回跳,那么他还可以跳转到其他网页去。

1.1 修改html文件名

我们之前新建网页的时候,html文件名叫 "新建文本文档.html" 还记得吧。

现在我们修改一下名字,改成 index.html 这个名字。然后就是这样子了。

1.2 新建index1.html文件

然后我们再新建一个 index1.html 的网页文件。然后就是这样子了。

注意:这里的两个html文件,是处于同一目录下的。

1.3 修改index1.html文件

index1.html 是我们新建的网页,目的就是通过 index.html 跳转到 index1.html 去。那么我们先修改一下index1.html的内容,以便区分这2个网页。

注意:这是index1.html的内容啊

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是index1的网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index.html">跳回index去</a>
    </body>
</html>

1.4 修改 index.html 的内容

注意,这里是index.html 的内容啊

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index1.html">我要跳到index1去</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

1.5 开点

然后你就可以用浏览器打开 index.html ,两个网页开始点着跳着玩了。如果你的代码没有错的话,2个网页就是来回点跳着玩的效果。

而且是没有新打开浏览器的标签页,只是在当前网页标签内来回跳

2 打开新的标签页

想要打开新的标签页,使当前网页不受影响呢,是 target属性的效果。我们看一下代码:

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index1.html" target="_blank">我要跳到index1去</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

我们看到,index.html 这个代码里呢,我们加了 target="_blan" 的属性代码。这就是跳转的时候,新打开标签页的意思。

你可以点击一下,看一下效果,是不是新打开了一个标签页。

3 打开完整的网页url

我们还可以使自己的网页,点击后,跳转到其他第三方的网页去,只要给我们一个完整的网页链接url。比如我们跳转到百度的网页去。主要看一下 href 属性值的修改:

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">去百度一下</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

然后你可以点击一下链接,看是不是百度的网页出现了。

4 做下载功能

a这个链接标签呢,还可以用来做下载。比如我们要下载一个pdf文件,或者一个excel文件,浏览器可以识别,我们当前要跳转的是网页,还是指向了一个文件。比如我们在当前目录添加一个excel文件,来下载他。

4.1 添加文件目录和文件

4.2 修改代码

我们可以看到,files 文件夹,或者叫它 files 目录呢,和 index.html 在同级目录下的,所以,我们的 路径书写 是这样子的(主要看href属性):

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./files/myExcel.xlsx" target="_blank">下载文件</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

4.3 查看下载效果

然后我们点击 "下载文件" 的链接,看一下是否可以下载下来。

相关推荐
comelong5 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹7 分钟前
硬件产品研发管理工具实战指南
前端·python
用户3802258598247 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL7 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason10 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77811 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽29 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟30 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦30 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子31 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试