html标签参考手册
HTML中标签元素一般会分成三种不同类型,分别为:块状元素,行内元素,行内块状元素。
块状元素(block)
特点:
1、独占一行,每一个块状元素都会从新的一行重新开始,从上到下排布
2、可以直接控制宽度、高度以及盒子模型的相关css属性(元素的高度、宽度、行高以及顶和底边距都可设置)
3、在不设置宽度、高度的情况下,块级元素的宽度是它父级元素的宽度,高度是它本身内容的高度
因为这些特点,我们通常会使用块状元素来进行大布局(大结构)的搭建。
常用的块状元素 :
1、普通元素:
div(常用块状容器,也是css layout的主要标签)、p(段落)、hr(水平分隔线)、table( 表格)、form(交互表单)
2、标题元素:
h1(大标题)、h2(副标题)、h3(三级标题)-- h6(六级标题)
3、列表元素:
menu(菜单列表)、ol(有序列表)、ul(无序列表)、li(列表项)、dl(定义列表)、dt(定义术语)、dd(定义描述)
行内元素(inline)
特点:
1、和其他内联元素从左到右在一行显示
2、不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
3、内联元素的宽高是由本身内容的大小决定(文字、图片等)
4、内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
因为这些特点,我们通常会使用行内元素来进行文字、小图标(小结构)的搭建。
常用的行内元素 :
1、普通元素标签:
span(常用内联容器,定义文本内区块),a(锚点,链接),img(引入图片),br(强制换行),sub(下标),sup(上标)
2、文本文字修饰标签:
b(加粗),strong(加粗强调),i(斜体),em(斜体强调),,big(大字体文本),small( 小字体文本),s(中划线(不推荐使用)),strike(中划线),del(文档中已被删除的文本),u(下划线)
3、表单内使用的标签元素:
textarea(多行文本输入框),input(输入框),select(下拉列表),label input(元素定义标注(标记))
行内块状元素 (inline-block)
特点:
1、和其他元素都在一行上,不会自动换行,默认排列方式为从左到右;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
行内块状元素综合了行内元素和块状元素的特点,但是各有取舍。因此行内块状元素在日常的使用中,由于其特点,使用的次数也比较多,在很多方面都很有用。