在HTML中的行内元素（inline elements）、块级元素（block-level elements）和空元素（void elements 或 empty elements）。

目录

行内元素（Inline Elements）

块级元素（Block-level Elements）

空元素（Void Elements 或 Empty Elements）

---

行内元素（Inline Elements）

1. 定义：行内元素不会开始新的一行，而是与其他元素并排显示。
2. 特点：
   1. 不会打断文本流。
   2. 高度、行高以及外边距和内边距的上下部分不可改变。
   3. 宽度就是它的文字或图片的宽度，不可改变。
   4. 内联元素之间会有空白符（空格、换行等）产生的间隔。
3. 常见元素及作用：

<span>：用于对文档中的一部分文本进行组合，通常与CSS一起使用以应用样式。
<a>：定义超链接，允许用户点击跳转到其他页面或页面内的特定部分。
<img>：用于在文档中嵌入图像。（图片，尽管它是空元素，但在文本中作为行内元素显示）
<br>：插入一个简单的换行符。（尽管它是一个空元素，但在某些情况下可以影响行内元素的布局）
<input>：在表单中定义输入控件，如文本框、密码框、单选按钮等。
<label>：为<input>元素定义描述性标签。
<strong>：表示强调的文本，通常显示为粗体。
<em>：表示强调的文本，通常显示为斜体。

块级元素（Block-level Elements）

1. 定义：块级元素总是从新的一行开始，并且占据整行或尽可能多的空间，直到遇到下一个块级元素或容器元素的边界。
2. 特点：
   • 总是从新的一行开始，占据整行或尽可能多的空间。
   • 高度、行高以及外边距和内边距都可以控制。
   • 宽度默认是容器的100%，除非设置了特定的宽度。
3. 常见元素及作用：

<div>：定义文档中的一个区块或区域，通常与CSS一起使用以应用布局和样式。
<p>：定义段落，浏览器会在段落前后自动添加一些空白。
<h1> - <h6>：定义标题或子标题，<h1>表示最大的标题，<h6>表示最小的标题。
<ol>：定义有序列表，列表项默认使用数字进行编号。
<ul>：定义无序列表，列表项默认使用实心圆或其他符号进行标记。
<li>：定义列表项，常与<ol>或<ul>一起使用。
<table>：定义表格，用于展示结构化数据。
<form>：定义表单，用于收集用户输入的数据。
<header>、<footer>、<article>、<section>、<nav>：都是HTML5中新增的语义化标签，用于描述文档的结构和内容。

空元素（Void Elements 或 Empty Elements）

1. 定义：空元素或称为自闭合元素，指的是那些没有闭合标签的元素。它们不能包含任何内容，通常用于插入或控制某些内容。
2. 特点：
   • 没有闭合标签。
   • 通常用于插入或控制某些内容，如图片、换行符、水平线等。
   • 尽管它们不能包含内容，但可以通过属性来设置其行为或样式。
3. 常见元素及作用：

<img>：在文档中嵌入图像，通常需要src、alt等属性来指定图像来源和替代文本。
<input>：在表单中定义输入控件，如文本框、密码框等，需要type、name等属性来指定控件类型和名称。
<br>：插入一个简单的换行符，用于在文本中创建新行。
<hr>：在文档中插入水平线，用于分隔或突出内容。
<meta>：提供关于HTML文档的元信息，如字符编码、页面描述等。这些信息通常不会直接显示在页面上，但会被浏览器或其他搜索引擎使用。
<link>：定义文档与外部资源之间的关系，如链接到样式表或图标文件。

需要注意的是，虽然<img>和<br>等元素在某些情况下可能会表现得像行内元素（例如，它们不会打断文本流），但它们实际上是空元素，并且具有不同的行为规则和用途。同样，<input>元素虽然在表单中通常表现为块级元素，但它也是一个空元素。