HTML 图片标签

图片标签:

图片标签 用于向当前页面中引入一个外部图片
使用 标签来引入外部图片,img标签是一个自结束标签
img 属于替换元素(基于行内元素和块元素之间)行内块元素inline-block 图片标签。

属性:

【src】:属性指定的是外部图片的路径(路径规则和超链接是一样的)
【alt】: 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载出来的时候显示在页面上。搜索引擎会根据alt中的内容来识别图片(搜索松鼠会出现松鼠)
【width】:图片的宽度
【height】:图片的高度

如果宽度和高度只改变一个,图片会等比例缩小或是放大

建议:在PC端不建议修改图片的大小,大图缩小浪费内存,小图放大图片失真,最好是切图。但是在移动端,经常需要对图片进行缩放(大图缩小)

图片引入:

可以用相对路径引入一个外部图片

<img v-if="list.url" :src="'/api/'+list.url" alt="卡布" class="partners-img">

也可以使用绝对路径引入外部图片

<img src='//res.orayimg.com/sunlogin/1.0/img/48a740f.jpg'>

图片的格式:

jpeg(jpg):
支持颜色比较丰富,不支持透明效果,不支持动画
一般用来显示照片

gif:
支持的颜色比较少,支持简单透明,支持动画
颜色单一图片,动图

png:
支持颜色丰富,支持透明复杂,不支持动画
颜色丰富,复杂透明图片(专为网页而生)

webp:
这种图片格式是谷歌新推出的专门用来表示网页中的图片的一种格式
它具备其他图片格式的所有优点,而且图片还特别的小,显示效果好,透明度也好,还支持动图
缺点:兼容性不好,尤其是在IE浏览器中

选用规则: 效果一样用文件小的,效果不一样用效果好的

Base64:

base64编码,还可以将图片使用base64进行编码,将图片转换为字符,通过字符的形式来引入图片
一般都是一些需要和网页一起加载的图片才会使用base64

转载自:https://www.cnblogs.com/nyw1983/p/12404572.html

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

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

相关文章

vector的oj题

1.只出现1次的数字 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 方法&#xff1a;…

【Stable Diffusion】三句话,让Ai帮你画18万张图

本文介绍Stable Diffusion的快速上手&#xff0c;本地部署&#xff0c;以及更多有趣的玩法展示。 在 DALL-E 2 和 Imagen 之后&#xff0c;AI绘图领域又一个热乎的深度学习模型出炉——Stable Diffusion 。8月份发布的 Stable Diffusion 更加高效且轻量&#xff0c;可以在消费…

第六节课《Lagent AgentLego 智能体应用搭建》

PDF链接&#xff1a;https://pan.baidu.com/s/1JFtvBWgEGFWJq8pHafvIUg?pwd6666 提取码&#xff1a;6666 Lagent & AgentLego 智能体应用搭建_哔哩哔哩_bilibili https://github.com/InternLM/Tutorial/blob/camp2/agent/README.md InternStudio 一、为什么需要agent…

网页html版面分析-- BeauifulSoup(python 文档解析提取)

介绍 BeauifulSoup 是一个可以从HTML或XML 文件中提取数据的python库&#xff1b;它能通过转换器实现惯用的文档导航、查找、修改文档的方式。 BeauifulSoup是一个基于re开发的解析库&#xff0c;可以提供一些强大的解析功能&#xff1b;使用BeauifulSoup 能够提高提取数据的效…

R语言Rstudio突然无法启动?如何解决

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

由于找不到msvcp120.dll,无法继续执行代码的5种解决方法

在操作计算机的过程中&#xff0c;您或许会遇到这样一种情形&#xff1a;当试图启动某个软件应用程序时&#xff0c;系统突然弹出一个错误提示框&#xff0c;明确指出“找不到msvcp120.dll”&#xff0c;它会导致程序无法正常启动或运行。为了解决这个问题&#xff0c;我总结了…

作为全栈工程师,如何知道package.json中需要的依赖分别需要什么版本去哪里查询?

作为前端工程师&#xff0c;当你需要确定package.json中依赖的具体版本时&#xff0c;可以通过以下方法来查询&#xff1a; NPM 官网查询&#xff1a; 访问 npm 官网&#xff0c;在搜索框中输入你想查询的包名。在包的页面上&#xff0c;你可以看到所有发布过的版本号&#xff…

为什么很多人不推荐你用JWT?

为什么很多人不推荐你用JWT? 如果你经常看一些网上的带你做项目的教程&#xff0c;你就会发现 有很多的项目都用到了JWT。那么他到底安全吗&#xff1f;为什么那么多人不推荐你去使用。这个文章将会从全方面的带你了解JWT 以及他的优缺点。 什么是JWT? 这个是他的官网JSON…

