img标签属于行内元素;img标签没有独占一行,所以是行内元素。尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高。
本教程操作环境:windows10系统、HTML5版、Dell G3电脑。
标签定义及使用说明
<img> 标签定义 HTML 页面中的图像
<img> 标签有两个必需的属性:src 和 alt
强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说,alt 属性通常是他们了解图像内容的唯一方式
<img />究竟是什么元素?<img /> 是行内元素还是块级元素?
<img /> 标签没有独占一行,所以是行内元素,这没啥问题
既然img是行内元素,那为什么可以通过CSS设置框高呢?
尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高。
<img src="/i/mouse.webp" height="200" width="200" />
那么什么又是“置换元素”呢?
置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。
比如img根据src属性来显示,input根据value属性来显示,因此可知道img和input是置换元素,当然同理textarea, select,也是置换元素;
什么是块级元素与行级元素?
块级元素
会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。ps:常见的块级元素:div,img,ul,form,p等
行级元素
与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。ps:em,strong,br,input等
display:inline-block,block,inline元素的区别
1、display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。
2、display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。
3、display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
以上就是img标签属于什么元素的详细内容,更多请关注易知道|edz.cc其它相关文章!