在HTML中，元素可以分为两大类：块级元素（block-level elements）和行内元素（inline elements）。这两种类型的元素在网页布局和呈现中扮演着不同的角色。
块级元素（Block-level Elements）
-
定义：块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
-
特点：
- 自动换行：每个块级元素都在其前后生成换行。
- 可设置宽度和高度：可以通过CSS设置它们的宽度和高度。
- 通常用于布局和分组其他元素。
-
常见的块级元素：
<div>：通用容器<h1>-<h6>：标题元素<p>：段落<ul>、<ol>：无序和有序列表<li>：列表项<header>、<footer>、<section>、<article>、<nav>：HTML5语义元素
行内元素（Inline Elements）
-
定义：行内元素不会在新的一行开始，而是与其他行内元素和文本在同一行内显示。它们只占据其内容所需的宽度。
-
特点：
- 不会产生换行：行内元素不会在其前后产生换行。
- 不能设置宽度和高度：行内元素的宽度和高度通常由其内容决定，无法通过CSS设置。
- 通常用于修饰文本或小型元素。
-
常见的行内元素：
<span>：通用的行内容器<a>：链接<strong>：强调文本（通常为粗体）<em>：强调文本（通常为斜体）<img>：图像<br>：换行<code>：代码片段
代码示例：
html
<!DOCTYPE html>
<html>
<head>
<title>块级元素与行内元素</title>
<style>
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightgreen;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div class="block">
这是一个块级元素（div）。
<span class="inline">这是一个行内元素（span）。</span>
继续在同一行。
</div>
<p class="block">这是另一个块级元素（p）。</p>
<a href="#" class="inline">这是一个行内链接（a）。</a>
</body>
</html>