当前位置：首页 > news >正文

HTML5+CSS前端开发【保姆级教学】+图像标签附路径问题

news 来源：原创 2025/9/5 17:41:27

引入：

Hello！，各位编程猿们！我们知道在网页文档中合理地加入图像，会使文档变得更加生动活泼和引人入胜，而且看上去更加专业、更具有信息性且易于浏览。本期主要介绍图像标签以及超链接标签

一、设置图像标签

网页中的图像使用<img/>标签插入：

<img src="图像文件路径"/>

属性介绍

1).src

指定图像文件路径

2).alt

指定图像替换信息

3)title

指定图像提示信息

4)width

定义图像的宽度

5)height

定义图像的高度

代码演示

我们先在上一篇文章里随机点击一张图片，右击复制图片链接粘贴在图像标签的src属性的后面

运行出来就是一张图片

当然，我们还可以设置图片的提示信息以及替换信息。title属性是设置图片的提示信息，当运行出来鼠标移动到图片时就会弹出该信息。alt属性是设置图片的替换信息，比如当网络错误或者内容被屏蔽等原因无法加载图像时，浏览器会在页面上显示alt属性中的备用文本

这边我就不展示运行效果了，大家在学习的过程中可以多敲敲代码，去看看运行效果

注意：

ｐx是像素（Pixel）的缩写，通常用于表示数字图像中的图像尺寸或分辨率。它主要用于计算机屏幕媒体，不太适用移动设备

二、不同路径的介绍

引入：

用图片链接来访问图片的方式虽然方便，但是也有个弊端，比如当没有网络或者网络不好的时候图片可能加载不出来，又或者文章的作者把图片删除也会访问不出来，那么我们还有什么方式打开图片呢？

第一步：把图片另存为到工程目录放在同一个文件夹

我们先右击图片，另存为到桌面

这里使用快捷键:Ctrl+O,就可以快速弹出工程目录的文件夹

将桌面上我们另存为的图片剪切到文件夹里

第二步:把我们原先的图片链接改成图片的名称

运行一下结果，我们会发现和图片链接访问出来的页面一模一样

接下来我们来总结一下不同路径的区别

1.物理路径

我们直接点击图片右击复制路径

这个路径就是属于物理路径

最好不要用物理路径，如果换一台电脑可能运行不出来，出发这一台电脑刚好有这个目录的路径

2.绝对路径

绝对路径是网页上的文档

例如完整的网络地址“https://img-blog.csdnimg.cn/img_convert/79d1944db3f278b97f6209f5fd30ed44.png”

3.相对路径

相对路径是相对于当前文档的路径。相对路径没有盘符，通常以当前的HTML网页文档为参照，通过层级关系描述目标图像的位置。

（1）图像和HTML文档位于同一个文件夹：

设置相对路径时，只需输入文件夹名和图像名即可。

(2)./:代表要展示的文件/图片和当前html文件在同一个目录下面

利用Ctrl+O让工程目录的文件弹出来，放一张照片进去

这里使用./加图片名称

我们发现图片是可以显示出来的

(3)../:代表要展示的文件/图片和当前html文件的上一级目录下面

在工程目录的文件夹的上一级的目录中，我们也放一张照片进去

注意这里我们要使用../加图片名称

这时候，我们可以看到图片也是可以正常访问的

在工程目录的文件夹中重新创建一个文件夹，里面存放第一张图片1.png

这时候我们发现，由于图片改变了位置，所以我们无法成功访问

这时候我们在原来的代码的前面应该要加上/img(图片文件夹的名称)

这样我们的照片就可以访问成功了

接着再思考一下我们在项目目录的上一级创建一个文件夹jpng把第2张图片2.jpeg放进去

发现图片2无法访问

这时候我们在原来的图片2名称前面加上../jpng(文件夹名称)

运行结果，图片正常访问

好啦！这期的图像标签以及不同路径的介绍，你学会了嘛，快来动手试试吧！！！下一期会给大家讲解超链接标签，实现各种页面的跳转，是不是很期待呢！如果你喜欢这篇文章，不要忘记点赞收藏加关注哦！！！

