html怎么加入图片显示

在制作网页时，加入图片是一种非常常见的需求，它可以让内容更加生动有趣，如何用HTML代码来实现图片的显示呢？下面我会详细介绍一下具体的步骤和注意事项。

我们需要了解HTML中用于插入图片的标签是<img>，这个标签非常简单，不需要闭合标签，只需要在<img>后面添加相应的属性即可。

基本用法

1、src属性：这是<img>标签中最重要的属性，用于指定图片的URL，这个URL可以是相对路径，也可以是绝对路径。

<img src="image.jpg" alt="描述文字">

在上面的例子中，image.jpg是图片文件的名称，你需要将其替换为实际图片的文件名。alt属性是可选的，但它非常重要，因为它为图片提供了替代文本，这对于搜索引擎优化和屏幕阅读器用户来说非常有用。

2、width和height属性：这两个属性可以用来控制图片的显示大小。

<img src="image.jpg" alt="描述文字" width="300" height="200">

这里的width和height属性分别设置了图片的宽度和高度，单位是像素，你可以根据需要调整这些值。

3、align属性：虽然这个属性在HTML5中已经不推荐使用，但在旧的HTML标准中，它可以用来设置图片的对齐方式。

<img src="image.jpg" alt="描述文字" align="right">

在这个例子中，图片会被对齐到右边，还有其他的对齐选项，如left、top、middle和bottom。

4、结合<a>标签：如果你想让图片点击后跳转到另一个页面，可以将<img>标签放在<a>标签中。

<a href="http://www.example.com">
  <img src="image.jpg" alt="描述文字">
</a>

这样，点击图片就会打开http://www.example.com这个链接。

5、响应式设计：在现代网页设计中，响应式是非常重要的，你可以使用CSS来控制图片的大小，使其能够适应不同设备的屏幕。

<img src="image.jpg" alt="描述文字" class="responsive">

然后在CSS中添加：

.responsive {
  max-width: 100%;
  height: auto;
}

这样，图片就会根据容器的大小自动调整大小，而不会超过容器的宽度。

6、onerror事件：图片可能因为各种原因无法加载，这时，你可以设置一个事件处理器来处理这种情况。

<img src="image.jpg" alt="描述文字" onerror="this.src='default.jpg';">

在这个例子中，如果image.jpg无法加载，图片的源将被更改为default.jpg。

7、CSS样式：你还可以使用CSS来为图片添加边框、阴影等效果，或者通过CSS Grid和Flexbox等布局技术来控制图片的位置和排列。

img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

就是在HTML中加入图片显示的基本方法和一些进阶技巧，通过这些方法，你可以轻松地在网页中插入图片，并进行各种样式的调整，以满足不同的设计需求。