HTML5学习笔记——超链接标签与target属性

最新推荐文章于 2024-05-17 17:38:00 发布
最新推荐文章于 2024-05-17 17:38:00 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47015897/article/details/111750520
版权

1.超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!--
        超链接可以让我们从一个页面跳转到其他页面，
            或者是当前页面的其他位置

        使用 a 标签来定义超链接
            属性：
                href 指定跳转的目标路径
                    -值可以是一个外部网站的地址
                    -也可以是一个内部页面的地址
    -->

    <a href="https://www.baidu.com">超链接——百度</a>
    <!--超链接标签是一个行内元素，a标签里面可以放任何元素，包括块元素，但是不能嵌套它本身-->
    <br>
    <a href="语义化标签_列表.html">内部页面跳转</a>
    <br>
    <a href="/path/path_2/相对路径_超链接.html">第三级子目录文件</a>
</body>
</html>

2.target属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        target 属性，用来指定超链接打开的位置
            可选值：
                _self 默认值，在当前页面中打开超链接
                _blank 在一个新的标签页中打开超链接
    -->
    <a href="https://www.baidu.com" target="_blank">百度(打开新的标签页)</a>
    <br>
    <a href="#bottom">直达底部</a>
    <br>
    <a href="#middle">到达文章中间</a>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p id="middle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim quidem quod expedita quisquam id nihil magni esse mollitia similique? Dolores, id magni inventore porro aperiam fuga sint quidem ipsam in?</p>
    
    <!--
        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而是转到当前页面的顶部位置

        id属性（唯一不重复的）
            每一个标签都可以添加一个id属性，
            id属性就是元素的一个唯一标识，同一个页面中不能出现重复的id属性

    -->
    <br>
    <!--可以使用“javascript:;”来作为href的属性，此时点击这个超链接什么也不会显示
        即，该超链接还未定义其作用-->
        <a href="javascript:;">未定义</a>
    <br>

    <a id="bottom" href="#">回到顶部</a>

</body>
</html>
Etui۹(･༥･´)و ̑̑
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用好href的target属性
10-31
用好href的target属性
HTML 超链接标签
weixin_54262716的博客
02-16 2537
HTML超链接标签
a标签路径的跳转href
最新发布
m0_65696193的博客
05-17 254
跳转百度页面</a><a href="html02.html">在当前文件夹中跳转另一个页面a标签路径的跳转
A href中target属性的用法
u010784851的专栏
02-12 1633
target这个属性指定所链接的页面在浏览器窗口中的打开方式，它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下： _blank，在新浏览器窗口中打开链接文件。 _parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。 _self
href标签中target的几个属性值
m0_37041189的博客
08-08 4793
href标签中target的几个属性值 target的值有_blank、_self、_parent、_top这四种， 例子：<a href="#" target="_blank">链接</a> 没有指定<a>的target属性值时，默认是"_blank“” target="_blank":在新窗口中浏览新的页面。 target="_self":在同一个窗口打开新的页面。 target="_parent":在父窗口中打开新的页面。（页面中使用框架才有用） tar
6. HTML 常用标签—超链接
qq_51644044的博客
07-06 1304
文本或图像 < a href = "index.html"> 首页 下载文件 < /a> 第二集 < a href = "#" >首页
JBPM学习笔记——流程设计与控制
03-03
火龙果软件工程技术中心 相关资料：《jBPM学习笔记(V3.2环境部署)》《jBPM学习笔记(框架设计简介)》背景本片文章，我们将从业务流程的设计开始，通过带领大家完成一个完整工作流的程序设计，来学习jPDL的使用。...
Python学习笔记——大数据之Spark简介与环境搭建
02-24
SparkSQL：提供通过ApacheHive的SQL变体Hive查询语言（HiveQL）与Spark进行交互的API。每个数据库表被当做一个RDD，SparkSQL查询被转换为Spark操作。对熟悉Hive和HiveQL的人，Spark可以拿来就用。SparkStrea
HTML学习笔记（五）——表单
01-08
此外，HTML5的`<datalist>`标签允许创建可建议的输入值列表，与输入框结合使用，提高用户体验。例如： ```html ``` 文件域（`<input type="file">`）则允许用户选择并上传本地文件。隐藏表单控件（`...
HTML超链接标签
weixin_45904557的博客
02-24 7805
目录 一、超链接 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、超链接 <a href="" target=” “></a> 通过使用属性href来指定要链接的url，标签的内容可以为文本也可为其他标签 1.href 引入跳转页面的路径 1.网址 <a href="网址">点击进入网页</a>，点击文字进入网址 2.相对链接...
HTML 之 ＜a＞标签（超链接标签）
热门推荐
m0_64431500的博客
10-27 1万+
a> 标签定义超链接，用于从一个页面链接到另一个页面。
关于超链接target 属性
M十九 的 博客
04-28 4803
target这个属性指定所链接的页面在浏览器窗口中的打开方式。 它的参数值主要有： _blank ：在新浏览器窗口中打开链接文件 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。 _t...
HTML基础：超链接之target属性的4种值详解
u013179804的博客
03-17 3947
另外，对于 target 属性的使用注意事项包括：对于使用 _blank 打开的链接，应该在合适的场景下添加属性，以防止被打开的页面访问原页面的 window 对象，提高安全性。在使用 JavaScript 打开新窗口时，应当小心使用 target="_blank"，避免出现未经用户允许的弹出窗口，并确保提供良好的用户体验。好了，以上，本文完。作者介绍：云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️。
前端--基础 常用标签-超链接标签 外部链接( herf 和 target）
三毛与海子的博客
01-05 2473
超链接-外部链接的属性（ href 和 target ）
HTML 超链接标签、图片标签
小楼一夜听春雨，深巷明朝卖杏花
06-29 1519
超链接就是用来跳转到路径上面。herf是和a标签一起使用的，超链接一般都是使用a标签的，herf只是标签a里面的一个属性。本窗口跳转是一种方式，打开新窗口也是一种方式，打开新窗口用的更加多。如果a标签里面设置name属性，那么#name名称，那么相当于瞄点。
HTML学习第七章(HTML超链接--＜a＞标签)
Baileys_99的博客
03-05 3474
HTML超链接标签：HTML使用标签 来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。在标签 中使用了href属性来描述链接的地址。href 属性：指定超链接目标的URL。如果 href 属性没有被指定链接， 标签将不是一个链接。target属性：规定在何处打开目标 URL，默认情况下，超链接在当前的浏览器窗口打开。
超链接标签的4个样式
weixin_72303943的博客
06-28 5159
a超链接标签的4个样式：a:link 超链接的默认样式。a:visited 访问过的（已经看过的）链接样式。a:hover 鼠标处于鼠标悬停状态的链接样式。a:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。...
说说超链接 target 属性的取值和作用？
小飞的博客
05-12 4455
target这个属性指定所链接的页面在浏览器窗口中的打开方式。 它的参数值主要有： _blank：在新浏览器窗口(新标签)中打开链接文件； _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果 含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self：在同一框架（iframe）或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 _top：**在当前的整个浏览器窗口（此标签）**中打开所链接的文档，因而会删除所有框架； ...
HTML5常用标签与属性详解
这些HTML5标签和属性的应用，不仅可以提升网页的结构化和语义化，也有助于提高SEO（搜索引擎优化）效果，使网页在搜索引擎结果中更容易被找到。了解并熟练掌握这些常用方法，对于HTML5的学习和网页开发至关重要。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值