列表嵌套type属性默认值

本文详细解析了HTML中无序列表和有序列表的嵌套规则,包括不同级别的默认type属性值变化。同时,介绍了在列表标签配对不当时可能出现的效果,如头标签配对失败、尾标签配对失败以及标签混乱的情况,并展示了相应的代码示例和运行效果。
摘要由CSDN通过智能技术生成

首先我们知道无序列表的type属性默认值是实心圆;有序列表的type属性默认值是数字1。但其实在列表嵌套中不是这样的。

一、无序列表嵌套

第一级:type属性默认值为"disc"实心圆;

第二级:type属性默认值为"circle"空心圆;

第三级之后(包括第三级):type属性默认值为"square"正方形。

代码示例:

运行效果:

从代码可以看出,我并没有去设置type属性值,但无序列表中type默认值不一定为"disc"实心圆。

若第n级的type属性值设置为"1"或其他属性值(有序、无序列表嵌套),也不会影响第n级以外的tpye默认值(该是第几级还是第几级,type默认值不变)。例如,我将第二级无序列表改成有序列表,且不设置type属性值。效果如下:

 

二、有序列表嵌套

type属性默认值为数字"1",无论嵌套多少级都一样。

三、列表标签混乱(缺失)

首先我们写代码时,一定要注意代码规范!但如果我们遇到有人的代码不规范,我们也要能够分析出该代码的产生效果。下面是列表嵌套时,产生的效果分析。

列表嵌套标签配对顺序:从里到外,从头到尾!

情况一:头标签配对失败,也就是尾标签丢失。那么则会在下一配对成功的标签对的尾标签前隐藏了一个相对应丢失的尾标签。

示例1:

 

效果1:

情况二:尾标签配对失败,也就是缺少头标签。那么这个尾标签直接失效,不会产生任何效果。因为标签配对顺序是从头到尾开始配对的,头标签配对时忽略了这个不适配的尾标签,而后面的标签又会继续往下配对。所以配对失败的尾标签,则直接失效。

示例2:

 效果2:

情况三:若标签混乱,从里到外配对,到最后有多余的头标签。那么相当于列表的末尾会有一个隐藏的尾标签。与情况一相似。

示例3:

 效果3:

 

情况四:若标签混乱,从里到外配对,到最后有多余的尾标签。那么这个尾标签与情况二相似,也是直接失效了。这个失效的尾标签前还会留有多余的<li></li>标签,这些<li>标签单独出现时也是有type默认值的,且无论前面列表的最后一个标签对是有序还是无序,它的type默认值都是"disc"实心圆。而且多余的这些<li>标签是与<p>标签对齐的,并不是接在列表后面。

示例4:

效果4:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值