HTML-列表标签(双标签) 208

liuian 2025-04-26 19:25 95 浏览

列表标签有3种:1)dl,dd与dt(定义列表) 2)ol与li(有序列表) 3)ul与li(无序列表)前两者一般不怎么用,网页中运用最多的是第三种

1)<dl><dd>与<dt>

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家庄</dd>
        <dd>秦皇岛</dd>
        <dt>河南</dt>
        <dd>郑州</dd>
        <dd>新乡</dd>
    </dl>
</body>
</html>

2)<ol>与<li>和<ul>与<li>

它们两个都有一个type属性,用来设置序列的显示样式(在li前面显示),type的取值有:1(数字序号)A,a(大小写字母)I,i(大小写罗马数字)disc(实心原点)circle(空心圆圈)square(实心方块)

有序与无序列表的区别就是type的默认值不同而已

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家庄</dd>
        <dd>秦皇岛</dd>
        <dt>河南</dt>
        <dd>郑州</dd>
        <dd>新乡</dd>
    </dl>
    ============================================================
    <ol type="A">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
    =============================================================
    <ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

注意:设置属性时考虑浏览器的兼容性

经过测试ol与ul列表在IE浏览器(IE10)下type的这几个取值都有相应的效果;在谷歌浏览器下ol列表只对type值为1、a、A、i、I有效果;ul列表只对type值为disc、circle、square有效果;其他的如苹果,火狐等浏览器自己测试(同一浏览器的不同版本不再测试)

2.1使用嵌套的ul或ol来模拟二级菜单,以后会通过js,css或者Asp.net实现动态的菜单

ul li标签的作用