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

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

news 2026/4/2 20:05:52

一、图片格式

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

3大核心功能突破JSON可视化难题：vue-json-pretty革新前端数据展示体验

3大核心功能突破JSON可视化难题&#xff1a;vue-json-pretty革新前端数据展示体验 【免费下载链接】vue-json-pretty A JSON tree view component that is easy to use and also supports data selection. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-json-pretty …...

编程新知 2026/4/2 19:37:40

从零构建：基于OpenCV与人体姿态分析的跌倒检测实战（附完整源码）

1. 为什么我们需要跌倒检测系统 想象一下家里的老人独自在客厅活动时突然摔倒的场景。这种意外在现实生活中并不罕见&#xff0c;尤其是对于行动不便的老年人群体。传统的解决方案往往依赖于佩戴式设备或紧急呼叫按钮&#xff0c;但这些方法要么需要用户主动操作&#xff0c;要…...

编程新知 2026/4/2 18:56:59

如何在5分钟内构建你的专业在线演示文稿：PPTist完全指南

如何在5分钟内构建你的专业在线演示文稿&#xff1a;PPTist完全指南 【免费下载链接】PPTist PowerPoint-ist&#xff08;/pauəpɔintist/&#xff09;, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing …...

编程新知 2026/4/2 18:24:29

Keil MDK-ARM工程改名后编译报错？可能是这3个隐藏配置没改对

Keil MDK-ARM工程改名后编译报错&#xff1f;可能是这3个隐藏配置没改对 当你按照标准流程修改Keil工程名后&#xff0c;发现编译依然报错&#xff0c;这往往意味着某些隐藏配置仍在引用旧工程名。作为嵌入式开发者&#xff0c;我们需要像侦探一样排查这些"数字指纹"…...

编程新知 2026/4/2 17:31:23

别再乱选格式了！LVGL图片转换工具（lv_img_conv）保姆级使用指南，从BMP到C数组一次搞定

LVGL图像转换实战指南&#xff1a;从格式选择到批量处理的完整解决方案 在嵌入式UI开发中&#xff0c;图像资源处理往往是第一个技术门槛。许多开发者在使用LVGL时&#xff0c;80%的初期问题都集中在图像转换环节——为什么转换后的图片显示异常&#xff1f;如何平衡内存占用和…...

编程新知 2026/4/2 16:58:46

有些路看起来很难走，其实是在带你慢慢变强

生活里&#xff0c;很多人都希望自己走的是一条轻松一点、顺利一点的路。最好努力了就能有结果&#xff0c;付出了就能被看见&#xff0c;遇到的问题也都能很快解决。可真正经历过一些事情后才会发现&#xff0c;人生并不会总按照理想的节奏前进。很多时候&#xff0c;那些让人…...

编程新知 2026/4/2 16:56:42

大模型开发避坑：彻底理清 Skill（技能）与 MCP（模型 上下文协议）的本质区别与协同

在目前的 AI 应用开发圈子里&#xff0c;各种新名词层出不穷&#xff1a;Skill&#xff08;技能&#xff09;、Plugin&#xff08;插件&#xff09;、Function Calling&#xff08;函数调用&#xff09;、Tool&#xff08;工具&#xff09;、MCP&#xff08;模型上下文协议&…...

编程新知 2026/4/2 16:34:15

自然语言理解在AI原生应用领域的关键作用

自然语言理解在AI原生应用领域的关键作用关键词&#xff1a;自然语言理解&#xff08;NLU&#xff09;、AI原生应用、大语言模型、多模态交互、意图识别、情感分析、智能交互摘要&#xff1a;本文将深入探讨自然语言理解&#xff08;NLU&#xff09;如何成为AI原生应用的“大脑…...

编程新知 2026/4/2 15:55:26

VCNL4020 proximity与环境光传感器集成设计指南

1. VCNL4020传感器技术解析&#xff1a;面向嵌入式系统的 proximity 与环境光一体化解决方案VCNL4020 是 Vishay 公司推出的高集成度光学传感芯片&#xff0c;专为资源受限的嵌入式系统设计。其核心价值在于将红外发射器&#xff08;IRED&#xff09;、接近检测光电二极管、环境…...

编程新知 2026/4/2 15:51:24

Halcon点云拼接实战：如何用特征模板搞定3D扫描缺失问题？

Halcon点云拼接实战&#xff1a;特征模板技术在工业3D扫描中的应用 在工业检测和逆向工程领域&#xff0c;3D扫描常常面临一个棘手问题——单次扫描无法完整捕获复杂物体的所有表面细节。想象一下&#xff0c;当您需要检测一个汽车发动机缸体的内部结构&#xff0c;或者重建一…...

编程新知 2026/4/2 14:26:00