首页 > 其他分享 >HTML5的标签(文本链接、图片路径详解)

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

时间:2024-05-27 21:34:14浏览次数:18  
标签:文件 HTML 标签 路径 绝对路径 详解 相对路径 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/

如下图:

标签:文件,HTML,标签,路径,绝对路径,详解,相对路径,HTML5,图片
From: https://blog.csdn.net/2301_79582459/article/details/139247618

相关文章

  • 详解PySide多线程【Python-Pyside图形界面绘制#2】
    在了解pyside多线程之前,如果是初学者可以先去看看我的第一篇文章《超详细实例详解Python多线程》,文中有对多线程的概念进行详细介绍,如果有相关基础可直接跳过。【Python】超详细实例讲解python多线程(threading模块)_pythonthreading介绍-CSDN博客https://blog.csdn.net/Xiao_......
  • android studio2024最新详解(完全小白)安装-运行第一个程序
    前面我用2023最新版本的,死活就卡在引入依赖那里卡了两天,俺的崩溃谁知啊!! 后面我就换了个思维,看着网上大多的教程都是基于2022或者2020的,我就找了个看起来非常详细的视频,里面的是2020的,所以我就下载了2020。  有点小伙伴可能会找不到androidstudio的过往版本,这里我就直......
  • [转载]TCP keepalive的详解(解惑)
    原文出自于https://www.cnblogs.com/lanyangsh/p/10926806.htmlTCP是面向连接的,一般情况,两端的应用程序可以通过发送和接收数据得知对端的存活。当两端的应用程序都没有数据发送和接收时,如何判断连接是否正常呢?这就是SO_KEEPALIVE的作用。1.SO_KEEPALIVE的作用1.1SO_KEEPA......
  • 一文详解SaaS增长模式:PLG、MLG、SLG哪种更适合你?
    在SaaS(软件即服务)的领域中,增长策略的选择对于企业的成功至关重要。其中,PLG(产品驱动增长)、MLG(市场驱动增长)和SLG(销售驱动增长)是三种常见的策略,三者被称为驱动saas用户增长的三因子,那么,究竟哪种策略更适合你的企业呢?一、PLG(产品驱动增长)这种策略的核心在于通过产品自身的优秀......
  • mybatis- [04] mapper文件详解
      Mybatis的Mapper文件(通常是以.xml为扩展名的文件)主要用于定义SQL语句和它们与Java接口方法之间的映射关系。以下是Mapper文件中一些常用的配置元素和属性。 一、mapper文件配置详解(1)namespace:定义Mapper接口对应的唯一命名空间,用于区分不同的Mapper。(常以UserMapper类的......
  • 代码雨(coderain)源码(html5+css3+javascript,原创)
     大家看过黑客帝国的代码雨吗?本人自己写了一个,效果还可以。演示效果请见https://www.lanbaoshi.site/coderain.htm下面上代码:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="htt......
  • 全面详解Java并发编程:从基础到高级应用
    全面详解Java并发编程:从基础到高级应用Java并发编程是Java开发中一个非常重要的领域,涉及多线程编程技术,用于提高程序的性能和响应能力。并发编程在多核处理器上特别有用,因为它可以同时执行多个任务,从而提高应用程序的效率。以下是对Java并发编程的详细讲解,涵盖基本概念、线......
  • Yolov5——训练目标检测模型详解(含完整源码)
    项目的克隆打开yolov5官网(GitHub-ultralytics/yolov5atv5.0),下载yolov5的项目:环境的安装(免额外安装CUDA和cudnn)打开anaconda的终端,创建新的名为yolov5的环境(python选择3.8版本):condacreate-nyolov5python=3.8执行如下命令,激活这个环境:condaactivateyolov5......
  • Java 三大特性之封装(包含构造器,this关键字详解)
    java封装在Java中,面向对象的封装(Encapsulation)是一种将对象的属性和行为(数据和方法)包装在一起,隐藏对象的属性和实现细节,仅对外提供公共访问方式来操作该对象的方法。封装的主要目的是增强安全性和简化编程,同时使代码更易于维护和扩展。java封装的特点1.良好的封装能够减少......
  • 国产操作系统上telnet命令详解 _ 统信 _ 麒麟 _ 中科方德
    原文链接:国产操作系统上telnet命令详解|统信|麒麟|中科方德Hello,大家好啊!今天给大家带来一篇在国产操作系统上使用telnet命令的详细介绍文章。telnet是一个经典的网络协议和工具,广泛用于测试和管理远程服务器。本文将详细介绍如何在统信UOS、麒麟KOS、中科方德等国产......