主题
块级与行内元素
HTML 中的元素按照默认显示方式分为两类:块级元素(block)和行内元素(inline)。理解它们的行为对于布局设计和结构编写至关重要。
块级元素
块级元素通常作为页面的结构组件,会独占一整行,其前后会自动换行。它们可以包含其他块级元素或行内元素。
常见块级元素:
<div>
:通用容器<p>
:段落<h1>
~<h6>
:标题<ul>
/<ol>
:无序/有序列表<li>
:列表项<section>
、<article>
、<nav>
、<header>
等语义块
示例:
html
<div>
<h2>标题</h2>
<p>这是一个段落。</p>
</div>
行内元素
行内元素不会独占一行,多个行内元素会排在同一行中,通常用于包裹文字或嵌套在块级元素中。它们一般不用于构建布局结构。
常见行内元素:
<span>
:通用行内容器<a>
:超链接<strong>
/<em>
:强调文本<img>
:图像<input>
、<label>
:表单小组件
示例:
html
<p>欢迎访问 <a href="#">我的网站</a>!</p>
总结对比
特性 | 块级元素 | 行内元素 |
---|---|---|
是否换行 | 是 | 否 |
常用于 | 页面结构布局 | 文本样式或内嵌内容 |
是否可包含块 | 是 | 否(一般不推荐) |
合理区分和使用块级与行内元素,是编写结构清晰、样式规范的 HTML 页面基础。