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

目录

前言

一、文本链接

超链接表述

二、图片路径详解

绝对路径

相对路径

网络路径


前言
 

一、文本链接

超链接表述

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/

如下图:

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

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

相关文章

vscode编辑器创建分支注意事项?!

最近在公司开发项目时&#xff0c;不小心将自己分支的东西提交到公司的master的分支&#xff0c;大家看看是什么情况&#xff1f; 先上图&#xff1a; 从图上看&#xff0c;我这边用了GITLENS这个插件&#xff0c;在创建分支时&#xff0c;有个create branch from&#xff0c;有…

Windows 权限维持之 Shift 后门

正常情况下我们连按五次 shift 键会弹出粘滞键 粘滞键是电脑使用中的一种快捷键&#xff0c;一般连按五次 shift 会出现粘滞键提示&#xff0c;粘滞键是专为同时按下两个或多个键有困难的人而设计的&#xff0c; 粘滞键开启后&#xff0c;可以先按一个键位&#xff0c;再按另一…

如何识别并选择正规、优质的外汇交易平台?

外汇市场的日益繁荣吸引了越来越多的投资者&#xff0c;但同时也带来了众多外汇平台的涌现。如何在这些平台中筛选出正规、可信的平台&#xff0c;成为了每位外汇交易者必须面对的首要问题。以下&#xff0c;我们将为您揭示如何鉴别外汇平台真伪的几个关键方法&#xff1a; 首先…

生成 PDF 用 Turborepo 管理,简单的事情复杂化?

最近在做一个生成报告的项目&#xff0c;稍微了解过这方面知识的同学大概都可以想到直接 HTML 写模板&#xff0c;利用 html2canvas jspdf 两个库就可以实现&#xff0c;非常简单。但是为什么我采用 Turborepo 来管理这个项目呢&#xff1f; 有兴趣的同学在看本文前应先了解一…

从了解到掌握 Spark 计算框架(二)RDD

文章目录 RDD 概述RDD 组成RDD 的作用RDD 算子分类RDD 的创建1.从外部数据源读取2.从已有的集合或数组创建3.从已有的 RDD 进行转换 RDD 常用算子大全转换算子行动算子 RDD 算子综合练习RDD 依赖关系窄依赖宽依赖宽窄依赖算子区分 RDD 血统信息血统信息的作用血统信息的组成代码…

部署k8s的DashBoard

1. 部署 Dashboard UI [rootk8s-master ~]# kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.7.0/aio/deploy/recomme nded.yaml一般上面的网站访问不了 可以下载我上传的资源DashBoard的recommended.yaml vim recommended.yaml 复制粘贴我上…

SQL查询太慢?实战讲解YashanDB SQL调优思路

本文是 Meetup 第十期 “调优实战专场” 的第二篇技术文章&#xff0c;上一篇《高效查询秘诀&#xff0c;解码 YashanDB 优化器分组查询优化手段》中&#xff0c;我们揭秘了 YashanDB 分组查询优化秘诀&#xff0c;本文将通过一个案例&#xff0c;助你快速上手 YashanDB 慢日志…

爱堡集团数智掘金—共绘上市蓝图

&#xff08;本台记者报&#xff09;2024年5月26日爱堡集团在浙江省杭州市上城区瑞莱克斯大酒店隆重召开规模达500人的盛会。这场聚焦智慧与创新的会议&#xff0c;旨在加速爱堡集团的数智化转型进程&#xff0c;并为其上市之路绘制蓝图&#xff0c;吸引了众多行业领袖和媒体的…

统信UOS桌面操作系统1070安装vmware workstation 17

原文连接&#xff1a;统信UOS桌面操作系统1070安装vmware workstation 17 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在统信UOS桌面操作系统1070上安装VMware Workstation 17.5.2的文章。VMware Workstation是一款强大的虚拟化软件&#xff0c;可以让您在一台计…

未来工厂新篇章:大型工厂3D可视化技术引领工业新潮流

