HTML中的图片标签＜img＞

最新推荐文章于 2024-06-16 09:59:58 发布

燕穗子博客

最新推荐文章于 2024-06-16 09:59:58 发布

阅读量1.7k

点赞数 3

分类专栏： HTML 文章标签： javascript 开发语言 vscode java

本文链接：https://blog.csdn.net/m0_64346035/article/details/124066458

版权

HTML 专栏收录该内容

22 篇文章 19 订阅

订阅专栏

一：img标签——向网页中引入一个外部图片，

img标签自结束标签

img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

1:属性：

src：设置一个外部图片的路径，路径规则跟超链接是一样的

我们所要使用的路径全都是相对路径——相对路径指相对于当前资源所在目录的位置

alt：可以用来设置在图片不能加载时，对图片的描述

搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width：可以用来修改图片的宽度,一般使用px作为单位

height ：可以用来修改图片的高度，一般使用px作为单位

注意：

1:宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小

如果两个值同时指定则按照你指定的值来设置

2:一般开发中除了自适应的页面，不建议设置width和height

大图变小，会多占内存，小图变大会失真

3:pc端，需要多大的图，就裁多大的

移动端，进场会对图片进行缩放（大图缩小）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
    <img src="img/img/hg.gif" alt="胡歌11122" width="400px" height="300px" />
    <img
      width="400px"
      height="300px"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fx0.ifengimg.com%2Fucms%2F2022_09%2FED3ADAAB7608B3A42AC1C8BA541E38C9AEB1233C_size71_w1200_h800.jpg&refer=http%3A%2F%2Fx0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648535785&t=e8550f6fe1e0595c75361933f5891b66"
      alt="乌克兰"
    />
  </body>
</html>

燕穗子博客

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中的图片标签＜img＞

一：img标签——向网页中引入一个外部图片，img标签自结束标签img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）1:属性：src：设置一个外部图片的路径，路径规则跟超链接是一样的我们所要使用的路径全都是相对路径——相对路径指相对于当前资源所在目录的位置alt：可以用来设置在图片不能加载时，对图片的描述搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进...
复制链接

扫一扫