前端——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文件。这样运行加载的时候就会扫描到这个文件，然后启动的时候就会显…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
鸿蒙（HarmonyOS5）实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架，实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
0609)
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix，按照"之"字形的方式打印这个矩阵，例如： 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为：1，…...