标签元素
块级元素
（Block-Level Elements）
块级元素默认占满整行，可以设置宽高、内外边距，前后会换行。
| 标签 |
说明 |
| < div> |
通用块级容器 |
| < p> |
段落 |
| < h1> ~ < h6> |
标题 |
| < ul>, < ol>, < li> |
无序列表、有序列表、列表项 |
| < table>, < tr>, < td>, < th> |
表格相关 |
| < form> |
表单 |
| < section>, < article>, < header>, < footer> |
HTML5 语义化标签 |
| < nav> |
导航栏 |
| < aside> |
侧边栏 |
| < main> |
主要内容区 |
| < figure>, < figcaption> |
图片和标题组合 |
| < blockquote> |
块级引用 |
| < pre> |
预格式化文本（保留空格和换行） |
| < hr> |
水平分割线 |
行内元素
（Inline Elements）
行内元素不会换行，宽度由内容决定，**不能直接设置宽高**（除非转 display: inline-block 或 block）。
| 标签 |
说明 |
| < span> |
通用行内容器 |
| < a> |
超链接 |
| < strong>, < b> |
加粗（语义化 vs 纯样式） |
| < em>, < i> |
斜体（语义化 vs 纯样式） |
| < img> |
图片（特殊，可设宽高但仍是行内） |
| < input>, < button>, < select>, < textarea> |
表格控件 |
| < label> |
表单标签 |
| < code> |
行内代码 |
| < small> |
小号文本 |
| < sup>, < sub> |
上标 / 下标 |
| < time> |
时间 |
| < mark> |
高亮文本 |
| < abbr> |
缩写 |
| < br> |
换行 |
| < q> |
短引用 |
行内块元素
（Inline-Block Elements）
它们默认是 display: inline-block，可以设置宽高，但不会自动换行。
| 标签 |
说明 |
| < img> |
图片 |
| < input> |
输入框 |
| < button> |
按钮 |
| < select> |
下拉框 |
| < textarea> |
多行文本框 |
| < progress> |
进度条 |
| < meter> |
度量条 |
HTML5 新增语义化标签
这些标签默认是块级元素，用于更清晰的页面结构。
| 标签 |
说明 |
| < header> |
页眉 |
| < footer> |
页脚 |
| < nav> |
导航栏 |
| < section> |
内容分区 |
| < article> |
独立文章 |
| < aside> |
侧边栏 |
| < main> |
主体内容 |
| < figure> |
图片/图表 |
| < figcaption> |
图表标题 |
| < time> |
时间日期 |
| < mark> |
高亮文本 |
| < details> |
可折叠内容 |
| < summary> < details> |
的标题 |
如何判断一个元素是行内还是块级？
可以使用 getComputedStyle() 检查 display 属性：
javascript
const element = document.querySelector("span");
console.log(window.getComputedStyle(element).display); // "inline"
总结
掌握这些分类有助于更好地控制页面布局和样式
| 类型 |
说明 |
标签 |
| 块级元素 |
独占一行，可设宽高 |
< div>, < p>, < h1>～< h6>, < ul>, < li>, < section> |
| 行内元素 |
不换行，宽度由内容决定 |
< span>, < a>, < strong>, < img>, < input> |
| 行内块元素 |
不换行，但可设宽高 |
< img>, < input>, < button> |
| HTML5 语义化标签 |
增强可读性，默认块级 |
< header>, < footer>, < nav>, < article> |