HTML学习：图片格式——超链接
一、图片格式
1.jpg格式
概述:扩展名为.jpg 或.jpeg ，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。
主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景:对图片细节没有极高要求的场景，例如:网站的产品宣传图等。--该格式网页中很常见。
2.png格式
概述:扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如:公司logo图、重要配图等。
3.bmp格式
概述:扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景:对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用)
4.gif格式
概述:扩展名为.gif，仅支持256种颜色，色彩呈现不是很完整。
主要特点:支持的颜色较少、支持简单透明背景、支持动态图。
使用场景:网页中的动态图片。
5.webp 格式
概述:扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点:具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景:网页中的各种图片。
6.base64 格式
(1)本质:一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
(2)原理:把图片进行 base64 编码，形成一串文本。
(3)如何生成:靠一些工具或网站。
(4)如何使用:直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
(5)使用场景:一些较小的图片，或者需要和网页一起加载的图片。
二、超链接_跳转页面
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接_跳转页面</title>
</head>
<body>
<!-- 新页签--><a href="https://rank.kkj.cn/Computer77.shtml" target="_blank">快科技</a>
<!-- 当前页签--><a href="http://www.netbian.com/mei/" target="_self">去看美女</a>
<!-- 也可以写行内标签--><a href="./HTML排版标签.html">去排版标签</a></body>
</html>2.显示结果
三、超链接_跳转文件
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接_跳转文件</title>
</head>
<body>
<!-- 浏览器可以直接打开的文件--><a href="./documents/640.png">干啥？</a><a href="./documents/641.gif">写作业！</a><a href="./documents/heiheihei.mp4">生日快乐！</a><a href="./documents/comment.pdf">个人简历！</a>
<!-- 浏览器不可以直接打开的文件--><a href="./documents/cisptext.zip">啥东西？</a>
<!-- 浏览器可以打开，但要强制出发下载--><a href="./documents/heiheihei.mp4" download="好看">生日哈快乐！</a><a href="./4.HTML_超链接_跳转锚点.html#atm" >看其他页面中的奥特曼锚点</a></body>
</html>2.显示结果
四、超链接_跳转锚点
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接_跳转锚点</title>
</head>
<body><a href="#htl">看灰太狼</a><a href="#atm">看奥特曼</a><p>我是一只羊，一只肥美的羊</p><img src="./pictures/喜羊羊.jpg" alt="喜羊羊"><a name="htl"></a><p>我是一只狼，一只很邪恶的狼</p><img src="./pictures/灰太狼.jpg" alt="灰太狼"><p id="atm">我是一只奥特曼，一只很能打的奥特曼</p><img src="./pictures/奥特曼.jpg" alt="奥特曼"><p>我是一只羊，一只很丑的怪兽</p><img src="./pictures/大怪兽.jpg" alt="怪兽"><p>整体的介绍完毕了</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:alert(666);">点我弹窗</a></body>
</html>2.显示结果
相关文章：
HTML学习：图片格式——超链接
一、图片格式 1.jpg格式 概述:扩展名为.jpg 或.jpeg ，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。 主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。 使用场景:对图片细节没有极高要求的场景，例如:网站的产品…...
工业级5g路由器使用案例（5g智慧安防解决方案）
项目背景: 现代化智慧安防需要满足远程可视化监控、设备联网管理、数据加密传输等多重需求,对通信网络的带宽、时延、安全性等提出了很高要求。业内急需一款高可靠、高性能、易管理的通信网关设备,来确保安防系统的顺利运行。 安装部署: SR800-D路由器采用紧凑型全金属机箱…...
sentinel熔断降级
熔断降级 Slot 责任链上的最后一环：熔断降级 DegradeSlot,熔断降级作为保护系统的一种强大手段,可以根据慢调用、异常比例和异常数进行熔断,并自定义持续时间以实现系统保护 规则配置 规则类中属性解析 与控制面板对应 // 其中资源名称在 AbstractRule 里。 pu…...
Redis的安装和部署教程（Windows环境）
一、安装Redis服务 1、下载Redis压缩包 以下这个是我网盘里面的（这个是v8.0版本的，支持导入.rdb数据文件） 链接：百度网盘 请输入提取码 提取码：x0f1 --来自百度网盘超级会员V5的分享 2、解压到文件夹 将下载的压缩…...
MNN Session::resize 之流水线编码（五）
系列文章目录 MNN createFromBuffer（一） MNN createRuntime（二） MNN createSession 之 Schedule（三） MNN createSession 之创建流水线后端（四） MNN Session::resize 之流水线编码&am…...
2. IS-IS 基础实验
2.1 IS-IS 配置实验 2.1.1 实验介绍 2.1.1.1 学习目标 1. 实现 IS-IS 协议基本配置 2. 实现 IS-IS 协议 DIS 优先级修改 3. 实现 IS-IS 协议网络类型修改 4. 实现 IS-IS 协议外部路由引入 5. 实现 IS-IS 接口 cost 修改 6. 实现 IS-IS 路由渗透配置 2.1.1.2 实验组网介…...
Rust 并行库 crossbeam 的 Channel 示例
示例1 一个不完整的示例： let (tx, rx) channel::unbounded::<Task>(); let mut handlers vec![];for _ in 0..number {let rx rx.clone();let handle thread::spawn(move || {while let Some(task) rx.recv() {task.call_box();}});handlers.push(han…...
缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级的理解
一：缓存雪崩 我们可以简单的理解为：由于原有缓存失效，新缓存未到期间 (例如：我们设置缓存时采用了相同的过期时间，在同一时刻出现大面积的缓存过期)，所有原本应该访问缓存的请求都去查询数据库了ÿ…...
springcloud gateway
一、 predicate : 就是你定义一些规则，如果满足了这些规则，就去找到对应的路由。 对于strip 二、自定义过略器和全局过滤器 约定大于配置，后缀不变，只改前缀 sentinel持久化 三、sentinel quick-start | Sentinel 信号量虽然简…...
JAVA八股day1
遇到的问题 相比于包装类型（对象类型）， 基本数据类型占用的空间往往非常小为什么说是几乎所有对象实例都存在于堆中呢？静态变量和成员变量、成员变量和局部变量的区别为什么浮点数运算的时候会有精度丢失的风险？如何解…...
探索拓展坞的奥秘：提升电脑接口的无限可能
在数字化时代的浪潮中，电脑已成为我们日常生活和工作中不可或缺的一部分。然而，随着外接设备的日益增多，电脑接口的数量和类型往往无法满足我们的需求。这时，拓展坞便应运而生，以其强大的扩展能力和便捷的使用方式&…...
Linux中执行脚本报错（脚本乱码问题）
主要原因是在windows中编译文件格式导致 linux下解决： 方案一： Linux下打开shell文件，用vi/vim命令打开脚本文件，输入“:set fileformatunix”，回车，保存退出。 方案二： yum install -y dos2uni…...
el-table按钮获取当前行元素
el-table按钮获取当前行元素 vue2 <el-table-column label"操作" width"240px"><template slot-scope"scope"><el-button size"mini" click"toItem(scope.row)">用户详情</el-button><el-butto…...
MySQL数据导入的方式介绍
MySQL数据库中的数据导入是一个常见操作，它涉及将数据从外部源转移到MySQL数据库表中。在本教程中，我们将探讨几种常见的数据导入方式，包括它们的特点、使用场景以及简单的示例。 1. 命令行导入 使用MySQL命令行工具mysql是导入数据的…...
构建部署_Docker常用命令
构建部署_Docker常见命令 启动命令镜像命令容器命令 启动命令 启动docker：systemctl start docker 停止docker：systemctl stop docker 重启docker：systemctl restart docker 查看docker状态：systemctl status docker 开机启动&…...
Spring Boot Actuator介绍
大家在yaml中经常见到的这个配置 management: endpoints: web: exposure: #该配置线上需要去掉，会有未授权访问漏洞 include: "*" 他就是Actuator！ 一、什么是 Actuator Spring Boot Actuator 模块提供了生产级别…...
数据库中DQL、DML、DDL、DCL的概念与区别
目录 DQL (Data Query Language) DML (Data Manipulation Language) DDL (Data Definition Language) DCL (Data Control Language) 数据库语言可以根据其功能被分为几个不同的类别：DQL（数据查询语言）、DML（数据操纵语言&…...
MacOS---设置Java环境变量
介绍 在MacOS系统配置Java环境变量。 操作步骤 第一步：打开.bash_profile文件 vim ~/.bash_profile第二步：添加或修改配置 如果是第一次配置需要添加配置如果是已经配置过想更换其他版本需要修改配置 在文件末尾添加或修改下面的配置 export JAVA…...
使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质
使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质 当前的 Mac 机型无需介质即可安装 Windows，也就是说，您不需要用到外置驱动器。较早的 Mac 机型需要用到 USB 驱动器或光盘驱动器。使用 Boot Camp 助理可查明您需要用到什么。 Boot Camp 助…...
KY105 整除问题（用Java实现）
描述 给定n，a求最大的k，使n！可以被a^k整除但不能被a^(k1)整除。 输入描述： 两个整数n(2<n<1000)，a(2<a<1000) 输出描述： 一个整数. 示例1 输入： 6 10输出： 1代…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！
本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...