在科技日新月异的今天&#xff0c;大型工厂不再是我们印象中机器轰鸣、尘土飞扬的钢铁丛林&#xff0c;而是变成了智慧与效率并存的现代化生产中心。这一切的改变&#xff0c;都离不开一项革命性的技术——3D可视化。 一、何为大型工厂3D可视化&#xff1f; 大型工厂3D可视化&…

vue3 setup 使用 beforeRouteEnter 组件内路由守卫

vue3 setup 使用 beforeRouteEnter 组件内路由守卫 setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数&#xff0c; 没有beforeRouteEnter对应的钩子函数&#xff0c;所以无法在setup中直接使用 <script setup> onBeforeRouteLeave((to, from) > {// …

pytorch使用tensorboardX面板自动生成模型结构图和各类可视化图像

总结&#xff1a; 在原本代码中额外添加如下几行即可实现查看模型结构&#xff1a; from tensorboardX import SummaryWriter # 用于进行可视化# 1. 来用tensorflow进行可视化with SummaryWriter("./log", comment"sample_model_visualization") as sw: …

【echarts】 渐变色格状横条图

案例来源 https://www.makeapie.cn/echarts_content/xutsGwXHGt.html 效果 源码 let list [{name: 中和,value: 6}, {name: 西园,value: 1}, {name: 肖家河,value: 0}, {name: 石羊,value: 8}, {name: 合作,value: 0},{name: 桂溪,value: 6},{name: 芳草街,value: 1} ]; le…

Navicat使用ssh隧道连接mysql数据库

转载请标明出处&#xff1a;http://blog.csdn.net/donkor_/article/details/139352748 文章目录 前言新建连接MySql,填写ssh隧道信息方式1&#xff1a;使用密码方式连接方式二&#xff1a;使用密钥方式连接 填写常规信息总结 前言 使用ssh隧道连接数据库&#xff0c;方便本机…

PS系统教程06

图片裁剪-详细版 首先勾选图层-单机裁剪工具-删除裁剪像素 背景颜色是和左边工作区颜色保持一致的。 确定选择 单机两下工作区中的√按下回车键 缩小裁剪 当你缩小裁剪之后再想扩大&#xff0c;那么扩大的部分就是背景颜色 不勾选删除裁剪像素效果&#xff08;裁剪完单机一…

Element ui 快速入门(基础知识点)

element ui官网 前言&#xff1a; 在当今时代&#xff0c;我们在编写计算机程序时&#xff0c;不仅仅是写几个增删改查的简单功能&#xff0c;为了满足广大用户对页面美观的需求&#xff0c;为了让程序员们写一些功能更简便&#xff0c;提高团队协作效率&#xff0c;所以eleme…

看到大厂工时爆料,我沉默了。。

大厂工时爆料 今天逛脉脉的时候&#xff0c;看到一篇名为「一人一句&#xff0c;大厂工时爆料」的帖子&#xff1a; 点开之后&#xff0c;我沉默了 ... 出来爆料的基本上都是 10 小时。 好奇心之下&#xff0c;我搜索了一下去年很热的排行榜&#xff1a; 2023 年最新互联网公司…

开发小技巧

1.根据JSON生成实体类 打开网站&#xff1a;在线JSON校验格式化工具&#xff08;Be JSON&#xff09; 选中JSON转JAVA实体类&#xff0c;在文本框中输入要转实体类的JSON&#xff0c; 在下边可以输入类名、包名&#xff0c;然后点击下载即可 2、IDEA中复制类的全路径&#xf…

Java—— StringBuilder 和 StringBuffer

1.介绍 由于String的不可更改特性&#xff0c;为了方便字符串的修改&#xff0c;Java中又提供了StringBuilder和Stringbuffer类&#xff0c;这两个类大部分功能是相同的&#xff0c;以下为常用方法&#xff1a; public static void main(String[] args) {StringBuilder sb1 n…

electron初学

最近有一个开发桌面端的业务&#xff0c;考虑到跨平台就使用了electron。 引用官网&#xff1a;Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows…