HTML中元素类型转换的属性,html中标签元素的三种类型

一、html的标签元素可以分为3类：

块状元素(块元素)

行内元素(内联元素)

行内块状元素(可变元素)

1、块状元素：

块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局(大结构)的搭建。

布局上：独占一行，可以容纳内联元素和其他块元素

样式上：设置width、height有效，可以设置盒子模型的相关css属性，

在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

在不设置高度的情况下，块级元素的高度是它本身内容的高度

常见块级元素

2、行内元素：

内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标(小结构)的应用。

布局上：和其他元素从左到右在一行排列，只能容纳文本或者其他内联元素(不要在内联元素中嵌套块级元素)

样式上：不能直接控制width、height，只能使用盒模型部分属性，如padding、line_height、margin-left、margin-right。

内联元素的宽高是由本身内容的大小决定(文字、图标等)

常见行内元素

3、 行内块状元素：尽可能少的占用横向空间，和其他元素都在一行上；可以设置width、height、margin、padding等盒模型相关属性。

*常用：img、input、td。

二、元素之间的转化:

display:block；(将元素变为块级元素)

display:inline；  (将元素变为行级元素)

display：inline-block；(将元素变为行级块元素)

三、其他

a. 块元素特立独行；内联元素随波逐流。

b.块元素通常用作网页的主要构建模块，而内联元素常用来标记小段内容(修饰文本)

c.设计一个页面时，一般从较大的块开始 ，然后完善页面的时候再加入内联元素。

d. 对标签能够清晰的分类，掌握标签的特性，在选择标签时避免犹豫不决，提高布局效率。

四、html5新特性

HTML5新结构标签

结构标签

HTML5-新的属性语法

属性语法

HTML5图形

图形标签

HTML5音视频标签

音视频标签

对本地离线存储的更好的支持

新的表单控件，比如 calendar、date、time、email、url、search

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;

如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素