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

前端——7.图像标签和路径

news 2026/5/13 21:41:58

这篇文章，我们来讲解一下图像标签

目录

1.图像标签

1.1介绍

1.2实际展示

1.3图像标签的属性

1.3.1 alt属性

1.3.2 title属性

1.3.3 width / height 属性

1.3.4 border属性

1.4注意事项

2.文件夹

2.1目录文件夹和根目录

2.2 VSCode打开目录文件夹

3.路径

3.1相对路径

3.2绝对路径

4.小结

1.图像标签

下面，让我们来看一下如何在网页中插入图片

1.1介绍

在HTML标签中，<img>标签用于定义HTML页面中的图像。<img>标签是一个单标签

代码格式：

<img src="图像的URL" />

注意：单词 img 是 image 的缩写，意为图像

其中，src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性

（其实这一点可以和java中的类进行对比理解，java中的类也有属性，<img>标签也有属性，且属性是必须的，不可或缺）

1.2实际展示

下面就用代码来实际展示一下，如何在HTML页面中插入图片

第一步：将图片和你的HTML文件放在同一个文件夹下，这样就可以把图片插入到网页当中了，如下图所示：

 第二步：书写代码，运行演示：

第三步：加点文字，再次演示：

 第四步：加点其他标签，调整下格式，再次运行：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><h3>世间万物，皆系于一箭之上！<br /></h3><img src="hb.jpg" /></div>
</body>
</html>

1.3图像标签的属性

下面，我们来讲一下图像标签的属性：

属性属性值说明
src图片路径必须属性
alt文本替换文本，图像不能显示的文字
title文本提示文本，鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

下面，我们一一来讲解这些属性的使用 

1.3.1 alt属性

alt属性：替换文本。

作用：当我们的图片不能正常显示的时候，就用alt里面的文字来替换显示

实例：

1.3.2 title属性

title属性：提示文本

作用：当鼠标放在上面显示的信息

实例：

1.3.3 width / height 属性

width / height 属性：设置图片的宽和高的

实例：

说实话，在不知道图片的大小比例和具体高和宽的情况下，随便修改这两个属性会让图片变形，就好很丑，那有没有解决方法呢？

答：有。 HTML有这样一个功能，你只用修改一个属性，另一个属性就好等比例的缩放，这样图片就不会变形。

看下面的实例：

1.3.4 border属性

border属性：设置图像的边框的

实例：

注意：这个标签在HTML中是可以用的，但是不推荐，因为修改边框是CSS的事，后面会写CSS的

1.4注意事项

下面讲一下使用图像标签的注意事项：

  1. 图像标签可以拥有多个属性，必须写在标签名的后面
  2. 属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
  3. 属性采取键值对的格式，即 key="value" 的格式，属性=“属性值”

2.文件夹

下面我们来讲一下文件夹

2.1目录文件夹和根目录

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此，我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片等

根目录：打开目录文件夹的第一层就是根目录

这个比较难理解，下面用具体的实例来说明：

 如上图所示，我的桌面上有关“项目”的文件夹，里面有三个不同时期的项目文件夹，那么这个项目文件夹就不能称为目录文件夹。

 

 此时，我打开“22寒假项目”这个文件夹，里面有个“ProcessOn项目”文件夹，我再打开这个文件夹，里面可以看到“src”和“pom.xml”两个文件。

此时，我们可以把“ProcessOn项目”这个文件夹称为目录文件夹，因为我一打开它，它里面就有直接的代码文件，而我们打开目录文件夹的第一层，我们将其称为根目录

注意：根目录和目录文件夹是相对应的，不是死的，这个要具体情况具体分析。

2.2 VSCode打开目录文件夹

这个是与实操有关的，下面用图片进行演示

3.路径

页面中的图片会非常非常多，通常我们会创建一个文件夹来存放这些图像（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置了。

路径可以分为：相对路径和绝对路径

3.1相对路径

相对路径：以引用文件所在位置为参考，而建立出的目录路径

这里简单来说，就是图片相对HTML页面的位置。

相对路径还分以下几种情况：

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级 如<img src="hb.jpg" />
下一级路径/图像文件位于HTML文件下一级 如<img src="images/hb.jpg" />
上一级路径../图像文件位于HTML文件上一级 如<img src="../hb.jpg" />

这样说还是不太清楚，下面用实例来具体的讲一下

 

这里多提一下，如果图片在HTML文件的上一级，我们使用 ../ 的意思是翻回到上一级目录，然后再寻找目录。

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

