HTML（超文本标记语言）中的元素可以分为两类：块级元素和内联元素。块级元素会自动占据一行，并且可以设置宽度和高度。内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素，包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点：

• 块级元素会自动占据一行，并且可以设置宽度和高度。
• 块级元素可以包含其他元素，包括文本、图像、链接等。
• 块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素：

• <div>：用于定义一个块级容器，可以包含其他元素。
• <p>：用于定义段落，通常包含文本内容。
• <h1>到<h6>：用于定义标题，从h1到h6分别表示从大到小的标题级别。
• <table>：用于定义表格，包含多个行和列。
• <form>：用于定义表单，包含输入框、按钮等元素。
• <ul>和<ol>：用于定义无序列表和有序列表，包含多个列表项。
• <img>：用于定义图像，用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果，例如设置背景颜色、边框、字体、大小、颜色等。同时，块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left;

2. 内联元素具有以下特点：

• 内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。
• 内联元素可以设置字体、颜色、大小等样式属性。
• 内联元素通常不包含其他元素，而是直接嵌入文本内容中。

以下是一些常见的内联元素：

• <a>：用于定义超链接，通常用于链接到其他网页或文件。
• <em>：用于定义强调文本，通常呈现为斜体效果。
• <strong>：用于定义加粗文本，通常呈现为粗体效果。
• <span>：用于定义自定义样式的文本，通常用于应用特定的 CSS 样式。
• <img>：用于定义图像，通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果，例如设置字体、颜色、大小等。同时，内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

默认情况下，<img> 元素是内联元素，它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素，它们会在一行中排列，并且不会自动换行。

但是，如果将 <img> 元素的 display 属性设置为 block，那么它就会成为块元素。块元素会占据一行，并且可以设置宽度和高度。在这种情况下，多个 <img> 元素会自动换行，并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 属性被设置为 block，这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度，以及 margin 属性来控制图片之间的间距。