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

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

news 2025/7/9 5:23:04

一、图片格式

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

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/7/8 3:06:16

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/7/9 1:18:48

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/6/19 5:33:21

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/7/8 0:52:29

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/7/8 1:10:53

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/7/8 23:35:15

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/7/9 2:38:35

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/7/8 21:40:28

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/7/5 22:36:20

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/7/6 22:21:49