HTML如何使用图片链接

文章目录

  • 图片链接的使用
  • 常见图片类型
    • PNG
    • JPG
    • GIF
    • BMP

图片链接的使用

在 HTML 中,图像由 标签定义。
是空标签,意思是说,它只包含属性,并且没有闭合标签。
语法:

<img src=”图片路径" title=“鼠标悬浮在图片上显示的提示信息”
alt=“图片未加载成功时提示的信息”
width=“设置图片的宽”
height=“设置图片的高”>

alt 替换文本 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

普通图片代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../ch02/image/wallhaven-d6womg_1920x1080.png" alt="正在加载中" title="美女" width="528" height="395">
</body>
</html>

结果如下:
在这里插入图片描述
超链接图片代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_74095822?spm=1018.2226.3001.5343">
<img src="../ch02/image/wallhaven-d6womg_1920x1080.png" alt="正在加载中" title="美女" width="528" height="395">
</a>
</body>
</html>

运行如下:

点击前:
在这里插入图片描述
点击后:
在这里插入图片描述

超链接图片就是用 a 标签包裹图片标签,再放入我们的一个跳转链接即可。

常见图片类型

PNG

PNG是目前保证最不失真的格式,它汲取了GIF和JPG二者的优点,存贮形式丰富,兼有GIF和JPG的色彩模式;它的另一个特点能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息,因为PNG是采用无损压缩方式来减少文件的大小,这一点与牺牲图像品质以换取高压缩率的JPG有所不同;它的第三个特点是显示速度很快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像;第四,PNG同样支持透明图像的制作,透明图像在制作网页图像的时候很有用,我们可以把图象背景设为透明,用网页本身的颜色信息来代替设为透明的色彩,这样可让图像和网页背景很和谐地融合在一起。

PNG的缺点是不支持动画应用效果,如果在这方面能有所加强,简直就可以完全替代GIF和JPEG了

JPG

JPG 文件表示包含 有损压缩 算法,有效减小文件大小,同时保持令人满意的图像质量水平。 JPG 图像格式广泛用于各种图像,包括照片、图形和网络图像。 此外,JPG 几乎可以支持 16.7百万色,这使其成为捕捉和存储逼真、充满活力的图像的首选。

JPG 的主要特点:

压缩文件大小的有损压缩
JPG 最突出的优势之一依赖于特性——JPG 文件的大小比大多数图像文件小。 JPG 格式擅长使用有损压缩 最小化文件大小,这使其成为共享和存储大量照片同时占用更少存储空间的最佳选择。

与各种设备和软件的高兼容性
JPG 文件具有跨不同平台、操作系统和软件应用程序的广泛兼容性,这使人们能够 轻松打开或编辑 JPG 图像. 因此,它深受设计师、摄影师和网络影响者的喜爱。

支持数百万种颜色和摄影真实感
JPG 文件特别适合存储需要一丝不苟地关注细节和色彩准确性的照片和图像。 格式化成功 保留了复杂的细微差别,色调及 详情 照片,使它们看起来视觉冲击力和逼真度。

GIF

GIF(图形交换格式)最适合用于线条图(如最多含有256色)的剪贴画以及使用大块纯色的图片。该格式使用无损压缩来减少图片的大小,当用户要保存图片为.GIF时,可以自行决定是否保存透明区域或者转换为纯色。同时,通过多幅图片的转换,GIF格式还可以保存动画文件。但要注意的是,GIF最多只能支持256色

目前,网页上较普遍使用的图片格式为gif 和 jpg(jpeg)这两种图片压缩格式,因其在网上的装载速度很快,所有较新的图像软件都支持 GIF 、 JPG 格式,因此,要创建一张 GIF 或 JPG 图片,只需将图像软件中的图片保存为这两种格式即可。

BMP

BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Windows系统中广泛使用的图像文件格式。由于它可以不作任何变换地保存图像像素域的数据,因此成为我们取得RAW数据的重要来源。Windows的图形用户界面(graphical user interfaces)也在它的内建图像子系统GDI中对BMP格式提供了支持。

