【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 查看下载效果

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

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT4 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
AA-代码批发V哥6 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究7 小时前
学习栈和队列的插入和删除操作
数据结构·学习
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器