HTML元素可以分为块级元素和内联元素两种类型。块级元素在页面中占据一整行，而内联元素则可以在同一行内显示。本文将介绍它们的区别，并提供一些示例。
## 块级元素
块级元素通常用于表示页面中的结构，如段落、标题、列表等。它们会在页面中占据一整行，并且可以设置宽度、高度、边距和填充等样式属性。以下是一些常见的块级元素：
- <div>：用于组合其他HTML元素，通常用于布局。
- <p>：用于表示段落。
- <h1>~<h6>：用于表示标题，数字越小表示级别越高。
- <ul>：用于表示无序列表。
- <ol>：用于表示有序列表。
- <li>：用于表示列表项。
- <table>：用于表示表格。
```html
<div>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
```
## 内联元素
内联元素通常用于表示文本或其他行内内容，如链接、强调、图像等。它们不会在页面中占据一整行，并且只能设置部分样式属性，如颜色、字体大小、文本装饰等。以下是一些常见的内联元素：
- <a>：用于表示链接。
- <strong>：用于表示强调文本。
- <em>：用于表示斜体文本。
- <img>：用于表示图像。
- <span>：用于包含其他内联元素。
```html
<p>这是一个包含<a href="#">链接</a>和<strong>强调文本</strong>的段落。</p>
```
## 区别
块级元素和内联元素的主要区别在于它们在页面中的布局方式和样式属性的设置范围。块级元素会在页面中占据一整行，并且可以设置宽度、高度、边距和填充等样式属性；而内联元素不会占据一整行，并且只能设置部分样式属性，如颜色、字体大小、文本装饰等。
此外，块级元素可以包含其他块级元素和内联元素，而内联元素只能包含其他内联元素。
