块元素与行内元素（内联元素）

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行元素不会独占页面中的一行，只占自身的大小
可以设置width,height属性	行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素不包含块级元素

1. 常见块级元素

块级元素通常会在页面上占据一整行，并且其后面的元素会被迫换行。

• div：div是一个通用的容器元素，用于将内容分组或构建布局。它本身没有任何表现样式，常用于CSS布局中。
• form：form标签用于定义一个HTML表单，供用户输入数据并提交。
• h1~h6：这些标签用于定义标题，h1代表最大的标题，h6代表最小的标题。标题标签有助于页面内容的层次化结构。
• hr：hr标签表示一条水平线，用来分隔文档中的内容。它常用于视觉上的分割。
• p：p表示段落，用于定义文本段落。浏览器会在段落前后自动添加间距。
• table：table标签用于定义一个表格，表格可以包含行（tr）、列（td）和表头（th）。
• ul：ul代表无序列表，用于创建一个无序的项目列表。ul包含 li（列表项）元素。

2. 常见内联元素

内联元素不会单独占据一整行，通常在一行内与其他元素一起显示。它们通常用于文本的修饰或行内结构。

• a：a标签用于定义超链接，用户点击链接后可以跳转到其他页面或资源。
• b：b标签表示加粗文本，通常用于强调某些词汇，但不具备语义化的意义（比如 strong标签则表示语义上的强调）。
• em：em表示强调文本，通常显示为斜体，具有语义意义，表示强调语气。
• i：i表示斜体文本，通常用于技术术语、外语单词或书籍名等，具有一定的语义意义。
• span：span是一个通用的内联容器，用于包装文档中的一部分内容，通常配合CSS使用来改变样式。
• strong：strong表示强调文本，通常显示为加粗，具有语义意义，强调某些重要的信息。

3. 行内块级元素（特点：不换行、能够识别宽高）

这些元素结合了块级元素和内联元素的特性，既可以在一行内显示，又可以设置宽度和高度。

• button：button标签表示按钮，用户可以点击按钮触发某些操作。按钮通常用于提交表单或执行JavaScript操作。
• img：img标签用于显示图像，它不会占用一整行，可以设置图像的宽度和高度。
• input：input标签用于接受用户输入，可以用来创建文本框、单选框、复选框、提交按钮等。它是表单的核心元素。