Web基础 HTML标签 六种超链接标签的使用方式

news2024/11/17 7:28:07

超链接标签(重点)

1、链接的语法格式:

<a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a>

<a>标签里的a是单词anchor的的缩写,意为:锚。

两个属性的作用如下:

属性作用
href用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式和,其中_self(当前页面打开)为默认值,_blank为在新窗口中打开方式。

href:要打开的链接

target:打开窗口的方式。 默认值是_self 当前窗口打开页面,_blank新建窗口打开页面。

将属性写在开始标签<a>里面,例:<a 各类属性 >

将表述链接的文字放在开始标签和结束标签中间,例:<a> 描述 </a>

链接分类:

1、外部链接:例如 <a href="http://www.baidu.com"> 百度 </a>。

外部链接的href属性要以:http:// 开头

2、内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可。

内部链接的href属性不需要以:http:// 开头 

3、空链接:如果当没有确定链接目标时,即可使用空链接,<a href="#"> 首页 </a>

4、下载链接:如果href里面地址是一个文件或压缩包,会下载这个文件。

5、网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

6、锚点链接:点击设定的链接,可以快速的定位到页面中的某个位置

外部链接:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<>
    <h4>以下标签为超链接标签</h4>
    <a href="http://CSDN.com" target="_self" > CSDN官网 </a> <br />
    <a href="http://www.bilibili.com/" target="_blank"> 哔哩哔哩官网 </a>
</body>
</html>

 这就是超链接标签<a>,href是<a>标签必须要写的属性,写了这个属性才是超链接标签。

内部链接:

例如:

<a href="index.html"> 首页 </a>

直接href="html文件名即可",内部链接就是访问自己创建的html文件,用于文件夹中的html文件相互跳转

相同目录的html文件直接输入文件名即可,不同目录的即输入相对地址即可 

空链接:

<a href="#"> 首页 </a>

空链接就是用 # 代替链接的位置,可以把 # 当成占位符。
在开发时,没有想好放什么链接时,就用 # 代替链接,这样代码就不会报错

有些地址没有考虑好去往哪个页面,可以先用 # 代替,等想好了使用哪个页面之后再用链接替换 #

下载链接:

链接地址一般是 文件.exe 或者是 zip 等压缩包形式

下载链接如果是这种格式就不会跳转页面,而是直接下载

<a href="../图片存放/派大星 .zip">下载链接</a>

网页元素链接:

网页元素超链接就是用这些元素代替描述的文字,点击这些图像,音频,视频,都可以前往其他链接页面。

<a href="各种链接"> 各种元素 </a>

网页元素链接就是把元素放入<a> </a>里,让这个元素有超链接的属性
比如放置一个图片,就可以让这个图片有超链接的属性
点击图片,就可以前往另一个链接。

 

 将这个图片赋予了超链接属性,点击这个图片就会前往CSDN官网。

锚点链接:

1、在链接文本的href属性中,设置属性值为 #名字 的形式,如:<a href=" #two"> 第二集 </a>

2、找到目标位置标签,里面添加一个属性 id=刚才的名字,如:<h3 id="two"> 第二集介绍 <h3>

 点击那些蓝色的文字,即可跳转到文章的相应位置,这就是锚点链接的主要功能。

 文章很长时,建议使用锚点标签,方便阅读,可以快速跳到文章的指定位置。

若要快速返回文章顶部,则可以在末尾加一个返回顶部的锚点链接,在文章顶部的开头标签设置一个id="",这样就可以跳转到文章顶部了。

将文章的开头标签设置id:
<h4 id="kaitou"> 文章开头 </h4>

在文章的某个位置设置能快速跳转到开头的标签:
<a href="#kaitou"> 跳到文章顶部 </a>

这样就能快速的回到文章顶部。

以上就是超链接的六种使用方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/410284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

&#x1f41a; 作者: 阿伟 &#x1f482; 个人主页: Flyme awei &#x1f40b; 希望大家多多支持&#x1f618;一起进步呀&#xff01; &#x1f4ac; 文章对你有帮助&#x1f449;关注✨点赞&#x1f44d;收藏&#x1f4c2; JavaScript数组的使用 文章目录JavaScript数组的使用…

【Vue2从入门到精通】详解Vue数据双向绑定原理及手动实现双向绑定

文章目录✨什么是数据双向绑定✨数据双向绑定的原理✨Vue数据双向绑定原理✨实现数据双向绑定的步骤✨手动实现自定义组件的双向绑定的步骤✨写在最后✨什么是数据双向绑定 我们先从单向绑定切入单向绑定非常简单&#xff0c;就是把Model绑定到View。 什么是双向绑定呢&#…

基于pytorch+Resnet101加GPT搭建AI玩王者荣耀

本源码模型主要用了SamLynnEvans Transformer 的源码的解码部分。以及pytorch自带的预训练模型"resnet101-5d3b4d8f.pth"本资源整理自网络&#xff0c;源地址&#xff1a;https://github.com/FengQuanLi/ResnetGPT注意运行本代码需要注意以下几点 注意&#xff01;&a…

【Unity】Button基础-按钮更换图片样式

话说&#xff0c;今天修改了一下项目中的内容&#xff0c;发现按钮不怎么好看&#xff0c;想用图片的方式改一改&#xff0c;然后点开Button&#xff0c;忽然发现好多内容都忘记了。。。 Transition&#xff08;过渡方式&#xff09;&#xff1a;按钮在状态改变时自身的过渡方式…

P2E游戏《西游降魔》站在元宇宙风口 打造高效、完整且可持续的GameFi2.0体系

