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

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

news 2026/2/7 20:08:01

一、图片格式

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/6 3:08:59

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

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

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

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

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/6 10:35:18

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26