相对路径和绝对路径与链接标签

一.相对路径

相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。

图片相对于你写的html页面的位置

相对路径分类符号说明
同一级路径图片与html文件处于同一级,如<img src="baidu.gif">
下一级路径/图片位于html文件下一级,如<img src="images/baidu.gif">
上一级路径../图片位于html文件下一级,如<img src="../baidu.gif">

1.同一级路径

可以看到此时oip的这张图片与我写的这个html文件(三种相对路径)同处在HTML这个文件夹里,他们属于同一级路径

2.下一级路径

这里可以看到这个html文件(三种相对路径)与image相对为同一级,可爱茂夫在相对路径的下一级

3.上一级路径

 百分百茂夫相对与HTMl文件夹为同一级,即百分百茂夫html文件(三种相对路径)的上一级

最后想说茂夫真的帅 

4.总结:相对其实就是找到与html同级包含图片的文件/图片,从同级这里出发,寻找文件  

二. 绝对路径

1.左击此框框可以看到现在此文件夹的路径

一般来说绝对路径不能用live server查看,因为HTML文件是通过Web浏览器访问的,而Web浏览器出于安全考虑不会允许打开file://开头的本地图片

解决办法

直接在本地打开html文件

 

 2.网络中的绝对路径使用

比如获取csdn左上角猿头像,只需要右键复制图像链接

还是会遇到相同的问题,解决办法也跟上面相同

三.超链接标签

 在html标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。

1.超链接的语法规范

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

a为anchor的缩写,意为锚。href的全称为Hypertext Reference,意为超文本引用。

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

2.链接的分类

1.外部链接,例如<a href=写文章-CSDN创作中心">csdn社区</a>

 单机一下->

但此时新打开的页面会覆盖掉原来的窗口,因为此时target默认为_self.

想要另起一个窗口,把target修改为blank,意思为空白的(新建页)。

 2.内部链接

网站内部页面之间的相互链接,直接链接内部页面名称即可,例如创立两个html文件

 单击->

 3.空链接

当我们没有连接目标时,通常用#先代替

4.下载链接

如果href里面地址是一个文件或者压缩包,会下载这个文件。

 5.网页元素链接

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

例如我现在点开一张灵能百分百的图片,就让他跳转到b站的灵能百分百。

->

6.锚点链接

点我们链接,可以快速定位到页面中的某个位置 

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

找到目标位置标签,里面加一个id属性=名字如<h3 id="two">第二集介绍</h3>

例如我们查一下影山茂夫,他这里会有一个目录,点击它,就可以跳转到相应位置

 ->

假设我现在想跳转到角色介绍处

点击跳转->

 、

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java】Switch语句、循环语句(for、while、do...while)

Switch语句&#xff1a;针对某个表达式的值进行判断&#xff0c;从而决定执行哪一段代码 语法格式&#xff1a; switch(表达式){ case 目标值1: 执行语句1 break; case 目标值2: …

P3916 图的遍历(Tarjan缩点和反向建边)

P3916 图的遍历 - 洛谷 | 计算机科学教育新生态 写法一&#xff1a;Tarjan 思路&#xff1a;先运用Tarjan算法得到每个连通块中最大的编号&#xff0c;然后对每个连通块进行缩点重新建图&#xff0c;进行dfs&#xff0c;得到缩点后的连通块能够达到的最大编号。 Code: conste…

2024年认证杯SPSSPRO杯数学建模D题(第一阶段)AI绘画带来的挑战解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 D题 AI绘画带来的挑战 原题再现&#xff1a; 2023 年开年&#xff0c;ChatGPT 作为一款聊天型AI工具&#xff0c;成为了超越疫情的热门词条&#xff1b;而在AI的另一个分支——绘图领域&#xff0c;一款名为Midjourney&#xff08;MJ&#xff…

同为科技(TOWE)柔性定制化PDU插座

随着科技的进步&#xff0c;越来越多的精密电子设备&#xff0c;成为工作生活密不可分的工具。 电子电气设备的用电环境也变得更为复杂&#xff0c;所以安全稳定的供电是电子电气设备的生命线。 插座插排作为电子电气设备最后十米范围内供配电最终核心部分&#xff0c;便捷、安…

GPS模块/SATES-ST91Z8LR:电路搭建;直接用电脑的USB转串口进行通讯;模组上报定位数据转换地图识别的坐标手动查询地图位置

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…

设计模式阅读笔记

参考&#xff1a;设计模式目录&#xff1a;22种设计模式 设计模式是什么&#xff1f; 设计模式是软件设计中常见问题的典型解决方案。 它们就像能根据需求进行调整的预制蓝图&#xff0c; 可用于解决代码中反复出现的设计问题。 设计模式与方法或库的使用方式不同&#xff0c…

详尽的oracle sql函数

