一、块级元素、行内元素和行内块级元素
在 HTML 5 标准前，HTML 中的元素可以分为块级元素、行内元素（又称行级元素）和行内块级元素三种类型 ，它们的主要区别在于它们在文档流中所占据的空间和如何与其他元素相互作用。
1、块级元素
块级元素（block element）特点：
- 在默认情况下，会新起一行。
- 块级元素可以包含行内元素和其他块级元素。
- 可以设置宽度、高度、内边距、边框和外边距等盒模型属性。
常见的 HTML 块级元素包括：
- <p>：用于表示段落。
- <h1> - <h6>：用于表示标题，h1 是最高级别的标题。
- <ul>、<ol>、<li>：用于创建无序列表和有序列表。
- <div>：用于分组和布局页面元素。
- <table>、<tr>、<td>等：用于创建表格。
- <hr>：用于创建水平线。
- <pre>：用于展示预格式化的文本，其中的空格、回车等会保留在输出结果中。
由于块级元素会占据一整行，因此通常用于分隔和布局页面的不同区域，可以设置宽度和高度等盒模型属性，从而实现复杂的布局效果。
2、行内元素
行内元素（inline element）特点：
- 默认情况下，不会以新行开始，其内容会在同一行上显示，直到到达该行的末尾才会换行显示。
- 一般情况下，行内元素只能包含数据和其他行内元素。
- 默认情况下，无法设置宽度和高度，除非将
display设为除inline之外的某个值。
常见的 HTML 行内元素包括：
-
<a>：用于创建超链接。
- <span>：用于包含文本和其他行内元素，可以用于实现文本的样式和布局效果。
-
<b>、<i>、<u>、<strong>、<em>、<small>、<sup>、<sub>等：用于对文本进行修饰和强调。
-
<br>：用于强制换行。
-
<code>、<var>、<kbd>等：用于表示计算机代码和用户输入。
-
<q>、<cite>、<blockquote>等：用于表示引用和短文本块。
由于行内元素在默认情况下不会开始新行，因此通常用于文本内容和内联元素的排列和布局。但是行内元素无法设置宽度和高度等盒模型属性，其宽度和高度都是由它们所包含的内容决定的，因此不能实现像块级元素那样的复杂布局效果。
3、行内块级元素
行内块级元素（inline-block）特点：
- 行内块级元素与行内元素类似（即在默认情况下，不会以新行开始），
- 可以包含其他行内块级元素或行内元素。
- 宽度和高度是可以设置的，不需要将
display设为除inline之外的某个值。
常见的 HTML 行内块级元素包括：
-
<img>：用于插入图片，可以通过设置其宽度和高度来控制图片的大小，但是在默认情况下，它是一个行内块级元素。
-
<button>：用于创建按钮。
-
<input>：用于创建输入框和表单元素。
-
<select>：用于创建下拉菜单。
- <textarea>：用于创建多行文本输入框。
-
<label>：用于创建表单标签。
通过将行内块级元素设置为 display: inline-block;，可以将其布局在一行中，并允许设置其宽度、高度、内边距和外边距等样式属性，从而实现更加灵活的布局效果。
二、按用途分类
HTML中有多种不同类型的元素，这些元素可以用来表示文本、图像、视频、链接、表格、表单、页面结构等不同的内容和结构。以下是HTML中常见的元素类型：
-
文本元素： <h1> ~ <h6>、<p>，<span>用于文本的展示。
-
超链接元素： <a>，用于创建链接到其他页面或文档。
-
多媒体元素： <img>、<video>、<audio>、<picture>、<source>，用于插入图像、视频和音频。
-
列表元素： <ul>、<ol>、<li>，用于表示无序列表、有序列表和列表项。
-
表格元素： <table>、<tr>、<th>、<td>，用于表示表格和表格的行和单元格。
-
表单元素： <form>、<input>、<button>、<textarea>、<select>等，用于创建表单，包括文本框、单选按钮、复选框、下拉框等。
-
框架元素： <iframe>，用于嵌入其他网页或文档。
-
头部元素： <head>、<meta>、<title>等，用于定义文档的头部信息，如标题、关键字、描述、作者、字符编码等。
-
分区元素： <div>、<section>、<article>、<nav>、<aside>等，用于组织和划分文档内容的区块。
- 样式类元素： <link>、<style>，用于连接外部样式表或内部样式表。
-
脚本元素： <script>，用于嵌入JavaScript代码。
-
区块级别的元素： <header>、<main>、<footer>等，用于标识文档中的不同区域。
这些元素不仅构成了 HTML 文档的基本结构，而且可以结合 CSS 和 JavaScript 等技术，实现更加丰富和复杂的页面效果和交互行为。