HTML5+CSS前端开发【保姆级教学】+图像标签附路径问题

引入： Hello！，各位编程猿们！我们知道在网页文档中合理地加入图像，会使文档变得更加生动活泼和引人入胜，而且看上去更加专业、更具有信息性且易于浏览。本期主要介绍图像标签以及超链接标签一、设置图像标…...

编程日记 2025/9/5 17:41:27

快速启动 Rust + WebAssembly 项目

一、模板一：wasm-pack-template 适合目标：构建一个 Rust 写的 WebAssembly npm 包这是最常用、也是最官方推荐的起点模板。它提供了： Cargo.toml 配置好 WebAssembly 的 crate 类型（cdylib）已设置 wee_alloc 和 pan…...

编程日记 2025/8/17 21:05:46

Linux命令-vim编辑

用vi或vim命令进入vim编辑器。基础: u -- 撤销上一次操作。 x -- 剪切当前光标所在处的字符。 yy -- 复制当前行。 dd -- 剪切当前行。 p -- 粘贴剪贴板内容到光标下方。 i -- 切换到输入模式，在光标当前位置开始输入文本。 :wq -- 保存并退出Vim 编辑器。…...

编程日记 2025/9/5 17:37:36

Windows单机模拟MySQL主从复制

这里写自定义目录标题下载MySQL ZIP压缩包安装主库1、创建配置文件2、安装服务3、初始化数据库4、启动服务5、配置主库安装从库1、配置ini文件2、安装服务3、初始化数据库4、启动服务5、配置从库6、验证从库状态操作主库验证下载MySQL ZIP压缩包 https://dev.mysql.com/do…...

编程日记 2025/9/4 18:40:06

【区块链+ 人才服务】广州理工学院区块链教学平台 | FISCO BCOS 应用案例

深圳市火链文化传播有限公司与广州理工学院合作，共同建设了“区块链教学平台”。该平台旨在探索区块链技术在教育领域的应用，特别是在混合式教学模式中的创新实践。 “区块链教学平台”运用了区块链技术的核心优势，包括分布式、信息防篡改以…...

编程日记 2025/9/5 17:36:43

Java Stream深度解析高阶技巧与性能优化实战

文章目录一、Stream底层机制揭秘1.1 Stream流水线架构1.2 Spliterator探秘二、自定义收集器高级实现2.1 实现高性能统计收集器2.2 多级分组优化技巧三、并行流深度优化3.1 并行度控制策略3.2 工作窃取(Work-Stealing)优化四、无限流与短路操作4.1 生成无限质数流4.2 短路操…...

编程日记 2025/9/5 17:39:22

【JavaEE初阶】多线程重点知识以及常考的面试题－多线程进阶（一）

本篇博客给大家带来的是多线程的知识点, . 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 要开心要快乐顺便进步 1. 常…...

编程日记 2025/8/17 20:38:41

计算机视觉图像分割入门：阈值、区域生长与分水岭算法

计算机视觉图像分割入门：阈值、区域生长与分水岭算法一、前言二、图像分割基础概念大揭秘2.1 图像分割的定义2.2 图像分割的目的与作用2.3 图像分割的应用领域三、阈值算法：最简单的图像分割法3.1 原理剖析3.2 手动阈值分割及代码示例3.3 自动阈值分割方法及代…...

编程日记 2025/9/5 17:39:22

android弱网环境数据丢失解决方案（3万字长文）

在移动互联网时代，Android 应用已经成为人们日常生活中不可或缺的一部分。从社交媒体到在线购物，从移动办公到娱乐游戏，用户对应用的依赖程度与日俱增。然而，尽管网络基础设施在全球范围内得到了显著改善，弱网环境依然…...

编程日记 2025/9/5 17:37:35

设计模式：迪米特法则 - 最少依赖，实现高内聚低耦合

一、迪米特法则简介迪米特法则（Law of Demeter，简称 LoD），也称为“最少知识法则”，核心思想是：一个对象应当对其他对象有最少的了解，仅与直接相关的对象交互。通过减少对象之间的耦合度&#…...

