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

zhezhongyun 2024-12-24 16:55 59 浏览

列表标签有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实现动态的菜单

HTML常用标签

上一篇：HTML5新增了哪些结构标签? html结构标签有哪些
下一篇：「测试开发全栈-HTML」(18) label标签的使用

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

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

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）