`、`
` 到 `` 等元素都属于块级元素。即使你为其设置了宽度和高度，它仍然会独占一行，其宽度默认会撑满父容器的宽度（除非你设置了宽度小于父容器宽度），且可以在其前后添加换行符，使元素之间形成明显的垂直分隔。
2. 行内元素（`inline`）：
特性：不会独占一行，多个行内元素会排列在同一行上，除非一行排不下才会换行。不具有完整的盒子模型，宽度和高度由元素内部的内容决定，无法直接设置宽度和高度，只能设置水平方向的内边距和外边距，垂直方向的内边距和外边距虽然可以设置，但不会影响元素在垂直方向上占据的空间，即不会推开其他元素。例如 ``、``、``、`` 等元素都是行内元素。
3. 行内块元素（`inline-block`）：
特性：不独占一行，多个行内块元素可以排列在同一行上，类似于行内元素。但是它具有部分盒子模型的特性，允许设置宽度和高度，同时也可以设置内边距、外边距，对周围元素的布局影响更像块级元素。在某些场景下，它结合了行内元素和块级元素的优点，既能在一行内排列多个元素，又能灵活控制元素的大小。例如 ``、`![]()
` 等元素通常表现为行内块元素。
使用不同类型元素的一些常见场景：
1. 当你需要对页面进行大的布局划分，比如划分不同的区域，创建页眉、页脚、侧边栏、主要内容区等，通常使用块级元素，因为它们可以方便地控制布局和元素之间的垂直间距。
2. 当你需要对某段文本进行简单的样式设置，如改变部分文字的颜色、加粗或添加链接，使用行内元素比较合适，它们不会破坏文本的自然排列顺序。
3. 当你需要在一行内排列多个元素，同时又想对元素的大小进行精确控制，例如将多个图标、按钮或小型表单元素排列在一行，并且希望它们的大小一致，行内块元素是一个很好的选择。
**如何判断一个元素的类型？**
在谷歌浏览器中鼠标右键检查元素，然后通过元素选取器选取要查看元素类型的元素，最后在computed中搜索display属性观察其值即可。如下所示：
# 标签嵌套
HTML 标签嵌套是将一个 HTML 标签放置在另一个 HTML 标签内部的做法。例如：
```html
This is a paragraph inside a div.
```
在这个例子中，`` 标签嵌套在 `
` 标签内。
**嵌套规则**：
1. 必须保证标签的正确闭合：如果有开始标签 ``，就必须有对应的结束标签 ` `。例如 ``。
2. 正确的嵌套顺序：通常情况下，块级元素可以包含行内元素和其他块级元素，但行内元素一般不能包含块级元素。例如：
- 正确：``
- 错误：``
3. 避免交叉嵌套：标签的嵌套应该是完整有序的，不能出现 `` 这样的交叉嵌套情况，正确的应该是 ``。
这些规则有助于确保 HTML 文档结构清晰，保证页面在不同浏览器中正确显示和正常运行。遵循这些规则可以避免布局混乱和潜在的显示错误。
# HTML 基本文档结构
HTML基本文档结构是指组成一个基本的HTML页面所必须的元素标签。具体编写格式如下：
```html
Document
网页内容
```
HTML 文档就是通过这样的结构，将各种元素组织在一起，以呈现出完整的网页。在 `` 元素中，可以使用更多的 HTML 元素，如 `
This is a paragraph inside a div.
` 标签嵌套在 `
` 标签内。
**嵌套规则**：
1. 必须保证标签的正确闭合：如果有开始标签 ``，就必须有对应的结束标签 ` `。例如 ``。
2. 正确的嵌套顺序：通常情况下，块级元素可以包含行内元素和其他块级元素，但行内元素一般不能包含块级元素。例如：
- 正确：`Document
网页内容
```
HTML 文档就是通过这样的结构，将各种元素组织在一起，以呈现出完整的网页。在 `` 元素中，可以使用更多的 HTML 元素，如 `
`
- 错误：``
3. 避免交叉嵌套：标签的嵌套应该是完整有序的，不能出现 `
` 这样的交叉嵌套情况，正确的应该是 `
`。
这些规则有助于确保 HTML 文档结构清晰，保证页面在不同浏览器中正确显示和正常运行。遵循这些规则可以避免布局混乱和潜在的显示错误。
# HTML 基本文档结构
HTML基本文档结构是指组成一个基本的HTML页面所必须的元素标签。具体编写格式如下：
```html