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是将对象呈递为内联对象,但是对象的内容作为块对象呈递。可以设置宽度和高度的块元素。