块级元素和内联元素概念
首先，让我们来理清一下概念。简单来说 HTML中的元素可分为块级元素和内联元素，它们在页面布局和显示方面有着不同的行为和特点。本文将介绍块级元素和内联元素的定义、特点以及示例。
HTML中，元素的布局和显示对于网页的整体结构和美观度至关重要。块级元素和内联元素是HTML中两种基本的元素类型，它们各自具有不同的显示方式和特点。
块级元素
块级元素通常以块的形式显示在页面上，占据父元素的整个可用宽度。每个块级元素都会从新的一行开始，并在前后添加额外的空白。
常见的块级元素有：
<div>：定义文档中的一个区域或节。
<p>：定义段落。
<h1> 到 <h6>：定义标题。
<ul>、<ol>、<li>：定义无序列表、有序列表及列表项等。
内联元素
内联元素通常在同一行上显示，并且仅占据所需的空间，不会强制换行。常见的内联元素有：<span>：用于为文本或其他内联元素设置样式。<a>：定义超链接。<img>：用于在页面中嵌入图像。<strong>、<em>：分别用于强调和斜体显示文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级元素和内联元素示例</title> </head> <body> <!-- 块级元素 --> <div style="background: red;">This is a block-level element.</div> <p>This is another block-level element.</p> <!-- 内联元素 --> <span style="background: green;">This is an inline element.</span> <a href="#">This is another inline element (link).</a> </body> </html>
行内块元素
还有一种混合型“行内块元素”，和其他元素在一行，但元素的高、宽、外边距都可以设置，如button、img、input。通过CSS样式的display属性可以更改元素的类型，如可设置<a>为一个块元素布局display: block;
总结：
了解HTML中的块级元素和内联元素对于构建具有良好结构和布局的网页至关重要。通过合理地使用块级元素和内联元素，可以更好地控制页面的外观和行为，提升用户体验。
