前端——7.图像标签和路径
这篇文章，我们来讲解一下图像标签
目录
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注意事项
下面讲一下使用图像标签的注意事项：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即 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.图像标签和路径
这篇文章，我们来讲解一下图像标签 目录 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.路…...
java -- stream流
写在前面: stream流一直在使用，但是感觉还不够精通，现在深入研究一下。 stream这个章节中，会用到 函数式接口–lambda表达式–方法引用的相关知识 介绍 是jdk8引进的新特性。 stream流是类似一条流水线一样的操作，每次对数据进…...
【Spring6】| Bean的四种获取方式（实例化）
目录 一：Bean的实例化方式 1. 通过构造方法实例化 2. 通过简单工厂模式实例化 3. 通过factory-bean实例化 4. 通过FactoryBean接口实例化 5. BeanFactory和FactoryBean的区别（面试题） 6. 使用FactoryBean注入自定义Date 一：…...
01: 新手学SpringCloud前需知道的5点
目录 第一点： 什么是微服务架构 第二点：为什么需要学习Spring Cloud 第三点： Spring Cloud 是什么 第四点： SpringCloud的优缺点 1、SpringCloud优点 2、SpringCloud缺点 第五点： SpringCloud由什么组成 1&…...
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…...
阿里云一面经历
文章目录 ES 查询方式都有哪些？1 基于词项的查询term & terms 查询Fuzzy QueryWildcard Query2 基于全文的查询Match QueryQuery String QueryMatch Phrase Query3 复合查询Bool QueryElasticsearch 删除原理ES 大文章怎么存arthas 常用命令arthas 排查问题过程arthas 工作…...
Java Stream中 用List集合统计 求和 最大值 最小值 平均值
对集合数据的统计，是开发中常用的功能，掌握好Java Stream提供的方法，避免自己写代码统计，可以提高工作效率。 先造点数据： pigs.add(new Pig(1, "猪爸爸", 31, "M", false)); pigs.add(new Pig(…...
【Linux】多线程---线程控制
进程在前面已经讲过了，所以这次我们来讨论一下多线程。前言：线程的背景进程是Linux中资源及事物管理的基本单位，是系统进行资源分配和调度的一个独立单位。但是实现进程间通信需要借助操作系统中专门的通信机制，但是只这些机制将占…...
秒杀高并发解决方案
秒杀高并发解决方案 1.秒杀/高并发方案-介绍 秒杀/高并发 其实主要解决两个问题，一个是并发读，一个是并发写并发读的核心优化理念是尽量减少用户到 DB 来"读"数据，或者让他们读更少的数据, 并 发写的处理原则也一样针对秒杀系统需…...
【每日一题】蓝桥杯加练 | Day07
文章目录一、三角回文数1、问题描述2、解题思路3、AC代码一、三角回文数 原题链接：三角回文数 1、问题描述 对于正整数 n, 如果存在正整数 k 使得n123⋯k k(k1)2\frac{k(k1)}{2}2k(k1) , 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066123⋯363 。 如果一…...
条件语句（分支语句）——“Python”
各位CSDN的uu们你们好呀，最近总是感觉特别特别忙，但是却又不知道到底干了些什么，好像啥也没有做，还忙得莫名其妙，言归正传，今天，小雅兰的内容还是Python呀，介绍一些顺序结构的知识点…...
论文投稿指南——中文核心期刊推荐（国家财政）
【前言】 🚀 想发论文怎么办？手把手教你论文如何投稿！那么，首先要搞懂投稿目标——论文期刊 🎄 在期刊论文的分布中，存在一种普遍现象：即对于某一特定的学科或专业来说，少数期刊所含…...
面向数据安全共享的联邦学习研究综述
开放隐私计算 摘 要：跨部门、跨地域、跨系统间的数据共享是充分发挥分布式数据价值的有效途径，但是现阶段日益严峻的数据安全威胁和严格的法律法规对数据共享造成了诸多挑战。联邦学习可以联合多个用户在不传输本地数据的情况下协同训练机器学习模型&am…...
Redis经典五种数据类型底层实现原理解析
目录总纲redis的k,v键值对新的三大类型五种经典数据类型redisObject结构图示结构讲解数据类型与数据结构关系图示string数据类型三大编码格式SDS详解代码结构为什么要重新设计源码解析三大编码格式hash数据类型ziplist和hashtable编码格式ziplist详解结构剖析ziplist的优势(为什…...
Jackson 返回前端的 Response结果字段大小问题
目录 1、问题产生的背景 2、出现的现象 3、解决方案 4、成果展现 5、总结 6、参考文章 1、问题产生的背景 因为本人最近工作相关的对接外部项目，在我们国内有很多程序员都是使用汉语拼音或者部分字母加上英文复合体定义返回实体VO，这样为了能够符合…...
每天五分钟机器学习：你理解贝叶斯公式吗？
本文重点 贝叶斯算法是机器学习算法中非常经典的算法，也是非常古老的一个算法，但是它至今仍然发挥着重大的作用，本节课程及其以后的专栏将会对贝叶斯算法来做一个简单的介绍。 贝叶斯公式 贝叶斯公式是由联合概率推导而来 其中p(Y|X)称为后验概率，P(Y)称为先验概率…...
C++的入门
C的关键字 C总计63个关键字，C语言32个关键字 命名空间 我们C的就是建立在C语言之上，但是是高于C语言的，将C语言的不足都弥补上了，而命名空间就是为了弥补C语言的不足。 看一下这个例子。在C语言中会报错 #include<stdio.h>…...
数据的存储
类型的意义：使用这个类型开辟内存空间的大小（大小决定了使用范围）如何看待内存空间视角类型的基本归类整型家族浮点数家族构造类型指针类型空类型整型存储解构:整型在计算机中占用四个字节，整型分为无符号整型和有符号整型在计算机…...
Linux查看UTC时间
先了解一下几个时间概念。 GMT时间：Greenwich Mean Time，格林尼治平时，又称格林尼治平均时间或格林尼治标准时间。是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间。 GMT时间存在较大误差，因此不再被作为标准时间使用。现在…...
SpringBoot修改启动图标（详细步骤）
目录 一、介绍 二、操作步骤 三、介绍Java学习（题外话） 四、关于基础知识 一、介绍 修改图标就是在资源加载目录（resources）下放一个banner.txt文件。这样运行加载的时候就会扫描到这个文件，然后启动的时候就会显…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统
Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...
【阅读笔记】MemOS: 大语言模型内存增强生成操作系统
核心速览 研究背景 研究问题：这篇文章要解决的问题是当前大型语言模型（LLMs）在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色，但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成（RA…...