请问HTML中内联元素和块级元素有什么区别吗?

html-css017

请问HTML中内联元素和块级元素有什么区别吗?,第1张

一、显示方式不同

1、块级元素:是块元素都从新行开始,相邻的块级元素将会在不同行显示。

2、内联元素:一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。

二、高度不同

1、块级元素:高度,行高以及外边距和内边距都可控制,以容纳内联元素和其他块元素。

2、内联元素:高度、行高和顶以及底边距都不可改变。

三、宽度设置不同

1、块级元素:宽度缺省是它的容器的100%,除非设定一个宽度。

2、内联元素:宽度就是它的文字或图片的宽度,不可改变。

参考资料来源:百度百科-内联元素

参考资料来源:百度百科-块元素

内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念。内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。

特点

1、和其他元素都在一行上;

2、高度、行高和顶以及底边距都不可改变;

3、宽度就是它的文字或图片的宽度,不可改变。

总的来说,内联元素一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、br”等。

概览

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 – 定义变量

HTML提供了内联元素用于识别文本的含义、控制文本排列的顺序、向文档插入额外的内容,例如图片、控制元素。内联元素本身就是内容。

语义元素(semantic element)用于识别内容的含义。HTML为每个语义化的内联元素都赋予了默认的样式。<span>没有默认样式和任何含义,所以可把它用于任何目的。<strong>默认是粗体显示。下面几个元素默认都是斜体:<em>、<dfn>、<cite>和<var>.接下来几个元素的默认样式为等宽字体:<code>、<kbd>和<samp>.默认为下划线的有:<a>、<acronym>和<abbr>.IE 6不支持<abbr>