10 HTML行内元素和块级元素
一、块级元素
Block-Level Elements ：
- 默认独占一行
- 宽度默认撑满父容器
- 可包含：行内元素或其他块级元素
- 常用于页面结构和布局
常见块级元素：
| 标签 | 用途 |
|---|---|
<div> | 通用容器，常用于布局 |
<p> | 段落 |
<h1>~<h6> | 标题，从最大到最小 |
<ul> / <ol> / <li> | 无序 / 有序列表及项 |
<table> | 表格 |
<form> | 表单区域 |
<header> / <footer> / <section> / <article> / <nav> | HTML5语义结构标签 |
二、行内元素
Inline Elements ：
- 不换行，多个行内元素排在同一行
- 宽度随内容而变
- 只能包含文本或其他行内元素
- 常用于文字修饰或局部内容展示
常见行内元素：
| 标签 | 用途 |
|---|---|
<span> | 通用行内容器 |
<a> | 超链接 |
<img> | 图片 |
<strong> / <b> | 加粗文本 |
<em> / <i> | 斜体文本 |
<u> | 下划线文本 |
<input> / <label> / <select> / <textarea> | 表单元素 |
<code> / <kbd> / <mark> / <sub> / <sup> | 特殊文本样式 |
三、对比
| 属性 | 块级元素 | 行内元素 |
|---|---|---|
| 是否换行 | 是 | 否 |
| 默认宽度 | 占满整行 | 内容宽度 |
| 包含内容 | 可含块级和行内 | 仅含行内或文本 |
| 主要作用 | 页面结构 | 文本修饰 |
四、块级和行内转换
通过 display 属性转换：
div {
display: inline; /* 块级变行内 */
}
span {
display: block; /* 行内变块级 */
}