【HTML】秒懂内联元素和块级元素的区别

内联元素和块级元素

1.内联元素（inline）
- （一）内联元素的概念
- （二）内联元素的特性
- （三）HTML标签中常见的内联元素
2.块级元素（block）
- （一）块级元素的概念
- （二）块级元素的特性
- （三）HTML标签中常见的块级元素

1.内联元素（inline）

（一）内联元素的概念

内联元素(html规范中的概念)英文:inline element，其中文叫法有多种，如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

（二）内联元素的特性

①和相邻的内联元素在同一行;
②宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变;
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

（三）HTML标签中常见的内联元素

1 a – 锚点

2 abbr – 缩写

3 acronym – 首字母缩略词

4 b – 粗体

5 bdo – bidi override – 用来覆盖默认的文本方向

6 big – 大字体

7 br – 换行

8 cite – 引用

9 code – 计算机代码(在引用源码的时候需要)

10 dfn – 定义字段

11 em – 强调

12 font – 字体设定(不推荐)

13 i– 斜体

14 img – 图片

15 input – 输入框

16 kbd – 定义键盘文本

17 label – 表格标签

18 q – 短引用

19 s – 中划线(不推荐)

20 samp – 定义范例计算机代码

21 select – 项目选择

22 small – 小字体文本

23 span – 常用内联容器，定义文本内区块

24 strike – 中划线

25 strong – 粗体强调

26 sub – 下标

27 sup – 上标

28 textarea– 多行文本输入框

29 tt – 电传文本

30 u – 下划线

31 var – 定义变量

2.块级元素（block）

（一）块级元素的概念

块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。

（二）块级元素的特性

①总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

（三）HTML标签中常见的块级元素

1 address - 地址

2 blockquote - 块引用

3 center - 居中对齐块

4 dir - 目录列表

5 div - 常用块级容器，也是css layout的主要标签

6 dl - 定义列表

7 fieldset - form控制组

8 form - 交互表单

9 h1 - 大标题

10 h2 - 副标题

11 h3 - 3级标题

12 h4 - 4级标题

13 h5 - 5级标题

14 h6 - 6级标题

15 hr - 水平分隔线

16 isindex - input prompt

17 menu - 菜单列表

18 noframes - frames可选内容，(对于不支持frame的浏览器显示此区块内容)

19 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

20 ol - 排序表单

21 p - 段落

22 pre - 格式化文本

23 table - 表格

24 ul - 非排序列表(无序列表)