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/

如下图:

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

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

相关文章

本地电脑通过远程服务器进行ssh远程转发

☆ 问题描述 想要实现这样一个事情&#xff1a; 我想要提供一个ai服务&#xff0c;但是租计算服务器太贵了&#xff0c;我自己有配的台式机。那么用我的台式机作为服务器&#xff0c;租一个服务器做端口转发可行吗&#xff1f; ★ 解决方案 1. 修改服务器上的sshd_config文件…

如何格式化只读U盘?

U盘只读无法格式化&#xff0c;该怎么处理&#xff1f;别担心&#xff01;本文将向你提供一些实用方法&#xff0c;助你解决U盘写保护的难题。这些方法能有效帮助你解除U盘的只读状态&#xff0c;从而可以顺利进行格式化和其他操作。 不能格式化只读U盘 “我购买了一个U盘&…

vmware esxi虚拟化数据迁移

1、启用esxi的ssh 登录esxi的web界面&#xff0c;选择主机-》操作——》服务——》启动ssh 2.xshell登录esxi 3、找到虚拟机所在目录 blog.csdnimg.cn/direct/d57372536a4145f2bcc1189d02cc7da8.png)#### 3在传输数据前需关闭防火墙服务 查看防火墙状态&#xff1a;esxcli …

系统架构设计师【第8章】: 系统质量属性与架构评估 (核心总结)

文章目录 8.1 软件系统质量属性8.1.1 质量属性概念8.1.2 面向架构评估的质量属性8.1.3 质量属性场景描述 8.2 系统架构评估8.2.1 系统架构评估中的重要概念8.2.2 系统架构评估方法 8.3 ATAM方法架构评估实践8.3.1 阶段1—演示&#xff08;Presentation&#xff09;8.3…

卷积网络迁移学习:实现思想与TensorFlow实践

摘要&#xff1a;迁移学习是一种利用已有知识来改善新任务学习性能的方法。 在深度学习中&#xff0c;迁移学习通过迁移卷积网络&#xff08;CNN&#xff09;的预训练权重&#xff0c;实现了在新领域或任务上的高效学习。 下面我将详细介绍迁移学习的概念、实现思想&#xff0c…

堆排序详细理解

目录 一、前备知识 二、建堆 2.2.1 向上调整算法建堆 2.2.2 向下调整算法建堆 三、排序 3.1 常见问题 3.2 思路 3.3 源码 一、前备知识 详细图解请点击&#xff1a;二叉树的顺序实现-堆-CSDN博客 本文只附上向上/向下调整算法的源码 //交换 void Swap(int* p, int* …

发电机组故障的原因、解决方案及解决措施

发电机组故障的原因、解决方案及解决措施可以总结如下&#xff1a; 一、故障原因 供电中断 原因&#xff1a;电网故障、线路短路或电力负荷过重等。 燃油问题 原因&#xff1a;燃油供应系统问题&#xff0c;如燃油管路堵塞、燃油质量不佳等。 轴承过热 原因&#xff1a;轴承过…

TensorFlow Playground神经网络演示工具使用方法详解

在现代机器学习领域,神经网络无疑是一个重要的研究方向。然而,对于许多初学者来说,神经网络的概念和实际操作可能显得相当复杂。幸运的是,TensorFlow Playground 提供了一个交互式的在线工具,使得我们可以直观地理解和实验神经网络的基本原理。在这篇博客中,我们将详细介…

长虹智能电视55D3P(机芯:ZLH74GiR2G)海思平台固件解析打包

一、使用Hitool打包固件 接上一篇&#xff0c;尝试使用HITOOL打包固件 长虹55D3P海思平台固件破解-CSDN博客 参考ZNDS HItool备份固件&#xff1a;【玩机必看】海思机顶盒备份线刷包 制作分区表xml文件_ZNDS刷机/救砖_ZNDS HITOOL下载&#xff1a;https://cloud.189.cn/web/…

Visual Studio 2022创建dll并调用

需求&#xff1a; 创建A项目&#xff0c;有函数和类&#xff0c;将A项目生成DLL动态链接库 创建B项目&#xff0c;使用A项目生成的dll和lib相关文件 正常项目开发.h用于函数声明&#xff0c;.cpp用于函数实现&#xff0c;但是项目开发往往不喜欢将.cpp函数实现的代码发给别人&…