BMP文件的数据按照从文件头开始的先后顺序分为四个部分:

  • bmp文件头(bmp file header):提供文件的格式、大小等信息

  • 位图信息头(bitmap information):提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息

  • 调色板(color palette):可选,如使用索引来表示图像,调色板就是索引与其对应的颜色的映射表

  • 位图数据(bitmap data):就是图像数据啦

以上便是HTML图片的所有内容啦!

⭐最后⭐

总结不易,希望小宝们不要吝啬你们的👍哟(^U^)ノ~YO!!😀
如有问题,欢迎评论区批评指正😁

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/238362.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

甲醛处理企业网站效果如何

甲醛往往是新装房间主所担心的问题&#xff0c;而甲醛处理公司则可以处理甲醛问题&#xff0c;市场需求也比较高&#xff0c;虽然具备同城服务属性&#xff0c;但外地或连锁经营也非常适合&#xff0c;而品牌们也遇到一些痛点&#xff1a; 1、品牌宣传拓客难 甲醛处理公司也需…

AI数字人直播能力堪比真人涌入直播大军!

近几年&#xff0c;国内外电商直播产业飞速发展。相关报告显示&#xff0c;截至2022年12月&#xff0c;电商直播用户规模为5.15亿人次&#xff0c;占网民数量的48.2%&#xff0c;总结来说&#xff0c;近一半的网民都在各类直播间购买过商品。 但是随着直播行业不断发展&#xf…

14-Kafka-Day02

第 4 章 Kafka Broker 4.1 Kafka Broker 工作流程 4.1.1 Zookeeper 存储的 Kafka 信息 &#xff08;1&#xff09;启动 Zookeeper 客户端。 bin/zkCli.sh 因为你在配置kafka的时候指定了它的名字。 &#xff08;2&#xff09;通过 ls 命令可以查看 kafka 相关信息。 [zk: …

【算法】算法题-20231211

这里写目录标题 一、387. 字符串中的第一个唯一字符二、1189. “气球” 的最大数量三、1221. 分割平衡字符串 一、387. 字符串中的第一个唯一字符 简单 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回…

C++ Qt开发:LineEdit单行输入组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍LineEdit单行输入框组件的常用方法及灵活运用…

加减乘除简单吗?不,一点都不,利用位运算实现加减乘除(代码中不含+ - * /)

文章目录 &#x1f680;前言&#x1f680;异或运算以及与运算&#x1f680;加法的实现&#x1f680;减法的实现&#x1f680;乘法的实现&#x1f680;除法的实现 &#x1f680;前言 这也是阿辉开的新专栏&#xff0c;知识将会很零散不成体系&#xff0c;不过绝对干货满满&…

算法通关村——滑动窗口高频问题

滑动窗口之最长子串 无重复字符的最长子串 LeetCode3. 给定一个字符串s&#xff0c;请你找出其中不含有重复字符的最长子串的长度。 示例&#xff1a; 输入&#xff1a;s “abcabcbb” 输出&#xff1a;3 解释&#xff1a;因为无重复字符的最长子串是"abc"&#…

Socket介绍及使用Java实现socket通信前后端示例代码