编程日记 2025/9/5 17:40:40

React 把一系列 state 更新加入队列

把一系列 state 更新加入队列设置组件 state 会把一次重新渲染加入队列。但有时你可能会希望在下次渲染加入队列之前对 state 的值执行多次操作。为此，了解 React 如何批量更新 state 会很有帮助。开发环境：Reacttsantd 学习内容什么是“批处理”以…...

编程日记 2025/9/5 17:38:44

AntVG2可视化学习与开发笔记-React19（持续更新）

目录开始工作第一步：创建画布空间第二步：获取画布空间并挂载AntVG2 第三步：进行画布设计配置与数据挂载第四步：完整代码实际效果如下参数理解一、scale 1. 归一化range:[0,1] 2.nice、domainMin 开始工作第一…...

编程日记 2025/9/5 9:46:29

从PPT到DeepSeek开启信息可视化的全新之旅

在当今信息爆炸的时代，如何高效、生动地展示信息成为了个人与企业在沟通、汇报、推广等场景中面临的关键挑战。传统的演示工具，如PPT，虽然曾经是展示信息的主力军，但随着技术的发展和人们审美、交互需求的提升，其局限性…...

编程日记 2025/9/5 17:40:39

spark-sql学习内容总结

SparkSession 定义与功能‌：SparkSession是Spark SQL的入口，封装SparkContext，提供了创建DataFrame和执行SQL的能力。它实质上是SQLContext和HiveContext的组合，因此兼容这两者的API。创建方式‌：在使用spark-shell…...

编程日记 2025/8/17 21:19:07

1、将模型响应转换为 ActorsFilms 对象实例： ActorsFilms package com.alibaba.cloud.ai.example.chat.openai.entity;import java.util.List;public record ActorsFilms(String actor, List<String> movies) { } GetMapping("/toBean")public Ac…...

编程日记 2025/9/5 17:38:45

ffmpeg实现视频转码

ffmpeg 实现视频转码什么是视频编码视频上传成功后需要对视频进行转码处理。什么是视频编码？ 查阅百度百科如下： 所谓视频编码方式就是指通过压缩技术，将原始视频格式的文件转换成另一种视频格式文件的方式。视频流传输中最为重要的编解…...

编程日记 2025/9/5 7:48:29

【Java学习笔记】Java初级阶段代码规范

Java 初级阶段代码规范 1. 类、方法的注释，要以 javadoc 的方式来写。 2. 非 Java Doc 的注释，往往是给代码的维护者看的，着重告读者为什么这样写，如何修改，注重什么问题等 3. 使用 tab 操作，实现缩进&am…...

编程日记 2025/9/5 17:38:45

适应 AI 时代的软件开发流程：用 AI + TDD 构建可维护项目

🧠 适应 AI 时代的软件开发流程：用 AI + TDD 构建可维护项目本文面向有系统开发经验的工程师，分享如何结合 Git 管理、AI 协作、YAML 驱动与 TDD 开发方式，高效构建一个可维护、可协作、可交付的嵌入式或通用工程项目。适合 BLE 模块、协议栈组件、物联网控制系统等项目落…...

编程日记 2025/9/5 17:39:22

EasyCVR视频汇聚系统：AIoT+视频智能分析赋能食品安全生产全流程监管

近年来，随着食品安全问题频发，消费者对食品加工企业的信任度逐渐下降，企业生产监管难度加大，市场监管也面临诸多挑战。在这样的背景下，食品加工企业迫切需要通过智能化手段提升生产管理水平，满足消费者和监管部门的要求，同时实现自身业绩的提升。本文将结合EasyCVR与智…...

编程日记 2025/9/4 6:34:31

ASP.NET Core 性能优化：分布式缓存

文章目录前言一、分布式缓存的核心概念作用：与内存缓存的区别： 二、ASP.NET Core 中的 IDistributedCache三、常用分布式缓存实现1）Redis（最常用）2）SQL Server3）NCache（企业级方案&…...

编程日记 2025/9/5 17:39:23

