HTML 元素分类

March 18, 2026

HTML 元素分类

块级元素（Block）

独占一行，可设置宽高、margin、padding。

<div> <p> <h1>~<h6> <ul> <ol> <li> <table> <form> <header> <footer> <section> <article> <nav> <aside> <main> <blockquote> <pre> <hr> <fieldset> <figcaption> <figure> <details> <summary>

内联元素（Inline）

不独占一行，设置 width/height 无效，垂直方向 margin/padding 不影响布局。

<span> <a> <strong> <em> <b> <i> <u> <small> <sub> <sup> <label> <code> <abbr> <cite> <br> <time> <mark>

行内替换元素（Inline Replaced） — 可设置宽高的内联元素

虽然是内联，但可以设置 width/height，因为它们有"内在尺寸"（由外部资源或自身属性决定）。

元素	说明
`<img>`	图片
`<input>`	表单输入
`<textarea>`	多行文本框
`<select>`	下拉选择
`<button>`	按钮
`<video>`	视频
`<audio>`	音频（有 controls 时）
`<canvas>`	画布
`<svg>`	矢量图
`<iframe>`	内嵌框架
`<object>` / `<embed>`	嵌入对象

快速记忆口诀

替换元素 = 内容由外部决定的元素（图片来自 src、输入框由用户填、canvas 由 JS 画）→ 浏览器需要知道它的尺寸来预留空间 → 所以允许设 width/height。

补充：`display` 可以改变一切

/* 任何元素都可以通过 display 改变行为 */
span {
  display: block;
} /* 内联 → 块级 */
div {
  display: inline;
} /* 块级 → 内联 */
span {
  display: inline-block;
} /* 内联但可设宽高 */

inline-block 是最常用的折中方案：不独占一行，但可以设置宽高。Tailwind 中对应 inline-block 类。

HTML 元素分类