Elasticsearch 认证模拟题 - 5

一、题目 .在集群上有一个索引 food_ingredient&#xff0c;搜索需要满足以下要求&#xff1a; 三个字段 manufacturer&#xff0c;name&#xff0c;brand 都能匹配到文本 cake mix高亮 字段 name&#xff0c;并加标签排序&#xff0c;对字段 brand 正序&#xff0c;_score 降…

Docker安装Redis(云服务器)

准备&#xff1a; 在云服务器中开启6370端口号 docker run -d --name redis -p 6379:6379 redis 这条命令使用docker运行一个名为"redis"的容器&#xff0c;映射容器的6379端口到主机的6379端口&#xff0c;并且使用redis镜像来运行容器。REDIS是一个开源的内存数据…

2024最新群智能优化算法:大甘蔗鼠算法(Greater Cane Rat Algorithm,GCRA)求解23个函数,提供MATLAB代码

一、大甘蔗鼠算法 大甘蔗鼠算法&#xff08;Greater Cane Rat Algorithm&#xff0c;GCRA&#xff09;由Jeffrey O. Agushaka等人于2024年提出&#xff0c;该算法模拟大甘蔗鼠的智能觅食行为。 参考文献 [1]Agushaka J O, Ezugwu A E, Saha A K, et al. Greater Cane Rat Alg…

C++ 混合运算的类型转换

一 混合运算和隐式转换 257 整型2 浮点5 行吗&#xff1f;成吗&#xff1f;中不中&#xff1f; C 中允许相关的数据类型进行混合运算。 相关类型。 尽管在程序中的数据类型不同&#xff0c;但逻辑上进行这种运算是合理的相关类型在混合运算时会自动进行类型转换&#xff0c;再…

2024Dragon Knight CTF复现web

穿梭隐藏的密钥 首先看看页面的源代码&#xff0c;但是发现f12和鼠标右键都被禁用了 用ctrlu查看&#xff0c;发现一个可疑页面 访问看看&#xff0c;发现还是只有一张图&#xff0c;查看源代码发现提示 扩展&#xff1a; Fuzz&#xff1a;Fuzz是一种基于黑盒的自动化软件模糊…

TXT文档拆分、合并、添加内容,修改内容、删除内容——首助编辑高手软件一招解决

下面这个TXT文档里面是一篇长篇小说&#xff0c;大家都知道一般小说文字内容是比较大的一个文件呢&#xff0c;想要拆分&#xff0c;拆分肯定是有方法呢&#xff0c;比如比较重统的方法手动一章一章复制出来&#xff0c;粘贴到另一个文档里面去粘贴&#xff0c;手动操作是不是很…

【GlobalMapper精品教程】083:基于DEM整体抬升或下降地形高程的两种方式

在Globalmapper24中文版中,可以很方便地对DEM高程数据进行整体抬升或下降。 文章目录 一、准备DEM数据二、高程整体修改1. 修改偏移2. 数据导出三、栅格计算器一、准备DEM数据 订阅专栏后,从私信查收实验数据及Globalmapper24中文版,加载实验数据包data083.rar中的dem数据,…

数据结构:希尔排序

文章目录 前言一、排序的概念及其运用二、常见排序算法的实现 1.插入排序2.希尔排序总结 前言 排序在生活中有许多实际的运用。以下是一些例子&#xff1a; 购物清单&#xff1a;当我们去超市购物时&#xff0c;通常会列出一份购物清单。将购物清单按照需要购买的顺序排序&…

[ROS 系列学习教程] 建模与仿真 - Xacro 语法

ROS 系列学习教程(总目录) 本文目录 一、属性与属性块二、数学表达式三、宏3.1 宏的基本使用3.2 属性块做为宏的入参3.3 任意数量元素做为宏的入参3.4 指定多个块元素的处理顺序3.5 宏嵌套3.6 默认参数3.7 局部属性 四、Rospack 命令五、包含其他 xacro 文件六、条件语句七、YA…

机器人动力学模型与MATLAB仿真

机器人刚体动力学由以下方程控制&#xff01;&#xff01;&#xff01; startup_rvc mdl_puma560 p560.dyn 提前计算出来这些“disturbance”&#xff0c;然后在控制环路中将它“抵消”&#xff08;有时候也叫前馈控制&#xff09; 求出所需要的力矩&#xff0c;其中M项代表克服…