在HTML中，元素被分为两种主要类型：行内元素（Inline Elements）和块级元素（Block-level Elements）。这两种元素在页面布局中起着至关重要的作用，它们各自有不同的特性和使用场景。
1. 行内元素（Inline Elements）
行内元素通常用于在一行内显示内容，不会自动换行。例如`<a>`（超链接）、`<span>`、`<b>`（粗体）、`<i>`（斜体）、`<img>`（图像）和`<input>`（表单元素）等。行内元素的特点包括：
- 不会占据整行，只占用自身内容所需的空间。
- 相邻的行内元素可以并排显示，直到一行放不下才会换行。
- 不能设置宽高（width/height），但可以设置边距（margin）和内边距（padding），不过这些属性的效果有限。
2. 块级元素（Block-level Elements）
块级元素通常用于组织文档结构，每个元素都会独占一行。常见的块级元素有`<div>`、`<p>`（段落）、`<h1>`到`<h6>`（标题）、`<ul>`（无序列表）、`<ol>`（有序列表）和`<li>`（列表项）等。块级元素的特点：
- 自动占据整行，即使内容很少，也会独占一行。
- 相邻的块级元素会依次垂直堆叠。
- 可以设置宽高、边距和内边距，并且这些属性对布局有很大影响。
3. `display`属性
在CSS中，`display`属性允许我们控制元素的显示方式，可以将一个元素从行内元素变为块级元素，或者反之。例如，将`<span>`元素的`display`属性设置为`block`，它就会表现得像一个块级元素；而将`<div>`元素的`display`属性设置为`inline`，则它会像行内元素一样显示。
4. 使用场景
- 行内元素适合用于文本修饰或小型组件，如链接、图片等，它们不会破坏文本的流式布局。
- 块级元素适用于构建网页的基本结构，如创建章节、段落或布局容器。
- 当需要将行内元素排列成行或改变块级元素的行为时，`display`属性可以提供灵活性。
5. 示例代码
在`displayDemo.html`文件中，可能包含了一个展示行内元素与块级元素区别的示例。通过修改元素的`display`属性，可以看到不同显示模式对布局的影响。
理解和掌握行内元素与块级元素的概念以及如何利用`display`属性是HTML和CSS布局基础中的重要部分。熟练运用这些知识，可以帮助开发者创建出符合预期的网页布局。
