HTML的块级元素与内联元素

HTML的块级元素与内联元素

一、块级元素与内联元素的区别

      块级元素：block level element

                 块级元素在浏览器显示时，通常会以新的一行开始和结束。可以设置宽度、高度、内外边距 。

       内联元素：inlink element

                 内联元素在显示时通常不会以新的一行开始。设置宽度、高度、内外边距无效，设置line-height 有效。

二、块级元素

       

div	定义文档的分布
h1 h2 h3 h4 h5 h6	定义标题
ul ol dl	定义列表（无序or有序）
li dt dd	定义列表项目
p  menu	定义段落 菜单列表

table	定义HTML表格
th td tr tbody tfoot thead caption	定义表格的相关属性
pre	定义预格式化的文本
legend	元素为 fieldset 元素定义标题
fieldset	定义一个框架集

address	定义地址
form	创建HTML标签
noscript	定义在脚本未被执行时的替代内容
noframes	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
hr	水平分割线

三、内联元素

a	标签定义锚
img	网页中嵌入图片
br	换行
em	定义强调内容
b big	字体加粗

input	输入框
label	为 input 元素定义标注
textarea radio	多行文本输入控件 单项选择控件
select	创建单选或者多选菜单
span	组合文档中的行内元素
strong	语气更强的强调语气
sub	定义上标文本
sup	定义下标文本

四、两者相互转换

      行内转换成块级：display:block;

      块级转换成行内：display:inline;

五、block、inline及inline-block的区别

     display:block是将元素显示为块级元素。可以设置高度，顶边距及底边距的块元素。

     display:inline是将元素显示为行内元素。不可以设置高度和宽度的行元素。

     display:inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递。可以设置宽度和高度的块元素。