1&#xff0c;CHR 输入整数&#xff0c;返回对应字符。 用法&#xff1a;select chr(65),chr(78) from dual; 2&#xff0c;ASCII 输入字符&#xff0c;返回对应ASCII码。 用法&#xff1a;select ascii(A),ascii(B) from dual; 3&#xff0c;CONCAT 输入两个字符串&#xff0c…

C++小碗菜之二:软件单元测试

“没有测试的代码重构不能称之为重构&#xff0c;它仅仅是垃圾代码的到处移动” ——Corey Haines 目录 前言 什么是单元测试&#xff1f; 单元测试的组成 单元测试的命名 单元测试的独立性 Google Test 单元测试的环境配置与使用 1. Ubuntu下安装 Google Test 2. 编写…

Go 1.19.4 HTTP编程-Day 20

1. HTTP协议 1.1 基本介绍 HTTP协议又称超文本传输协议&#xff0c;属于应用层协议&#xff0c;在传输层使用TCP协议。HTTP协议属是无状态的&#xff0c;对事务处理没有记忆能力&#xff0c;如果需要保存状态需要引用其他技术&#xff0c;如Cookie。HTTP协议属是无连接的&…

【SpringBoot】使用IDEA创建SpringBoot项目

1、使用SpringBoot脚手架创建 我们使用SpringBoot的脚手架Spring Initializr创建&#xff0c;如图所示&#xff1a; 2、选择SpringBoot版本 最开始做项目时候&#xff0c;组长说创建一个 springboot 2.5.4 的项目&#xff0c;mysql使用 5.6.X &#xff0c;maven使用是3.6.X…

使用Oracle通过gateway连接MSSQL

环境概述 某医院的his系统Oracle数据库要和体检系统进行数据通讯&#xff0c;需要从Oracle能查到sqlserver的数据。本次通过Oracle gateway来解决此问题。 HIS服务器&#xff1a;windows server 2016数据库oracle11.2.0.4&#xff0c;假设IP是192.168.100.9 体检服务器&…

leetcode 之 二分查找(java)(2)

文章目录 74、搜索二维矩阵33、搜素旋转排序数组 74、搜索二维矩阵 题目描述&#xff1a; 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff…

Linux中的信号

目录 生活中的信号 Linux中的信号 前台进程与后台进程 信号的产生 核心转储 core dump ​编辑信号的其他相关概念 信号处理的三种方式 信号在内核中的表示示意图 sigset_t 类型 信号集操作函数 sigprocmask sigpending 综合练习 用户态与内核态 信号的捕捉过程 …

基于STM32F4实现步进电机闭环控制实现(无PID)

文章目录 概要整体流程代码实现TIM8 PWM控制TIM5 编码器计数TIM13 闭环控制 效果展示小结 概要 因客户外部负载较大&#xff0c;步进电机出现丢步现象&#xff0c;所以需要进行闭环控制&#xff0c;保证最后走到相应的位置即可&#xff0c;所以我采用的是电机停止后与编码器值…

第4章:颜色和背景 --[CSS零基础入门]

在 CSS 中&#xff0c;颜色和背景属性是用于美化网页元素的重要工具。你可以通过多种方式定义颜色&#xff0c;并且可以设置元素的背景颜色、图像、渐变等。以下是关于如何在 CSS 中使用颜色和背景的一些关键点和示例。 1.颜色表示法 当然&#xff01;以下是使用不同颜色表示…

二叉树概述

目录 一、二叉树的基本结构 二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历 三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点 四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…

04 创建一个属于爬虫的主虚拟环境

文章目录 回顾conda常用指令创建一个爬虫虚拟主环境Win R 调出终端查看当前conda的虚拟环境创建 spider_base 的虚拟环境安装完成查看环境是否存在 为 pycharm 配置创建的爬虫主虚拟环境选一个盘符来存储之后学习所写的爬虫文件用 pycharm 打开创建的文件夹pycharm 配置解释器…

weblogic开启https

JSK证书生成 生成密钥库和证书 使用Java的keytool命令来生成一个Java密钥库&#xff08;Keystore&#xff09;和证书。keytool是Java开发工具包&#xff08;JDK&#xff09;中用于管理密钥库和证书的命令行工具。 #创建证书存放目录 [weblogicosb1 jksHL]$ mkdir -p /home/w…

学习记录,正则表达式, 隐式转换

正则表达式 \\&#xff1a;表示正则表达式 W: 表示一个非字&#xff08;不是一个字&#xff0c;例如&#xff1a;空格&#xff0c;逗号&#xff0c;句号&#xff09; W: 多个非字 基本组成部分 1.字符字面量&#xff1a; 普通字符&#xff1a;在正则表达式中&#xff0c;大…

防火墙有什么作用

防火墙的作用&#xff1a;1. 提供网络安全防护&#xff1b;2. 实施访问控制和流量过滤&#xff1b;3. 检测和阻止恶意攻击&#xff1b;4. 保护内部网络免受未经授权的访问&#xff1b;5. 监控网络流量和安全事件&#xff1b;6. 支持虚拟专用网络&#xff08;VPN&#xff09;。防…