img标签的说明

img标签的说明

看了很多关于img标签是行内元素还是行内块元素的说明,但都没有很确切的证实img标签的正确性,关于这个问题,我做了一个小实验
img标签的说明
img标签的说明
结果显示给img设置的宽高是无效的

img标签的说明
img标签的说明

img标签的说明
当有src alt 两个属性时,输出的结果,是不能设置宽高,
但是只有一个属性时,或者没有属性时,是不可以设置宽高的
这是为什么呢?

其实也很简单 :

1.html开始被解析,一步一步向下解析代码
2.当读取到img这个标签的时候,开始解析img
如果img上有src这个属性,页面就会去解析img的src里面的图片地址,如果由于某种原因无法加载图像或src里面没有传入地址,浏览器会在页面上显示alt属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。此时,页面会认为,img这个标签,不需要在文档流占位置,这时给img设置的宽高是无效的,也可以认为,此时的img标签是行内元素了。