3.2绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如："D:\IDEA2021\IntelliJ IDEA 2021.1.3\bin\idea.exe"或完整的网络地址"http://www.itcast.cn/images/logo.gif"。

下面来具体的演示一下：

获取网络图片地址的方法：右击图片，选择“复制图像链接”

如果用这种方法获取图片的话，如果网络上图片的地址换了，你也就显示不了了。

这种方法就是放图片在你计算机上存的绝对路径。缺点就是别人无法访问。

4.小结

这篇文章主要就是讲了图像标签和图像标签延伸出的一些内容。都是重点，都要学会。

相关文章：

前端——7.图像标签和路径

这篇文章&#xff0c;我们来讲解一下图像标签 目录 1.图像标签 1.1介绍 1.2实际展示 1.3图像标签的属性 1.3.1 alt属性 1.3.2 title属性 1.3.3 width / height 属性 1.3.4 border属性 1.4注意事项 2.文件夹 2.1目录文件夹和根目录 2.2 VSCode打开目录文件夹 3.路…...

编程日记 2023/3/11 14:48:57

java -- stream流

写在前面: stream流一直在使用&#xff0c;但是感觉还不够精通&#xff0c;现在深入研究一下。 stream这个章节中&#xff0c;会用到 函数式接口–lambda表达式–方法引用的相关知识 介绍 是jdk8引进的新特性。 stream流是类似一条流水线一样的操作&#xff0c;每次对数据进…...

编程日记 2023/3/11 14:47:54

【Spring6】| Bean的四种获取方式（实例化）

目录 一&#xff1a;Bean的实例化方式 1. 通过构造方法实例化 2. 通过简单工厂模式实例化 3. 通过factory-bean实例化 4. 通过FactoryBean接口实例化 5. BeanFactory和FactoryBean的区别&#xff08;面试题&#xff09; 6. 使用FactoryBean注入自定义Date 一&#xff1a…...

编程日记 2023/3/11 14:46:52

01: 新手学SpringCloud前需知道的5点

目录 第一点&#xff1a; 什么是微服务架构 第二点&#xff1a;为什么需要学习Spring Cloud 第三点&#xff1a; Spring Cloud 是什么 第四点&#xff1a; SpringCloud的优缺点 1、SpringCloud优点 2、SpringCloud缺点 第五点&#xff1a; SpringCloud由什么组成 1&…...

编程日记 2023/3/11 14:45:49

ubuntu apt安装arm交叉编译工具

查找查找编译目标为32位的gcc-arm交叉编译器命令apt-cache search arm|awk index($1,"arm")!0 {print}|grep gcc-arm\|g-arm #或者 apt-cache search arm|awk index($1,"arm")!0 {print}|grep -E gcc-arm|g\\-arm输出如下g-arm-linux-gnueabihf - GNU C co…...

编程日记 2023/3/11 14:44:42

阿里云一面经历

文章目录 ES 查询方式都有哪些？1 基于词项的查询term & terms 查询Fuzzy QueryWildcard Query2 基于全文的查询Match QueryQuery String QueryMatch Phrase Query3 复合查询Bool QueryElasticsearch 删除原理ES 大文章怎么存arthas 常用命令arthas 排查问题过程arthas 工作…...

编程日记 2023/3/11 14:43:41

Java Stream中 用List集合统计 求和 最大值 最小值 平均值

对集合数据的统计&#xff0c;是开发中常用的功能&#xff0c;掌握好Java Stream提供的方法&#xff0c;避免自己写代码统计&#xff0c;可以提高工作效率。 先造点数据&#xff1a; pigs.add(new Pig(1, "猪爸爸", 31, "M", false)); pigs.add(new Pig(…...

编程日记 2023/3/11 14:42:39

【Linux】多线程---线程控制

进程在前面已经讲过了&#xff0c;所以这次我们来讨论一下多线程。前言&#xff1a;线程的背景进程是Linux中资源及事物管理的基本单位&#xff0c;是系统进行资源分配和调度的一个独立单位。但是实现进程间通信需要借助操作系统中专门的通信机制&#xff0c;但是只这些机制将占…...

编程日记 2023/3/11 14:41:36

秒杀高并发解决方案

秒杀高并发解决方案 1.秒杀/高并发方案-介绍 秒杀/高并发 其实主要解决两个问题&#xff0c;一个是并发读&#xff0c;一个是并发写并发读的核心优化理念是尽量减少用户到 DB 来"读"数据&#xff0c;或者让他们读更少的数据, 并 发写的处理原则也一样针对秒杀系统需…...

编程日记 2023/3/11 14:40:31

【每日一题】蓝桥杯加练 | Day07

