html中 a href 和img src的用法

2024-04-29 20:38
文章标签 用法 html frontend img href src

本文主要是介绍html中 a href 和img src的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 <a href>用法:

一、绝对跳转

   <a href="http://www.baidu.com/">百度</a>

二、相对跳转

1. 本目录的使用(与本文件在相同的文件夹下):

      <a href="test">

      <a href="test.html">

2. 本目录下的子文件夹(设文件夹名为newdoc)的使用:

       <a href="newdoc/test">

       <a href="newdoc/test.html">

  3. 本目录下的子文件夹下的子文件夹(设文件夹名为newdoc2)的使用(如果更多层,则依此类推):

         <a href="newdoc/newdoc2/test">

         <a href="newdoc/newdoc2/test.html">

  4. 本目录上一层父目录的使用:

         <a href="../test">

         <a href="../test.html">

  5. 本目录上两层父目录的使用(如果更多层,则依此类推):

         <a href="../../test">

         <a href="../../test.html">

  6. 本目录上一层父目录下一个名为new文件夹下的使用(也就是和本文件所在的文件夹在相同目录下的那个new文件夹):

         <a href="../new/test">

         <a href="../new/test.html">


<img src>的用法:

<img> 标签的 src 属性是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

一、绝对 URL - 指向其他网站图片(比如 <img src="http://www.baidu.com/pic/img.jpg">)

二、相对 URL - 指向目录文件

  1.图片和HTML文本在同一目录下:例如index.html  和  img.jpg
写法:<img src="img.jpg">
  2.图片和HTML不在同一目录下:  
若图片img.jpg在文件夹images中,index.html和images文件夹在同一个目录下
写法:<img src="images/img.jpg">
若图片img.jpg在文件夹images中,index.html在controller文件夹中,images和controller文件夹在同一个目录下
写法:<img src="../images/img.jpg">
用法含义:

相对index.html所有的目录而言:
“../../”代表上层的上层目录,以此类推
“../”表示上一级目录开始 “./”表示当前同级目录开始 “/”表示根目录开始。


这篇关于html中 a href 和img src的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/947109

相关文章

MySQL中between and的基本用法、范围查询示例详解

《MySQL中betweenand的基本用法、范围查询示例详解》BETWEENAND操作符在MySQL中用于选择在两个值之间的数据,包括边界值,它支持数值和日期类型,示例展示了如何使用BETWEEN... 目录一、between and语法二、使用示例2.1、betwphpeen and数值查询2.2、be

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

Java序列化之serialVersionUID的用法解读

《Java序列化之serialVersionUID的用法解读》Java序列化之serialVersionUID:本文介绍了Java对象的序列化和反序列化过程,强调了serialVersionUID的作... 目录JavChina编程a序列化之serialVersionUID什么是序列化为什么要序列化serialV

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

python3中正则表达式处理函数用法总结

《python3中正则表达式处理函数用法总结》Python中的正则表达式是一个强大的文本处理工具,用于匹配、查找、替换等操作,在Python中正则表达式的操作主要通过内置的re模块来实现,这篇文章主要... 目录前言re.match函数re.search方法re.match 与 re.search的区别检索

MySQL 中的 JSON_CONTAIN用法示例详解

《MySQL中的JSON_CONTAIN用法示例详解》JSON_CONTAINS函数用于检查一个JSON文档中是否包含另一个JSON文档,这篇文章给大家介绍JSON_CONTAINS的用法、语法、... 目录深入了解 mysql 中的 jsON_CONTAINS1. JSON_CONTAINS 函数的概述2

JDK21对虚拟线程的几种用法实践指南

《JDK21对虚拟线程的几种用法实践指南》虚拟线程是Java中的一种轻量级线程,由JVM管理,特别适合于I/O密集型任务,:本文主要介绍JDK21对虚拟线程的几种用法,文中通过代码介绍的非常详细,... 目录一、参考官方文档二、什么是虚拟线程三、几种用法1、Thread.ofVirtual().start(

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多