html行内元素和块状元素有哪些
2026-10-17 10:44:40
HTML行内元素和块状元素分类如下：
一、行内元素（Inline Elements）
行内元素默认的display属性值为inline，不会独占一行，相邻元素会排列在同一行直到空间不足时换行。其宽度由内容决定，设置宽度、高度、垂直方向边距（margin/padding-top/bottom）无效，但水平方向边距有效。常见行内元素包括：
基础标签：a（锚点）、span（通用内联容器）、strong（粗体强调）、em（斜体强调）、br（换行）、img（图片）、input（输入框）、textarea（多行文本框）、code（代码片段）、i（斜体）、b（粗体，不推荐）、u（下划线）、s（删除线，不推荐）。
语义化标签：cite（引用）、q（短引用）、abbr（缩写）、dfn（定义术语）、kbd（键盘输入）、var（变量）、sub（下标）、sup（上标）、time（时间，HTML5新增）。
表单相关：label（表单标签）、select（下拉选择框）、button（按钮，实际为可变元素，但常表现为行内）。
二、块状元素（Block-level Elements）
块状元素默认的display属性值为block，独占一行，宽度自动填满父元素，可设置宽度、高度及所有方向的边距。常见块状元素包括：
结构标签：div（通用块容器）、p（段落）、h1-h6（标题）、hr（水平分隔线）、blockquote（块级引用）、pre（格式化文本）。
列表相关：ul（无序列表）、ol（有序列表）、dl（定义列表）、li（列表项）。
表单容器：form（表单）、fieldset（表单分组）、table（表格，实际为特殊块级元素）。
语义化标签：address（联系信息）、article（文章内容，HTML5新增）、section（文档分区，HTML5新增）、nav（导航栏，HTML5新增）、footer（页脚，HTML5新增）。
三、特殊说明
- 可变元素：如button、iframe、object等，其显示类型由上下文决定，可能表现为行内或块级。
- HTML5新增元素：多数语义化标签（如article、section）默认是块级，但需注意浏览器兼容性。
- 废弃标签：font、center、big等因不符合现代标准已不推荐使用，建议用CSS替代。
核心区别总结：块级元素控制布局结构，行内元素处理文本级内容，合理使用可提升代码可读性与样式控制灵活性。
热门标签
