img标签属于行内元素；img标签没有独占一行，所以是行内元素。尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

本教程操作环境：windows10系统、HTML5版、Dell G3电脑。

标签定义及使用说明

<img> 标签定义 HTML 页面中的图像

<img> 标签有两个必需的属性：src 和 alt

强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式

<img />究竟是什么元素？<img /> 是行内元素还是块级元素？

<img /> 标签没有独占一行，所以是行内元素，这没啥问题

既然img是行内元素，那为什么可以通过CSS设置框高呢？

尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

<img src="/i/mouse.jpg" 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将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。