一款安全好用的企业即时通讯平台，支持统一门户

在数字化转型的浪潮中，企业面临着信息孤岛、系统分散、协作低效等诸多挑战。BeeWorks作为一款专为企业打造的数字化底座平台，凭借其强大的企业内部应用集成能力和单点登录功能，正在成为企业数字化转型的有力推手。数字化底座平台&#xff1…...

编程日记 2025/9/4 19:37:08

C语言栈的描述和详解

什么是栈？ 栈是一种特殊的线性数据结构。定义及特点 - 栈是一种只能在一端进行插入和删除操作的特殊线性表。它按照后进先出（Last In First Out，LIFO）的原则存储数据，就像一个只能从顶部取放物品的箱子，…...

编程日记 2025/9/5 17:37:36

.NET MCP 示例

服务器端示例基础服务器以下是一个基础的 MCP 服务器示例，它使用标准输入输出（stdio）作为传输方式，并实现了一个简单的回显工具： using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.H…...

编程日记 2025/9/5 17:37:34

【论文阅读】MOE奠基论文《Adaptive Mixtures of Local Experts》

《Adaptive Mixtures of Local Experts》前言一、让协同学习竞争1.1 方案1.2 方案演变的由来二、让竞争学习协同2.1 竞争学习2.2 竞争学习协同三、案例验证3.1 任务背景3.2 实验结果3.3 后续工作 (Future Work) 前言论文提出了一个基于多个分离网络的有监督学习方案,该方案…...

编程日记 2025/9/5 17:36:44

MATLAB中replace函数用法

目录语法说明示例替换字符串数组中的子字符串替换匹配模式的子字符串替换多个子字符串 replace函数的功能是查找并替换一个或多个子字符串。语法 newStr replace(str,old,new) 说明 newStr replace(str,old,new) 将所有出现的子字符串 old 替换为 new。如果 …...

编程日记 2025/8/17 21:23:08

MATLAB基本数据类型

1. ‌数值类型‌ ‌整数类型‌： 有符号整数（如 int8, int16, int32, int64）和无符号整数（如 uint8, uint16, uint32, uint64）。这些类型分别占用 1、2、4、8 个字节，表示不同范围的整数值。 ‌浮点数类…...

编程日记 2025/8/17 19:54:03

LeetCode 热题 100_单词拆分（86_139_中等_C++）(动态规划)

LeetCode 热题 100_单词拆分（86_139） 题目描述：输入输出样例：题解：解题思路：思路一（动态规划）： 代码实现代码实现（思路一（动态规划）&a…...

编程日记 2025/8/31 18:53:02

Spring Boot 集成spring-boot-starter-data-elasticsearch

第一步，添加Maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency> 第二步，配置yml spring:elastic…...

编程日记 2025/8/17 21:05:31

【Linux】Linux下的gcc/g++编译器与动静态库

目录对程序的认知&&初识gcc逐步分析程序的编译步骤预编译【进行宏替换】gcc需要执行的指令 ⭐ 编译【C语言——>汇编语言】gcc要执行的指令⭐ 汇编【汇编语言——>可重定位目标二进制文件】gcc需要执行的指令链接【生成可执行文件或库文件】gcc需要执行的指令 …...

编程日记 2025/8/17 18:55:40

从暴力到动态规划再到双指针：使用 Java 探索接雨水问题的不同解法

文章目录一、问题描述二、暴力法（Brute Force）思路实现代码三、动态规划法（Dynamic Programming）思路实现代码四、双指针法（Two Pointers）思路实现代码五、方法对比在本文中，我们将探讨经典…...

编程日记 2025/8/17 20:24:46

CI/CD(十) Jenkins共享库与k8s集成

一、创建k8skey（v1.28.2版本） 1、查看k8s集群名称 rootk8s-master:~# kubectl config get-contexts CURRENT NAME CLUSTER AUTHINFO NAMESPACE * kubernetes-adminkubernetes kubernetes kuber…...

编程日记 2025/8/17 20:16:46

5.Elasticsearch - Spring Data 框架

