在HTML中加入图片，可以使用<img>标签。<img>标签是HTML中专门用来插入图片的标签，其基本语法如下：
<img src="图片地址" alt="图片描述">
src属性用于指定图片的地址，可以是相对地址也可以是绝对地址；alt属性用于为图片提供替代文本，当图片无法正常显示时，将显示该替代文本。
1. 本地图片
如果你的图片文件存储在你的计算机上，你可以使用相对路径或绝对路径来指定图片的地址，如果你的图片文件名为example.jpg，并且它位于与你的HTML文件相同的目录中，你可以这样插入图片：
<img src="example.jpg" alt="示例图片">
如果你的图片文件位于不同的目录中，你需要提供相对于HTML文件的路径，如果你的图片文件名为example.jpg，并且它位于一个名为images的子目录中，你可以这样插入图片：
<img src="images/example.jpg" alt="示例图片">
2. 网络图片
如果你的图片存储在互联网上，你可以直接使用图片的URL作为图片的地址。
<img src="https://www.example.com/image.jpg" alt="示例图片">
3. 设置图片大小
默认情况下，<img>标签会按照图片的实际大小显示，你可以使用width和height属性来设置图片的大小，这两个属性的值可以是像素值、百分比值或者是其他的长度单位。
<img src="example.jpg" alt="示例图片" width="200" height="150">
在这个例子中，图片的宽度被设置为200像素，高度被设置为150像素，注意，如果只设置了宽度或者只设置了高度，那么另一个维度将会等比例缩放以保持图片的纵横比。
4. 添加边框
你也可以使用border属性来为图片添加边框。
<img src="example.jpg" alt="示例图片" width="200" height="150" border="5">
在这个例子中，图片的边框宽度被设置为5像素，注意，border属性的值可以是像素值、百分比值或者是其他的长度单位。
5. 添加其他属性
除了上述的属性外，<img>标签还支持其他的一些属性，如align（对齐方式）、vspace（垂直间距）和hspace（水平间距），这些属性的使用较少，因此在这里不再详细介绍。
以上就是在HTML中加入图片的基本方法，希望对你有所帮助。
相关问题与解答：
问题1：如何让图片居中显示？
答：要让图片居中显示，你可以使用CSS的text-align: center;属性，你需要将图片放入一个块级元素（如<div>）中，然后为该块级元素设置text-align: center;属性。
<div style="text-align: center;">
<img src="example.jpg" alt="示例图片" width="200" height="150">
</div>
问题2：如何在鼠标悬停时显示图片的描述？
答：要实现这个效果，你可以使用CSS的伪类选择器和:hover伪类，你需要为图片的描述创建一个隐藏的元素（如<p>），然后使用CSS的伪类选择器和:hover伪类来控制该元素的可见性。
<img src="example.jpg" alt="示例图片" width="200" height="150"> <p id="description" style="display: none;">这是图片的描述</p>
description { display: none; } /* 默认隐藏描述 */
description:hover { display: block; } /* 鼠标悬停时显示描述 */
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/376204.html
微信扫一扫 