HTML元素分类简述
一、块级元素 (Block-level element)
定义:默认情况下,独占一行的元素就是块级元素。
特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。
块级元素: address - 地址 blockquote - 块引用 center - 举中对齐块(html5取消了该标签) div - 常用块级容易,也是css layout的主要标签 dl - 定义列表 fieldset - form控制组
form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容) noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 排序表单 ul - 非排序列表(无序列表)
p - 段落 pre - 格式化文本 table - 表格
二、内联元素 (Inline element)
定义:内联元素,也叫行内元素。默认情况下,和其他元素在同一行上,并且元素的高度、宽度等不能设置的元素就是内联元素。
特点:
- 和其他元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置;
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
- 在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话,因为我认为块级元素从表现上更像“行”显示,而内联元素更像是“文本”的显示属性。这其中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。
内联元素:a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐)
i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本
span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量
三、顶级元素 (Top-level element)
属于高级块级元素
常见的顶级元素: html, body, frameset