在HTML中，我们可以使用<img>标签来插入图片。<img>标签的src属性用于指定图片的来源，可以是相对路径或绝对路径，下面是一个简单的示例：
在这个示例中，我们使用了<img>标签来插入一张图片。src属性设置为图片的路径，可以是相对路径或绝对路径。alt属性用于为图片提供替代文本，当图片无法显示时，浏览器会显示这个替代文本。
接下来，我们将详细介绍如何在HTML中使用<img>标签插入图片。
1、确定图片路径
你需要找到要插入的图片，并获取它的路径，图片可以位于你的计算机上，也可以位于互联网上，如果图片位于你的计算机上，可以使用相对路径，例如images/myimage.jpg，如果图片位于互联网上，需要使用绝对路径，例如https://example.com/myimage.jpg。
2、创建HTML文件
创建一个HTML文件，例如index.html，在文件中添加基本的HTML结构，包括<!DOCTYPE html>, <html>, <head>和<body>标签。
3、插入<img>标签
在<body>标签内，使用<img>标签插入图片，将src属性设置为图片的路径，将alt属性设置为图片的描述。
<img src="图片路径" alt="图片描述">4、保存文件并在浏览器中查看
保存HTML文件，然后在浏览器中打开它，你应该能看到插入的图片以及替代文本，如果图片无法显示，浏览器会显示替代文本。
5、使用CSS调整图片样式
你可以使用CSS来调整图片的样式，例如大小、边框、边距等，可以在<style>标签内添加CSS代码，或者将CSS代码放在一个单独的文件中，并在HTML文件中引用它。
<!DOCTYPE html> <html> <head> <title>插入图片示例</title> <style> img { width: 300px; /* 设置图片宽度 */ height: auto; /* 保持图片高度与宽度比例 */ border: 1px solid black; /* 添加黑色边框 */ margin: 10px; /* 设置边距 */ } </style> </head> <body> <h1>欢迎来到我的网站！</h1> <p>这是一张我拍摄的图片：</p> <img src="图片路径" alt="图片描述"> </body> </html>在这个示例中，我们使用CSS设置了图片的宽度、高度、边框和边距，你可以根据需要调整这些值。
6、使用JavaScript实现交互效果
如果你想为图片添加交互效果，例如点击图片时显示一个弹出框，可以使用JavaScript来实现，在HTML文件中添加一个按钮和一个弹出框：
<button onclick="showPopup()">点击我</button> <div id="popup" style="display: none;">这是一个弹出框</div>在<script>标签内添加JavaScript代码：
<script> function showPopup() { document.getElementById("popup").style.display = "block"; } </script>在这个示例中，我们为按钮添加了一个onclick事件监听器，当点击按钮时，会调用showPopup函数，这个函数会修改弹出框的样式，使其可见，你可以根据需要修改这个示例，实现更复杂的交互效果。
