学习了前端才知道,原来我们使用的标签也是有分类的呢。具体是分为块/内嵌/内嵌块,下面我们来看看块/内嵌/内嵌块的标签都有些什么各自的特点。
首先是块标签
块:
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度,宽度撑满父级的空间
其次是内嵌标签
内嵌:
1. 可以在一行显示
2. 不支持宽高,上下的margin,上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小,可以控制空格大小)
4. 宽度由内容撑开
还有我们的内嵌块标签呢,内嵌块标签是集合了块标签的支持宽高等样式,不设置宽高由内容撑开,也支持内嵌的独占一行特点,代码换行会解析一个空格。个人觉得使用内嵌块来布局页面,其实是挺方便的额。只是内嵌块的元素在一行显示,两个元素之间是会有一些间隙,这些间隙需要在使用时解决一下的。
内嵌块:
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候,宽度由内容撑开
当然,这三种类型的元素并不是只能用作被初始定义的类型,我们还可以通过 display 这一样式来根据自我的要求来转换的呢。
常用的块标签: div、h1-h6、header、nav、section、article、aside、footer、dl、dt、dd、ol、ul、li、p、form
常用的内嵌标签:a、span、strong、mark、time、em、label
常用的内嵌块标签: img、input、buttom、textarea、select
标签嵌套规范:
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul li
ul下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
ol li
ol下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
dl dt dd
dl下只能包含dt和dd,dt,dd的父级也只能是 dl,当然dd中可以随意放置
5. 一般建议,块和块并列,内嵌和内嵌并列