块级与行内元素

HTML 中的元素按照默认显示方式分为两类：块级元素（block）和行内元素（inline）。理解它们的行为对于布局设计和结构编写至关重要。

块级元素

块级元素通常作为页面的结构组件，会独占一整行，其前后会自动换行。它们可以包含其他块级元素或行内元素。

常见块级元素：

• <div>：通用容器
• <p>：段落
• <h1> ~ <h6>：标题
• <ul> / <ol>：无序/有序列表
• <li>：列表项
• <section>、<article>、<nav>、<header> 等语义块

示例：

<div>
  <h2>标题</h2>
  <p>这是一个段落。</p>
</div>

行内元素

行内元素不会独占一行，多个行内元素会排在同一行中，通常用于包裹文字或嵌套在块级元素中。它们一般不用于构建布局结构。

常见行内元素：

• <span>：通用行内容器
• <a>：超链接
• <strong> / <em>：强调文本
• <img>：图像
• <input>、<label>：表单小组件

示例：

<p>欢迎访问 <a href="#">我的网站</a>！</p>

总结对比

合理区分和使用块级与行内元素，是编写结构清晰、样式规范的 HTML 页面基础。