引言&#xff1a;当人类大步迈入元宇宙时代&#xff0c;链上P2E游戏《西游降魔》正与元宇宙生态相伴相生&#xff0c;带领人们开启Play to Earn的变革之旅。 区块链结合游戏组成新的 GameFi 赛道&#xff0c;在 2021 年迎来爆炸式增长。各大公链如&#xff1a;ETH、BSC、OKCha…

【蓝桥杯】X进制减法、贪心思想、小白专用

问题描述&#xff1a; 解题分析&#xff1a; 首先要搞明白 X 进制与 十 进制是如何转换的&#xff0c;以 X 进制321为例 题中说明&#xff0c;3 的进制为8&#xff0c;2的进制为10&#xff0c;1的进制为2 那么开始计算&#xff1a; 1就代表一个1 2的话是十进制&#xff0c…

【论文精读】COLING 2020 -带有对偶关系图注意力网络的事件检测模型

【论文精读】COLING 2020 -带有对偶关系图注意力网络的事件检测模型 【论文原文】&#xff1a;Event Detection with Dual Relational Graph Attention Networks 【作者信息】&#xff1a;Jiaxin Mi and Po Hu and Peng Li 论文&#xff1a;https://aclanthology.org/2022.c…

Spring系列(六) --- SpringBoot 与 Servlet 的比较及 Spring 读取配置文件的方式

SpringSpringBoot VS ServletSpring 读取配置文件的方式yml 和 properties 的区别SpringBoot VS Servlet Spring 读取配置文件的方式 1 Value 注解获取单个配置项 如在 yml 中定义一个 qq 音乐的 token; 然后输出, 如下: 2 针对对象的读取: ConfigurationProperties 在 yml 中…

笔记本电脑连接不上WiFi怎么办?4个实用解决方法!

案例&#xff1a;笔记本电脑连接不上WiFi怎么办 “朋友们&#xff0c;想问问大家知道为什么我的笔记本电脑连接不上WiFi呢&#xff1f;试了好几遍还是无法连接&#xff0c;遇到这种情况我应该怎么解决呢&#xff1f;感谢大家&#xff01;” 在现代生活中&#xff0c;笔记本电…

HTTP协议详解(二)

目录 1.HTTP 响应详解 1.1认识状态码(status code) 1.2 认识响应报头(header) 1.3 认识响应正文(body) 2.构造 HTTP 请求 2.1 通过form表单构造请求 2.2 通过ajax构造请求 2.3 使用第三方工具构造请求 开始之前我们先复习一下http协议格式 1.HTTP 响应详解 我们先抓包…

【JavaScript】四个常用功能/案例:表格排序 | 替换链接 | 倒计时 | 双色球机选一注

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&am…

《文章复现》考虑用户舒适度的冷热电多能互补综合能源系统优化调度

说明书 免费&#xff1a;https://download.csdn.net/download/qq_50594161/87625438 MATLAB代码&#xff1a;考虑用户舒适度的冷热电多能互补综合能源系统优化调度 关键词&#xff1a;用户舒适度 综合能源 PMV 优化调度 参考文档&#xff1a;《冷热电气多能互补的微能源网鲁…

点击开关按钮,js实现电灯开关效果

初识js&#xff0c;跟大家分享js实现电灯开关灯效果的具体代码&#xff0c;利用简单的htmljs模拟电灯开关的小案例。 首先进行案例分析&#xff1a; 1.获取图片属性 2.判断变量的值 3.点击时切换图片 通过点击按钮实现电灯开关 以下是两张需要的图片&#xff0c;接下来添加…

vue3路由配置及路由跳转传参

1、安装路由 npm i vue-router 2、编写需要展示的路由 在src目录下创建pages文件夹&#xff0c;里面创建两个vue文件命名为student.vue,person.vue 分别编写两个vue文件 student.vue和person.vue <template>学生 </template><script setup></script…

后端架构token授权认证机制:spring security JSON Web Token(JWT)简例

后端架构token授权认证机制&#xff1a;spring security JSON Web Token&#xff08;JWT&#xff09;简例 在基于token的客户端-服务器端认证授权以前&#xff0c;前端到服务器端的认证-授权通常是基于session&#xff0c;自从token机制出现并流行起来后&#xff0c;基于token…

微信小程序详细登录流程(图解+代码流程)

&#x1f482; 个人网站:【紫陌】【笔记分享网】&#x1f485; 想寻找共同学习交流、共同成长的伙伴&#xff0c;请点击【前端学习交流群】微信小程序的登录和web端的登录有一点是不同的&#xff0c;小程序需要和微信的服务通信验证。1.小程序登录流程官网图官网图地址2.认识op…

【node进阶】深度解析Express框架--路由、中间件

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

完全卸载vscode

背景 由于插件崩溃、不正确操作等导致vscode出现异常现象&#xff0c;如&#xff1a;代码高亮失效、无法进行转到定义等&#xff0c;此时的vscode就需要重新完全卸载删除再安装&#xff0c;恢复初始化。 步骤 1、卸载vscode&#xff1a; 任何方法都可以&#xff0c;比如win…

vue 遍历数组

1.forEach(): 遍历数组 需要一个回调函数作为参数 回调函数的形参: ①. value: 遍历数组的内容 ②.index: 对应数组的索引 ③.array: 数组本身 forEach() 方法主要是用于调用数组的每个元素&#xff0c;并将元素传递给回调函数。 注:对于空数组不会执行回调函数 语法: ar…

jsoup 框架的使用指南

概述 参考&#xff1a; 官方文档jsoup的使用JSoup教程jsoup 在 GitHub 的开源代码 概念简介 jsoup 是一款基于 Java 的 HTML 解析器&#xff0c;它提供了一套非常省力的 API&#xff0c;不但能直接解析某个 URL 地址、HTML 文本内容&#xff0c;而且还能通过类似于 DOM、CS…