一、Kibana 介绍 Kibana 是一个免费且开放的用户界面，能够让你对 Elasticsearch 数据进行可视化，并让你在 Elastic Stack 中进行导航。你可以进行各种操作，从跟踪查询负载，到理解请求如何流经你的整个应用，都能轻松完…...

编程日记 2025/8/17 20:34:28

如何通过技术手段降低开发成本

通过技术手段降低开发成本的关键在于： 自动化工具的使用、优化开发流程、云计算资源的利用、开发技术栈的精简与创新、团队协作平台的高效管理。其中，自动化工具的使用是最为有效的技术手段之一。自动化工具通过减少人工干预和重复性工作，大…...

编程日记 2025/8/17 19:03:22

java android持久化数据

1. SQLite 数据库（Android 内置） 1.1 创建数据库帮助类 public class DatabaseHelper extends SQLiteOpenHelper {private static final String DATABASE_NAME "MyDatabase.db";private static final int DATABASE_VERSION 1;// 表名和列名…...

编程日记 2025/8/17 21:17:11

Chromium 134 编译指南 macOS篇：系统环境准备（一）

1. 引言在当今浏览器领域，开源项目Chromium的地位举足轻重。作为众多现代浏览器的技术基础，Chromium不仅驱动着Google Chrome，还为Microsoft Edge、Opera等众多知名浏览器提供了核心引擎。对于热衷于浏览器技术研究，或希望开发自…...

编程日记 2025/8/30 20:10:43

性能优化-Spring参数配置、数据库连接参数配置、JVM调优

SpringBoot配置参数 server:tomcat:#线程池配置max-threads: 200 # 最大工作线程数（建议：2~4倍CPU核心数，如16核设200-400）min-spare-threads: 20 # 最小空闲线程（应对突发流量，…...

编程日记 2025/8/17 19:50:08

【2025年泰迪杯数据挖掘挑战赛】B题数据预处理+问题建模与求解

目录 2025年泰迪杯数据挖掘挑战赛 B题数据预处理问题一、二建模与求解三、数据预处理3.1 基于多核并行的协同处理方法的数据读取3.2 基于多核并行协同处理的数据聚合四、问题一五、问题一技术文档与matlab代码 2025年泰迪杯数据挖掘挑战赛 B题数据预处理问题一、二建模与求…...

编程日记 2025/8/17 19:03:00

git怎么使远程分支回退到指定的节点处

git使远程分支回退到指定的节点引言场景描述步骤引言最近提交代码的时候，总将分支合并错，原本要合到A分支，结果合并到了B分支，这样就导致b分支需要回退到我没有合并之前的节点处。本文记录下怎么将远程分支回退到指定的节点。…...

编程日记 2025/8/17 21:07:01

Spring Boot 使用 QQ 企业邮箱发送邮件的完整指南（含 535 错误排查）

在 Spring Boot 项目中集成邮件功能非常常见，尤其是用户注册通知、异常报警、定期报告等场景。但如果你使用的是 QQ 企业邮箱（smtp.exmail.qq.com），可能会遇到如下典型错误： 535 Error: authentication failed, system busy这篇博客将详细解析出现该问题的原因、排查路径…...

编程日记 2025/8/17 20:14:04

MySQL联合查询||多表查询

mysql中如何注释...

编程日记 2025/9/4 23:24:20

java 递归遍历JSON字符串获取某个字段的值

在 Java 中，若要递归遍历 JSON 字符串并获取特定字段的值，可借助 Jackson 库。以下是一个示例代码，它能实现递归遍历 JSON 字符串并获取指定字段的值。 import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.data…...

编程日记 2025/8/17 19:04:31

OceanBase4.0社区版单机快速部署

以下内容结合OceanBase官方文档进行安装部署测试官方文档地址：https://www.oceanbase.com/docs/common-oceanbase-database-cn-1000000002012693 一.部署方式 OceanBase 企业版： • 使用 OCP 部署 OceanBase 集群 • 使用 OBD 部署 OceanBase 集群 •…...

编程日记 2025/8/17 21:32:37