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

HTML学习：图片格式——超链接

news 2025/12/15 7:41:22

一、图片格式

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 &#xff0c;是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。 主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。 使用场景:对图片细节没有极高要求的场景&#xff0c;例如:网站的产品…...

编程日记 2024/3/19 18:45:09

工业级5g路由器使用案例（5g智慧安防解决方案）

​项目背景: 现代化智慧安防需要满足远程可视化监控、设备联网管理、数据加密传输等多重需求,对通信网络的带宽、时延、安全性等提出了很高要求。业内急需一款高可靠、高性能、易管理的通信网关设备,来确保安防系统的顺利运行。 安装部署: SR800-D路由器采用紧凑型全金属机箱…...

编程日记 2024/3/19 18:43:07

sentinel熔断降级

熔断降级 Slot 责任链上的最后一环&#xff1a;熔断降级 DegradeSlot,熔断降级作为保护系统的一种强大手段,可以根据慢调用、异常比例和异常数进行熔断,并自定义持续时间以实现系统保护 规则配置 规则类中属性解析 与控制面板对应 // 其中资源名称在 AbstractRule 里。 pu…...

编程日记 2024/3/19 18:42:06

Redis的安装和部署教程（Windows环境）

一、安装Redis服务 1、下载Redis压缩包 以下这个是我网盘里面的&#xff08;这个是v8.0版本的&#xff0c;支持导入.rdb数据文件&#xff09; 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;x0f1 --来自百度网盘超级会员V5的分享 2、解压到文件夹 将下载的压缩…...

编程日记 2024/3/19 18:35:00

MNN Session::resize 之流水线编码（五）

系列文章目录 MNN createFromBuffer&#xff08;一&#xff09; MNN createRuntime&#xff08;二&#xff09; MNN createSession 之 Schedule&#xff08;三&#xff09; MNN createSession 之创建流水线后端&#xff08;四&#xff09; MNN Session::resize 之流水线编码&am…...

编程日记 2024/3/19 18:33:57

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 实验组网介…...

编程日记 2024/3/19 18:25:47

Rust 并行库 crossbeam 的 Channel 示例

示例1 一个不完整的示例&#xff1a; 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…...

编程日记 2024/3/19 18:22:44

缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级的理解

一&#xff1a;缓存雪崩 我们可以简单的理解为&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间 (例如&#xff1a;我们设置缓存时采用了相同的过期时间&#xff0c;在同一时刻出现大面积的缓存过期)&#xff0c;所有原本应该访问缓存的请求都去查询数据库了&#xff…...

编程日记 2024/3/19 18:20:41

springcloud gateway

一、 predicate : 就是你定义一些规则&#xff0c;如果满足了这些规则&#xff0c;就去找到对应的路由。 对于strip 二、自定义过略器和全局过滤器 约定大于配置&#xff0c;后缀不变&#xff0c;只改前缀 sentinel持久化 三、sentinel quick-start | Sentinel 信号量虽然简…...

编程日记 2024/3/19 18:16:38

JAVA八股day1

遇到的问题 相比于包装类型&#xff08;对象类型&#xff09;&#xff0c; 基本数据类型占用的空间往往非常小为什么说是几乎所有对象实例都存在于堆中呢&#xff1f;静态变量和成员变量、成员变量和局部变量的区别为什么浮点数运算的时候会有精度丢失的风险&#xff1f;如何解…...

编程日记 2024/3/19 18:08:28

探索拓展坞的奥秘：提升电脑接口的无限可能

在数字化时代的浪潮中&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;随着外接设备的日益增多&#xff0c;电脑接口的数量和类型往往无法满足我们的需求。这时&#xff0c;拓展坞便应运而生&#xff0c;以其强大的扩展能力和便捷的使用方式&…...

编程日记 2024/3/19 18:07:27

Linux中执行脚本报错（脚本乱码问题）

主要原因是在windows中编译文件格式导致 linux下解决&#xff1a; 方案一&#xff1a; Linux下打开shell文件&#xff0c;用vi/vim命令打开脚本文件&#xff0c;输入“:set fileformatunix”&#xff0c;回车&#xff0c;保存退出。 方案二&#xff1a; yum install -y dos2uni…...

编程日记 2024/3/19 18:06:25

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…...

编程日记 2024/3/19 18:02:21

MySQL数据导入的方式介绍

MySQL数据库中的数据导入是一个常见操作&#xff0c;它涉及将数据从外部源转移到MySQL数据库表中。在本教程中&#xff0c;我们将探讨几种常见的数据导入方式&#xff0c;包括它们的特点、使用场景以及简单的示例。 1. 命令行导入 使用MySQL命令行工具mysql是导入数据的…...

编程日记 2024/3/19 18:00:19

构建部署_Docker常用命令

构建部署_Docker常见命令 启动命令镜像命令容器命令 启动命令 启动docker&#xff1a;systemctl start docker 停止docker&#xff1a;systemctl stop docker 重启docker&#xff1a;systemctl restart docker 查看docker状态&#xff1a;systemctl status docker 开机启动&…...

编程日记 2024/3/19 17:57:16

Spring Boot Actuator介绍

大家在yaml中经常见到的这个配置 management: endpoints: web: exposure: #该配置线上需要去掉&#xff0c;会有未授权访问漏洞 include: "*" 他就是Actuator&#xff01; 一、什么是 Actuator Spring Boot Actuator 模块提供了生产级别…...

编程日记 2024/3/19 17:56:15

数据库中DQL、DML、DDL、DCL的概念与区别

目录 DQL (Data Query Language) DML (Data Manipulation Language) DDL (Data Definition Language) DCL (Data Control Language) 数据库语言可以根据其功能被分为几个不同的类别&#xff1a;DQL&#xff08;数据查询语言&#xff09;、DML&#xff08;数据操纵语言&…...

编程日记 2024/3/19 17:54:11

MacOS---设置Java环境变量

介绍 在MacOS系统配置Java环境变量。 操作步骤 第一步&#xff1a;打开.bash_profile文件 vim ~/.bash_profile第二步&#xff1a;添加或修改配置 如果是第一次配置需要添加配置如果是已经配置过想更换其他版本需要修改配置 在文件末尾添加或修改下面的配置 export JAVA…...

编程日记 2024/3/19 17:52:09

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质 当前的 Mac 机型无需介质即可安装 Windows&#xff0c;也就是说&#xff0c;您不需要用到外置驱动器。较早的 Mac 机型需要用到 USB 驱动器或光盘驱动器。使用 Boot Camp 助理可查明您需要用到什么。 Boot Camp 助…...

编程日记 2024/3/19 17:51:08

KY105 整除问题（用Java实现）

描述 给定n&#xff0c;a求最大的k&#xff0c;使n&#xff01;可以被a^k整除但不能被a^(k1)整除。 输入描述&#xff1a; 两个整数n(2<n<1000)&#xff0c;a(2<a<1000) 输出描述&#xff1a; 一个整数. 示例1 输入&#xff1a; 6 10输出&#xff1a; 1代…...

编程日记 2024/3/19 17:49:06

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/12/14 19:01:10

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/1 9:48:47

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/12/14 21:17:07

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/12/9 4:34:34

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/3 20:41:57

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/12/5 15:19:05

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/12/7 16:18:19

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/12/14 13:25:37