Code Better容器标签
容器标签（container tags）在 HTML 中是用来包含其他元素的标签。它们主要用于组织、分割和布局页面内容。
常见的容器标签有：<div>、<span>、<section>、<article>、<nav>、<aside>、<header>、<footer>。其中 <div> 和 <span> 是无语义化标签，其他都是语义化标签。
div
<div> 标签是一个块级元素，通常用于创建页面布局的不同部分。它没有特定的语义，是一个纯粹的容器。
特点：
- 占据其父容器的整个宽度。
- 总是在新的一行开始显示。
span
<span> 标签与 <div> 标签类似，也是一个通用容器，但它通常用于包围部分文本或其他内联元素，而不改变文档的布局流。
特点：
- 只占据其内容所需的宽度。
- 不会从新行开始显示
块级元素 与 内联元素
块级元素（Block-level ements）
- 独占一行：块级元素通常占据父容器的整个宽度，并且总是在新的行上开始
- 容纳其它块级元素：块级元素可以包含其他块级元素和内联元素。
- 默认宽度：默认情况下，块级元素的宽度为其父元素的
100%。 - 常见的块级元素：
<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<form>、<header>、<footer>、<section>、<article>、<nav>等。
内联元素（Inline elements）
- 不占用整个行：内联元素只占据其内容所需的宽度，不会从新行开始显示。
- 容纳其它内联元素：内联元素可以包含其他内联元素，但不能包含块级元素。
- 行内布局：内联元素的高度、行高和摆放取决于其周围的文本内容。
- 常见的内联元素：
<span>、<a>、<img>、<em>、<strong>、<label>、<input>、<select>、<textarea>、<button>等。