img标签基础解析在HTML5中img标签图片四要素：
（1）src：图片路径
（2）width：
（3）height：
（4）alt：
alert的作用:
当图片发生错误时候，用alt里面的函数表示错误内容便于搜索引擎抓取(方便于搜索引擎抓取,方便SEO渲染)
注意事项：
（1）img设置的width和height必须是图片的原始尺寸
（2）一般inline元素是不能设置宽高，虽然img也是inline元素， 但是它是一个替换元素可以通过src，因此可以自主设置宽高
inline元素和内联元素的差别。
如何解决inline行内元素之间的间距问题：
下图中内联元素产生上下间隙的原因：
i
在HTML5中，`<img>`标签用于插入图像，它是HTML文档中不可或缺的一部分。了解`<img>`标签的基础知识和一些特殊属性对于优化网页布局至关重要。`<img>`标签的四个核心属性包括：
1. `src`：指定图像的路径或URL，用于告诉浏览器在哪里找到图片。
2. `width`：定义图像的宽度，可用来调整图片尺寸。
3. `height`：定义图像的高度，同样用于调整尺寸。
4. `alt`：提供替代文本，当图片无法显示或加载失败时，这个属性的内容会被展示出来，同时也对搜索引擎优化（SEO）非常有用。
在实际应用中，有几个需要注意的点：
- 图片的`width`和`height`应设置为图片的实际尺寸，这有助于页面预加载和布局计算。
- 尽管`<img>`标签是内联元素，但它被视为替换元素，因为它通过`src`属性包含内容，因此可以独立设置宽高。
内联元素，如`<span>`、`<b>`等，通常不能直接设置宽高，但`<img>`是个例外。内联元素之间的间距问题往往源于浏览器对空白字符的处理和默认的基线对齐方式。内联元素默认基于基线对齐，这就可能导致元素间的空白节点在垂直方向上产生间隙。
基线对齐是CSS中垂直对齐的一种方式，它是指元素底部的一条线，通常是字母x的下边缘。当内联元素的`vertical-align`属性设为`baseline`时，它们将按照这条基线对齐。而空白节点，即由换行符或空格产生的无形空间，可能受到`font-size`和`line-height`的影响，导致在元素间产生间隙。
解决内联元素间距问题的常见方法包括：
1. 设置父级元素的`font-size: 0;`，这可以使空白节点的大小减小到零，从而消除间隙。但这样做可能会影响到父级元素中的文本样式。
2. 将内联元素转换为块级元素，例如使用`display: block;`或`display: inline-block;`，这样元素就会独占一行，不再受其他内联元素影响。
`vertical-align`和`line-height`是CSS中比较复杂的属性，它们共同决定了元素在垂直方向上的对齐。`vertical-align: middle;`会使元素的中心与基线对齐的中心相对齐，这对于实现图片和文本的居中对齐非常有用。
举例来说，如果一个`<span>`标签和一个`<img>`标签并排，它们默认的`vertical-align: baseline;`可能会使文字底部超出图片的基线，当改变文字大小时，由于`line-height`的影响，两者之间的垂直间隙也会变化。通过设置`vertical-align: middle;`，可以确保图片和文字在垂直方向上居中对齐，从而消除间隙。
理解和掌握`<img>`标签的属性、内联元素的间距问题以及`vertical-align`和`line-height`的使用，对于创建整洁、响应式的网页布局至关重要。通过灵活运用这些知识，可以更好地控制网页中图片和文本的呈现效果。
