HTML5的标签(文本链接、图片路径详解)

news2024/11/13 10:22:36

目录

前言

一、文本链接

超链接表述

二、图片路径详解

绝对路径

相对路径

网络路径


前言
 

一、文本链接

超链接表述

HTML 使用标签<a>来设置超文本链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

会出现下面的情况:紫色的是 点击过的,蓝色的是 未点击的。(点击即可直接跳转到相应的网站)

二、图片路径详解

在HTML 5中,可以使用相对路径或绝对路径来定义图片路径。以下是关于这两种路径的详细解释:

1. 相对路径:
相对路径是相对于当前HTML文件的路径。相对路径可以分为以下几种类型:

- 相对于当前文件路径:
  当图片文件和HTML文件在同一目录下时,可以直接写图片文件名作为路径。
  例如:\<img src="image.jpg"\>

- 相对于当前文件的父目录路径:
  当图片文件在当前HTML文件的父目录中时,可以使用"../"来向上一级目录。
  例如:\<img src="../images/image.jpg"\>

- 相对于当前文件的子目录路径:
  当图片文件在当前HTML文件的子目录中时,可以直接写子目录路径。
  例如:\<img src="images/image.jpg"\>

2. 绝对路径:
绝对路径是相对于网站根目录的路径,可以使用完整的URL地址或相对路径表示。

- 使用完整的URL地址:
  可以直接使用完整的URL地址来引用网络上的图片文件。
  例如:\<img src="https://example.com/images/image.jpg"\>

- 使用相对路径表示绝对路径:
  可以使用相对路径从网站的根目录开始指定图片文件的路径。
  例如:\<img src="/images/image.jpg"\>

总之,在HTML 5中,可以根据需要使用相对路径或绝对路径来定义图片路径,确保图片文件可以正确显示在网页上。

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

 <img src="C:\Program\1.jpg"  width="300px"  >

相对路径

两者相对关系,两者在同一路径下可以直接访问

  • 子级关系:/     
  • 父级关系:../
  • 同级关系:./

如图所示:

网络路径

具体的网络地址:https://pic3.zhimg.com/

如下图:

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

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

相关文章

Elasticsearch之入门与安装

Elaticsearch&#xff0c;简称为es&#xff0c; es是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据。es也使用Java开发并使用Lucene作为其核心来…

CVE-2024-27954 WordPress Automatic插件 SSRF与任意文件读取漏洞分析

WordPress Automatic 插件<3.92.1易受未经验证的任意文件下载和SSRF的攻击。位于downloader.php文件中&#xff0c;可能允许攻击者从网站访问任何文件。敏感数据&#xff0c;包括登录凭据和备份文件。此漏洞已在3.92.1版本中修补。 漏洞分析 定位文件 \wp-automatic\downl…

四款开源电子表格组件,轻松集成到你的项目

hello&#xff0c;大家好&#xff0c;我是徐小夕。之前和大家分享了很多可视化&#xff0c;零代码和前端工程化的最佳实践&#xff0c;最近在研究在线电子表格的技术实现&#xff0c;发现了几个优质的开源电子表格项目&#xff0c;这里和大家一起分享一下。 同时我也把其中一款…

外汇天眼:野村证券和Laser Digital与GMO互联网集团合作发行日元和美元稳定币

野村控股和Laser Digital将与GMO互联网集团合作&#xff0c;在日本探索发行日元和美元稳定币。GMO互联网集团的美国子公司GMO-Z.com Trust Company, Inc. 在纽约州金融服务部的监管框架下&#xff0c;在以太坊、恒星币和Solana等主要区块链上发行稳定币。GMO-Z.com Trust Compa…

【mysql】ubuntu下安装数据库

1更新软件包 sudo apt update //更新软件包2安装数据库 sudo apt install mysql-server//安装数据库注意后面mysql-server是个整体 3安全设置配置 sudo mysql_secure_installation//安全设置配置你要设置验证密码吗&#xff1f; 输入设置密码安全等级&#xff08;0,1&am…

aws lakeformation注册s3位置的原因

参考资料 lakeformation底层数据的访问逻辑 向lakeformation注册s3位置的目的是让lakeformation控制对AWS S3 位置底层数据的访问&#xff08;以下简称LF&#xff09; 注册s3位置后可以进行两种授权 数据访问授权&#xff08;SELECT、INSERT 和 DELETE&#xff09; 数据位置…

【课件分享】智慧档案编研规划与落地

关注我们 - 数字罗塞塔计划 - 5月25日&#xff0c;罗塞塔直播间再度上线&#xff0c;每一次相聚都有特殊的意义&#xff0c;每一次分享都能激发无限的可能。上海市档案馆档案史料编研部石磊主任、嘉定区档案局周万春局长 、上海师范大学人文学院吕元智教授 、复旦大学计算机科…