文章目录一、三角回文数1、问题描述2、解题思路3、AC代码一、三角回文数 原题链接&#xff1a;三角回文数 1、问题描述 对于正整数 n, 如果存在正整数 k 使得n123⋯k k(k1)2\frac{k(k1)}{2}2k(k1)​ , 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066123⋯363 。 如果一…...

编程日记 2023/3/11 14:39:29

条件语句（分支语句）——“Python”

各位CSDN的uu们你们好呀&#xff0c;最近总是感觉特别特别忙&#xff0c;但是却又不知道到底干了些什么&#xff0c;好像啥也没有做&#xff0c;还忙得莫名其妙&#xff0c;言归正传&#xff0c;今天&#xff0c;小雅兰的内容还是Python呀&#xff0c;介绍一些顺序结构的知识点…...

编程日记 2023/3/11 14:38:28

论文投稿指南——中文核心期刊推荐（国家财政）

【前言】 &#x1f680; 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊 &#x1f384; 在期刊论文的分布中&#xff0c;存在一种普遍现象&#xff1a;即对于某一特定的学科或专业来说&#xff0c;少数期刊所含…...

编程日记 2023/3/11 14:37:27

面向数据安全共享的联邦学习研究综述

开放隐私计算 摘　要&#xff1a;跨部门、跨地域、跨系统间的数据共享是充分发挥分布式数据价值的有效途径&#xff0c;但是现阶段日益严峻的数据安全威胁和严格的法律法规对数据共享造成了诸多挑战。联邦学习可以联合多个用户在不传输本地数据的情况下协同训练机器学习模型&am…...

编程日记 2023/3/11 14:36:22

Redis经典五种数据类型底层实现原理解析

