：9.HTML如何在网页中添加图片（img标签使用方法，以及img标签属性：altheightwidth）；图片格式选择

Posted 2023-04-04 你疯了抱抱我

一、img 标签简介

1.是自结束标签
2.用于向当前页面引入一个 外部图片
3.可以引入 gif 动图
4.img 是 替换元素，具有块元素和行内元素的某些特点

二、img标签基础

0.使用img标签将 图片 引入 网页！
1.代码：

<img src="图片的相对路径/绝对路径/网页链接">

2.示例（图片链接）：

3.引用成功：

三、img标签 -> alt属性

1.作用：
1.1 对图片的描述，一般不会显示这个文本。如果图片加载失败，那么有些浏览器就会显示 alt 中的字样，就像这样：

1.2 alt属性能够被搜索引擎识别！所以你搜索“松鼠”的时候，就出现了松鼠的图片

2.代码：

<img src="松鼠的图片地址" alt="松鼠">

四、img标签 -> width属性

1.用来设置图片的宽度
2.示例：我们要将图片的宽度设置成500像素

<img width="500" src="图片地址" alt="图片介绍">

五、img标签 -> height属性

1.用来设置图片的高度
2.示例：我们要将图片的高度设置成1000像素

<img height="1000" src="图片地址" alt="图片介绍">

六、图片格式选择

0.加载速度极快，和网页同时加载：base64
1.透明效果（玻璃、水）：png
2.照片：jpg
3.logo：gif
4.效果优、显示好，但是兼容效果差：webp

5.将图片转换成编码：base64
我们可以直接将文本格式的base64文件内容复制进 src 属性中，然后就会直接显示这个图片

HTML中添加图片的代码是什么？html如何正确的添加图片路径？

本篇文章主要讲述的就是关于HTML中的添加图片的代码解释分析，还有关于HTML图片的正确使用路径，让我们一起来看看这篇文章吧

首先我们先认识一下html中添加图片的代码：

html中添加图片的就是<img>标签，是一个单标签，是可以从任何地方拉来图片添加的，但是你得正确的确定添加图片的路径，不然就显示不出来图片，这就是我们今天要说的两个知识点。

需要面试资料的扫码进群

我们先认识一下img标签的正确用法，这样才能确定怎么添加图片。

一般添加图片的语法如下：

<img >

如上，src属性是img中必备的属性，不然img就相当于没用处了，没地方放图片，那这个标签还要干嘛，所以，我们要知道html img标签的用法，这两个就是连在一起的，我们必须要一起使用才行。

还有我们本地制作HTML添加图片一般都是把图片放在自己的本地文件夹中，与html文件放在一起，一般都是一个文档，有一个html,还有一个文件夹叫img的是专门用于放图片的文件夹，我们一般都是把自己要上传的图片放到img文件夹中。然后我们就可以这么用img标签链接本地的图片了：

<img >

如上就是一般我们用img标签的用法，链接本地的图片1.jpg，把图片放到网页上。

现在我们来说说正确的使用路径吧：

上面说了，我们一般都是把图片放在本地的文件夹中，这样我们就可直接链接图片了，这样的办法是很好的，如何还向把图片美化的更好，建议使用层叠样式表css来实现，但是我们现在说的都是纯html标签和属性来实现的，所以先不说css样式了。

我们想象看，一般都是用<img >,1.jpg这个是本地图片的名字，当然你可以随便的更改，这个都是可以的。这是我们最大众的用法。

来看看别的图片怎么连接，比如我们想连接别的文件夹下的图片，我们该怎么办呢？

让我们来看看情况使用的语法吧：

<img >

这样就出来了，如上图，我们就连接到了e盘“wenjian”的文件夹下的“tupian”文件夹下的1.jpg图片了。

这也是一种常见的用法，有些图片别的文档也需要时，这样做是最好的，把图片放到一个容易找到的位置。这样就能一直用下去了。

还有一种就是链接网上的图片:

想要网上的图片的网址，就在网站图片上面右击复制图片网址。这样就可以把图片的网址复制了。

然后我们使用img标签来把图片放到我们自己的网页上去。如下图：

<img >

这样就是可以调用图片放在自己的网页上来显示了，就是有点麻烦而已。大家可以多试试这几种方法

本篇关于图片标签的代码和正确使用路径的正确方式都说完

以上就是HTML中添加图片的代码是什么？html如何正确的添加图片路径？的详细内容