本文介绍一下再Java中Socket的实现。 目录 一、需要掌握 二、程序源码 三、运行演示 一、介绍 Java Socket实现实时接收TCP消息需要客户端和服务端两个部分。 二、JavaSocket源码示例 客户端后台部分代码 public class Client {public static void main(String[] args)…

【亚马逊云科技】使用Vscode - Q完成GUI界面粉笔脚本开发

前言 亚马逊云科技-Q&#xff0c;可以快速获得紧迫问题的相关答案&#xff0c;解决问题&#xff0c;生成内容。当与Q 聊天时&#xff0c;它会提供即时的相关信息和建议&#xff0c;以帮助简化任务、加快决策速度&#xff0c;并帮助激发工作中的创造力和创新。本次我们通过完整…

初始集合框架+时间和空间复杂度(数据结构)

【本节目标】 1. 什么是集合框架 2. 集合框架的重要性 3. 背后所涉及的数据结构 【本节目标】 1. 算法效率 2. 时间复杂度 3. 空间复杂度 1. 什么是集合框架 Java 集合框架 Java Collection Framework &#xff0c;又被称为容器 container &#xff0c;是定义在 java.util 包…

京东数据分析(京东大数据运营):10月取暖器行业迎来消费热潮,销额环比增长约570%!

随着气温降低&#xff0c;御寒用品开始热销。 气温的下降对取暖器的销售有明显的拉动效果&#xff0c;环比来看&#xff0c;10月份取暖器的销量销额均呈现三位数增长。鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台取暖器的销量将近28万&#xff0c;环比增长572%&am…

Nacos配置管理-配置热更新

目录 一、Nacos配置管理回顾 1.1 统一配置管理 1.1.1 在nacos中添加配置文件 1.1.2 在弹出的表单中&#xff0c;填写配置信息 1.1.3 从微服务拉取配置 1.1.4 在项目中新增一个配置文件bootstrap.yaml&#xff0c;内容如下&#xff1a; 1.1.5 读取nacos配置 1.1.6 效果 二…

【算法题】数字字符串组合倒序 (js)

解法&#xff1a; const str "I am an 20-years out--standing * -stu- dent";function solution(str) {const arr str.split(" ");const newArr arr.map((str) > {if (/[a-zA-Z0-9-]/.test(str)) {if (/-{2}/g.test(str)) {return str.replace(/-…

vue安装与配置

node node.js的下载&#xff1a;https://nodejs.org/dist 在项目中可能会有版本冲突&#xff0c;这里可以选择自己想要的版本下载&#xff0c;而且一台电脑可以同时安装多个版本的node。当你需要切换版本时直接去更改环境变量即可。下面我安装选择的是压缩包&#xff0c;压缩包…

SDXL使用animateDiff和hotshot-xl进行文生视频

截至2023.12.8号&#xff0c;目前市面上有两款适用于SDXL的文生视频开源工具&#xff0c;分别是AnimateDiff和hotshot-xl。 一、工具下载链接 &#xff08;1&#xff09;AnimateDiff的webui版本的git链接&#xff1a; GitHub - continue-revolution/sd-webui-animatediff: A…

vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能

实现效果&#xff1a; 功能实现&#xff1a; 要实现图片的拖拽功能首先需要安装vuedraggable库 npm install vuedraggable --save在组件中引入并注册 vuedraggable <script>import draggable from "vuedraggable";export default {// 注册组件components: {…

【神行百里】pandas查询加速之行索引篇

最近进行大数据处理的时候&#xff0c;发现我以前常用的pandas查询方法太慢了&#xff0c;太慢了&#xff0c;真是太慢了&#xff0c;查阅资料&#xff0c;遂发现了一种新的加速方法&#xff0c;能助力我飞上天&#xff0c;和太阳肩并肩&#xff0c;所以记录下来。 1. 场景说明…

ThingWorx/Vuforia—工业物联网和AR平台

产品概述 ThingWorx是美国PTC公司旗下的一款物联网和AR平台&#xff0c;它提供了适用于IoT的开发工具和能力&#xff0c;使开发者可以为工业物联网快速构建和部署变革性的智能互联解决方案&#xff0c;使创新者能够快速为当今的智能互联世界提供优异的应用程序、解决方案和用户…

mmyolo的bbox_loss和检测bbox都是空

最近用mmyolo训练自己的数据集的时候发现训练的时候loss_bbox0&#xff0c;测试和eval的时候结果也全是空的&#xff0c;排除了数据集读取的问题&#xff0c;最后发现是config中自定义了自己的类别但是没有传给dataset。。。 简而言之&#xff0c;在自定义了数据集里的metainf…

常见表单元素的使用

目录 **表单是什么**一, from&#x1f367; Action 属性&#x1f367; Method 属性 二,input&#x1f367; 常见的type属性&#x1f367;text属性 三,select,option下拉框&#x1f367;selected属性 四,textarea五, button 表单是什么 HTML 表单用于收集用户的输入信息。 表示文…