目录总纲redis的k,v键值对新的三大类型五种经典数据类型redisObject结构图示结构讲解数据类型与数据结构关系图示string数据类型三大编码格式SDS详解代码结构为什么要重新设计源码解析三大编码格式hash数据类型ziplist和hashtable编码格式ziplist详解结构剖析ziplist的优势(为什…...

编程日记 2023/3/11 14:35:18

Jackson 返回前端的 Response结果字段大小问题

目录 1、问题产生的背景 2、出现的现象 3、解决方案 4、成果展现 5、总结 6、参考文章 1、问题产生的背景 因为本人最近工作相关的对接外部项目&#xff0c;在我们国内有很多程序员都是使用汉语拼音或者部分字母加上英文复合体定义返回实体VO&#xff0c;这样为了能够符合…...

编程日记 2023/3/11 14:34:15

每天五分钟机器学习：你理解贝叶斯公式吗？

本文重点 贝叶斯算法是机器学习算法中非常经典的算法，也是非常古老的一个算法，但是它至今仍然发挥着重大的作用，本节课程及其以后的专栏将会对贝叶斯算法来做一个简单的介绍。 贝叶斯公式 贝叶斯公式是由联合概率推导而来 其中p(Y|X)称为后验概率，P(Y)称为先验概率…...

编程日记 2023/3/11 14:33:09

C++的入门

C的关键字 C总计63个关键字&#xff0c;C语言32个关键字 命名空间 我们C的就是建立在C语言之上&#xff0c;但是是高于C语言的&#xff0c;将C语言的不足都弥补上了&#xff0c;而命名空间就是为了弥补C语言的不足。 看一下这个例子。在C语言中会报错 #include<stdio.h>…...

编程日记 2023/3/11 14:32:05

数据的存储

类型的意义&#xff1a;使用这个类型开辟内存空间的大小&#xff08;大小决定了使用范围&#xff09;如何看待内存空间视角类型的基本归类整型家族浮点数家族构造类型指针类型空类型整型存储解构:整型在计算机中占用四个字节&#xff0c;整型分为无符号整型和有符号整型在计算机…...

编程日记 2023/3/11 14:31:00

Linux查看UTC时间

先了解一下几个时间概念。 GMT时间&#xff1a;Greenwich Mean Time&#xff0c;格林尼治平时&#xff0c;又称格林尼治平均时间或格林尼治标准时间。是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间。 GMT时间存在较大误差&#xff0c;因此不再被作为标准时间使用。现在…...

编程日记 2023/3/11 14:29:58

SpringBoot修改启动图标（详细步骤）

目录 一、介绍 二、操作步骤 三、介绍Java学习&#xff08;题外话&#xff09; 四、关于基础知识 一、介绍 修改图标就是在资源加载目录&#xff08;resources&#xff09;下放一个banner.txt文件。这样运行加载的时候就会扫描到这个文件&#xff0c;然后启动的时候就会显…...

编程日记 2023/3/11 14:28:55

工业物联网实战启示：从14万亿预测看价值闭环与组织变革

1. 从一份价值14万亿美元的预测报告中&#xff0c;我们能学到什么&#xff1f;最近在整理一些行业旧闻时&#xff0c;翻到了2015年EE Times上的一篇老文章&#xff0c;讲的是埃森哲&#xff08;Accenture&#xff09;对工业物联网&#xff08;Industrial IoT, IIoT&#xff09;…...

编程新知 2026/5/13 20:53:45

天线设计基础：核心指标与工程实践解析

1. 天线设计基础与核心指标解析天线作为无线通信系统的"门户"&#xff0c;其性能优劣直接决定了整个系统的通信质量。在开始具体设计前&#xff0c;我们需要明确几个核心性能指标及其相互关系。1.1 增益与通信距离的定量关系天线增益本质上描述的是电磁能量在特定方向…...

编程新知 2026/5/13 20:47:41

iPaaS平台排名：五大主流产品的市场表现与核心能力

在数字化转型加速推进的当下&#xff0c;iPaaS&#xff08;集成平台即服务&#xff09;已成为企业构建敏捷IT架构、打通数据孤岛的关键基础设施。市场上涌现出多款各具特色的集成平台&#xff0c;它们在产品定位、技术架构与行业深耕上形成了差异化优势。本文基于公开资料&…...

编程新知 2026/5/13 19:57:04

NotebookLM实战指南（NLP任务辅助黄金公式首次公开）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM实战指南&#xff08;NLP任务辅助黄金公式首次公开&#xff09; NotebookLM 是 Google 推出的基于可信来源驱动的 AI 助手&#xff0c;专为研究者与工程师设计&#xff0c;其核心能力在于“…...

编程新知 2026/5/13 19:37:40

OpenClawWatch：本地优先的AI智能体监控工具，实现成本、安全与行为全链路追踪

1. 项目概述&#xff1a;为什么我们需要一个“本地优先”的AI智能体监控工具&#xff1f;如果你正在开发或运行能够自主执行任务的AI智能体&#xff0c;比如自动处理邮件、调用API、操作文件&#xff0c;甚至进行线上交易&#xff0c;那么你肯定经历过这样的焦虑时刻&#xff1…...

编程新知 2026/5/13 18:52:21

AI全领域热点速递（2026年5月11日）

&#x1f48c; 关心家人&#xff0c;从每日报平安开始。万年历提醒微信小程序&#xff0c;您值得体验。&#x1f4f0; 每日整理AI领域核心动态&#xff0c;精选有价值资讯&#xff0c;精简可读&#xff0c;适合收藏备查。&#x1f916; AI全领域热点速递&#xff08;2026年5月1…...

编程新知 2026/5/13 18:35:59

HoRain云--Lua协程

&#x1f3ac; HoRain云小助手&#xff1a;个人主页 &#x1f525; 个人专栏: 《Linux 系列教程》《c语言教程》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站&#xff0c;性价比超高&#xff0c;大内存超划算&#xff01;…...

编程新知 2026/5/13 16:07:41

【零基础部署】Ubuntu 安装 Docker 保姆级教程

Docker 是当今最流行的容器化平台之一&#xff0c;它能让你把应用及其依赖打包到一个轻量级的容器中运行。无论你是想搭建开发环境、部署服务&#xff0c;还是学习云原生技术&#xff0c;Docker 都是必备技能。本文将手把手带你从零开始&#xff0c;在 Ubuntu 系统上完成 Docke…...

编程新知 2026/5/13 15:48:17

硬件感知虚拟原型技术：软硬件协同设计的关键

1. 硬件感知虚拟原型技术概述在当今电子系统设计中&#xff0c;软件所占比重持续攀升。从通信设备到汽车电子&#xff0c;再到消费类产品&#xff0c;嵌入式软件已成为实现产品差异化的核心要素。这种转变源于软件实现的显著优势&#xff1a;低成本的设计变更、现场更新能力、快…...

编程新知 2026/5/13 13:09:20

别急着扔！XBOX ONE X黑屏自救指南：30元芯片+手机维修店搞定HDMI故障

XBOX ONE X黑屏故障低成本修复全攻略&#xff1a;30元芯片手机维修店实战方案 当你的XBOX ONE X突然黑屏无信号时&#xff0c;先别急着宣告它"死亡"或花大价钱送修。这种常见故障往往只是HDMI芯片&#xff08;TDP158 G4&#xff09;损坏&#xff0c;而解决方案可能比…...

编程新知 2026/5/13 12:25:05