微信公众号完成自动回复,自定义菜单

微信公众号完成自动回复&#xff0c;自定义菜单 首先要获取到微信公众号的开发者权限&#xff0c;这一步省略&#xff0c;可以自行百度 微信公众号对接自己的服务器 首先第一步需要有自己的服务器和固定的ip&#xff0c; 其中&#xff0c;80/443端口需要有其中一个&#xff0…

《云原生安全攻防》--快速识别虚拟机、Docker和K8s集群环境

今天我们将一起学习一个非常实用的技巧&#xff0c;快速识别云原生环境。 对于攻击者而言&#xff0c;随着云原生应用普及&#xff0c;当攻击者获得一个shell权限时&#xff0c;那么这个shell可能处于虚拟主机里&#xff0c;也有可能在一个Docker环境里&#xff0c;或者在K8s集…

Diffusion Model 和 Stable Diffusion 详解

文章目录 Diffusion Model 基础生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构VAE 模型文本编码器…

数据恢复的救星!快速恢复手机数据的2个秘籍!

当我们的照片、视频、联系人、短信和应用程序丢失时&#xff0c;许多人可能会感到束手无策&#xff0c;无论是珍贵的照片、重要的工作文件还是个人的联系方式&#xff0c;一旦丢失&#xff0c;都可能带来极大的不便和困扰。但随着数据恢复技术的发展&#xff0c;我们有了更多的…

【pm2 - sdk 集成到程序中,典型用法】

pm2作为一款进程管理神器&#xff0c;除了命令行的启动方式外&#xff0c;其还对应有sdk&#xff0c;集成到程序中&#xff0c;我们可以连接到已有或创建pm2的守护进程&#xff0c;与其进行交互&#xff0c;动态&#xff0c;编程式地控制程序的启停等。以下为示例&#xff1a; …

数据结构——不相交集(并查集)

一、基本概念 关系&#xff1a;定义在集合S上的关系指对于a&#xff0c;b∈S&#xff0c;若aRb为真&#xff0c;则a与b相关 等价关系&#xff1a;满足以下三个特性的关系R称为等价关系 (1)对称性&#xff0c;aRb为真则bRa为真&#xff1b; (2)反身性,aRa为真; (3)传递性,aRb为真…

Android studio 连接 adb传输文件到电脑

前提是已经连接到adb window R&#xff1a; 打开控制台adb devices&#xff1a;可以查看已经连接的设备adb pull /storage/emulated/0/Download/aa.png C:\Users\Administrator\Desktop&#xff1a;拉取连接设备的文件 aa.png 到电脑桌面上 (在电脑控制台进行拉取操作) 如果…

XShell免费版的安装配置

官网下载 https://www.xshell.com/zh/free-for-home-school/ 下载地址 通过邮箱验证 新建会话 通过ssh登录树莓派 填写主机IP 点击用户身份验证 成功连接

Swagger测试接口,请求头添加token

概述Swagger 1、概述 在日常开发中&#xff0c;我们的业务需要用户登录&#xff0c;权限控制。但是在某些情况下我们使用Swagger测试接口&#xff0c;部分接口需要携带token&#xff0c;才能访问&#xff0c;就需要在swagger添加token窗口。 效果图&#xff1a; 由 右上角 A…

Autodl如何进行实例使用(同区)

一、首先找到之前保存的实例 二、点击更多然后选择克隆实例 三、选择是否要保存之前的数据盘 四、选择空余的GPU进行创建即可

等了10年,终于迎来RTX5/RTX4全家桶开源,开源,开源! 且免费商用

我们的V4, V5, V6 ,V7开发板都配套了大量的RTX4, RTX5教程和案例&#xff0c;从2015年发布首版RTX4内核教程以来&#xff0c;已经整整10年了。 1、制作这个RTX教程和案例&#xff0c;其实也承受了很大的压力&#xff0c;因为只有RTX内核是免费商用的&#xff0c;中间件并不免费…

spring-boot 3.2 + spring-boot-starter-quartz + HikariCP配置

第一步&#xff0c;添加 spring-boot-starter-quartz 的 maven 依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-quartz</artifactId> </dependency> 第二步&#xff0c;在 ap…

【Android14 ShellTransitions】(四)Transition收集动画参与者

这一节的内容在WMCore中&#xff0c;现在Transition已经走到COLLECTING状态了&#xff0c;并且可以收集动画参与者了。 那么Transition是在什么时候去收集动画参与者&#xff1f;回到我们最初的ActivityStarter.startActivityUnchecked&#xff1a; 在调用了TransitionControl…