HTML常见标签——超链接a标签

一、a标签简介

二、a标签属性

href属性

target属性

三、a标签的作用

利用a标签进行页面跳转

利用a标签返回页面顶部以及跳转页面指定区域

利用a标签实现文件下载


一、a标签简介

<a>标签用于做跳转、导航,是双标签,记作<a></a>,它是行内标签,不可以直接设置宽度高度,特殊的是,作为行内标签,它可以嵌套文本、行内元素、块级元素。

二、a标签属性

href属性

<a>标签中具有href属性,属性用于填写页面或者文件地址,如果href 设置为"#" ,表示不会跳转到其他页面,停留在本页面。它的语法是:

html 复制代码
<a href="#"></a>
<a href="XXX.html"></a>

target属性

<a> 标签的 target 属性规定在何处打开链接文档。它的语法是:

html 复制代码
<a target="_blank|_self|_parent|_top|framename">

target的值和属性如下,一般常用的是前两个,也就是创建新窗口打开被链接页面或者在当前窗口打开被链接页面。

|-----------|------------------------|
| 值 | 描述 |
| _blank | 在新窗口打开被链接的页面 |
| _self | 默认设置,在当前的页面/框架打开被链接的页面 |
| _parent | 在父框架集中打开被链接的页面 |
| _top | 在整个窗口中打开被链接的页面 |
| framename | 在指定框架中打开被链接的页面 |

三、a标签的作用

a标签有三个作用

  1. 跳转页面

  2. 返回页面顶部或者跳转页面指定区域

  3. 下载文件

利用a标签进行页面跳转

我们设置一个test目录,test目录最外面存放home.html文件,在test目录下有一个pages目录,存放introduction.html和my.html文件。

我们在home.html写一个<a>标签,链接到其他的页面,代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
</head>

<body>
    <h1>home</h1>
    <a href="./pages/introduction.html">introduction</a>
    <a href="./pages/my.html">my</a>
</body>

</html>

界面效果如下,我们可以看到在home.html界面中,出现了introduction和my的超链接。

分别点击两个超链接,均可完成跳转,此时是在当前窗口打开的,没有一个新窗口,且访问过的链接颜色会发生变化。

利用a标签返回页面顶部以及跳转页面指定区域

如果将<a>标签href属性设置为"#",可以跳转到页面顶部,我们设置一个盒子,撑开页面内容,再设置一个超链接,链接的href属性设置为"#",代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 2000px;
        }
    </style>
</head>

<body>
    <div></div>
    <a href="#">点我跳转回到顶部</a>
</body>

</html>

我们点击超链接可以跳转到页面顶部,效果如下:

"#"也叫做锚点,可以跳转到页面指定区域,我们设置三个盒子,并给不同颜色,给盒子设置id属性,a标签的href属性设置为"#盒子名称"即可返回到对应的盒子的位置。代码如下:

html 复制代码
<body>
    <style>
        .box-1 {
            width: 400px;
            height: 400px;
            background-color: saddlebrown;
        }

        .box-2 {
            width: 600px;
            height: 600px;
            background-color: rgb(99, 107, 107);
        }

        .box-3 {
            width: 1000px;
            height: 1000px;
            background-color: skyblue;
        }
    </style>
    <div class="box-1" id="box1">box1</div>
    <div class="box-2" id="box2">box2</div>
    <div class="box-3" id="box3">box3</div>
    <a href="#box1">点击跳转到box1</a>
    <a href="#box2">点击跳转到box2</a>
    <a href="#box3">点击跳转到box3</a>

</body>

效果如下:

利用a标签实现文件下载

<a>标签还可以用于实现文件下载功能,代码如下:

html 复制代码
<!-- 下载素材 -->
<a href="./img/1.jpg" download="1.jpg">点击下载素材</a>

效果如下:

相关推荐
全马必破三2 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库7 分钟前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
huohaiyu8 分钟前
synchronized (Java)
java·开发语言·安全·synchronized
梵得儿SHI9 分钟前
Java 工具类详解:Arrays、Collections、Objects 一篇通关
java·工具类·collections·arrays·objects
一枚前端小能手11 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_999911 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
熊小猿16 分钟前
Spring Boot 的 7 大核心优势
java·spring boot·后端
摸鱼的老谭18 分钟前
Java学习之旅第二季-13:方法重写
java·学习·方法重写
云灬沙18 分钟前
IDEA2025无法更新使用Terminal控制台
java·intellij-idea·idea·intellij idea
Yield & Allure19 分钟前
IDEA在plugins里搜不到mybatisx插件的解决方法
java·ide·intellij-idea