解密Kol发文推广10个提升转化率的实用技巧-华媒舍

Key Opinion Leader&#xff08;Kol&#xff0c;关键意见领袖&#xff09;的发文推广成为了提升产品和服务转化率的重要手段。如何有效地利用Kol进行发文推广&#xff0c;并将潜在的观众转化为忠实的消费者&#xff0c;成为了营销从业者普遍关注的话题。本文将为您介绍10个实用…

Fluent 区域交界面的热边界条件

多个实体域公共交界面的壁面&#xff0c;Fluent 会分拆为 wall 和 wall-shadow 的两个壁面&#xff0c;两者为配对关系&#xff0c;分别从属于一个实体域。 配对面可使用热通量、温度、耦合三类热边界条件&#xff0c;前两者统称为非耦合热边界条件。 耦合为配对面默认的热边界…

谷歌搜索引擎seo套餐是怎样的?

在谷歌搜索引擎优化&#xff08;SEO&#xff09;套餐方面&#xff0c;你会发现服务提供商通常提供多样化的定制服务&#xff0c;旨在满足不同业务的独特需求&#xff0c;下面一些关键点&#xff0c;帮助理解一个典型的SEO服务套餐可能包括哪些内容&#xff1a; 具体目标&#x…

vue初始化项目

打开终端输入vue create project-name 选择Manually select features回车&#xff0c;继续选择如下&#xff1a; 如果要使用pina就可以不选vuex&#xff0c;回车&#xff0c;选择如下&#xff1a; 按下图选即可

状压dp 理论例题 详解

状压dp 四川2005年省选题&#xff1a;互不侵犯 首先我们可以分析一下&#xff0c;按照我们普通的思路&#xff0c;就是用搜索&#xff0c;枚举每一行的每一列&#xff0c;尝试放下一个国王&#xff0c;然后标记&#xff0c;继续枚举下一行 那么&#xff0c;我们的时间复杂度…

Vue 介绍

【1】前端发展史 前端的发展史可简述为&#xff1a; 从最初的静态页面编写&#xff0c;依赖后端模板渲染逐步演化为通过JavaScript&#xff08;特别是Ajax技术&#xff09;实现前后端分离&#xff0c;使得前端能够独立地加载数据和渲染页面随后&#xff0c;Angular、React、Vu…

Ubuntu20.04右键打不开终端

今天用virtualbox安装了ubuntu20.04 问题&#xff1a;右键打开终端&#xff0c;怎么也打开不了&#xff01; 点了也没反应&#xff0c;或者鼠标转小圈圈&#xff0c;然后也没有反应… 解决方法&#xff1a; 1、Ctrl Alt F6 先切换到终端访问界面 mac电脑 Ctrl Alt F6 …

ADS基础教程9-理想模型和厂商模型实现及对比

目录 一、概要二、厂商库使用1.新建cell2.调用厂商库中元器件3.元器件替换及参数选择4.完成参数选择5.导入子图 三、仿真实现注意事项 一、概要 本文将介绍在ADS中调用厂商提供的库&#xff0c;来进行原理图仿真&#xff0c;并实现与ADS系统提供的理想元器件之间的比较。 二、…

docker安装redis命令及运行

docker安装redis&#xff1a; docker run -d -p 6379:6379 --name redis redis:latest -d: 以 守护进程模式 运行容器&#xff0c;容器启动后会进入后台运行&#xff0c;并脱离当前命令行会话。 -p: 显示端口号。 -p 6379:6379: 将容器内部的 6379 端口映射到宿主机 6379 端…

力扣每日一题-去掉最低工资和最高工资后的工资平均值-2024.5.3

力扣题目&#xff1a;去掉最低工资和最高工资后的工资平均值 开篇 题目链接: 1491.去掉最低工资和最高工资后的工资平均值 题目描述 代码思路 太简单了。先利用sort排序对数组进行从小到大排序&#xff0c;然后计算时数组最小值和最大值不要加进去即可。 代码纯享版 clas…

【go项目01_学习记录06】

学习记录 1 使用中间件1.1 测试一下1.2 push代码 2 URI 中的斜杆2.1 StrictSlash2.2 兼容 POST 请求 1 使用中间件 代码中存在重复率很高的代码 w.Header().Set("Content-Type", "text/html; charsetutf-8")统一对响应做处理的&#xff0c;我们可以使用中…

低代码优于无代码?

从1804年打孔式编程出现&#xff0c;编程语言至今已经存在了200多年。而从50年代以来&#xff0c;新的编程语言也不断涌现&#xff0c;现在已经有250多种了。这就意味着&#xff0c;开发人员最需要习惯的事情就是不断改变。 编程界最近的一个变化是集成开发环境&#xff08;IDE…
最新文章