DHTML【4】--HTML

最新推荐文章于 2024-07-10 22:14:11 发布

原创最新推荐文章于 2024-07-10 22:14:11 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dhtml #管理 #标签

DHTML基础同时被 2 个专栏收录

12 篇文章

订阅专栏

【DHTML】

11 篇文章

订阅专栏

本文深入解析HTML中的Dl标签用途及应用，通过实例展示如何使用Dl、Dt、Dd、Ul、Ol和Li标签构建层次列表，实现数据分层展示，提升用户体验。

按照顺序，本节该介绍Dl标签了，在介绍Dl标签之前，我们必须要做的就是了解Dl标签是做什么用的，有什么用处，知道需求之后我们才能够更好的利用这个标签，什么样的程序算是好程序呢？只有用户觉得好的程序才是好程序，因为软件是给用户用的，所以我们要做的就是全心全意为用户服务，为用户服务就是让用操作方便。

Dl标签经常用做分级，体现一种分层关系，下层项目属于上层项目，下层项目间是平等关系，比如一个公司包含多个部门，而部门之间是平等关系。

Dl中包含Dt和Dd两个标签，Dt属于上层，Dd属于下层，但是Dd不能放入Dt中，Dt也不能放入Dd中，Dt和Dd都是Dl的子标签，利用Dt和Dd能设计出非常直观的层次列表。

Dl中还有Ul、Ol和Li三个标签，其中Li标签只能放在Ul或者Ol中，而Ul和Ol标签是设置各层列表子节点显示的格式，二者都有各自的Type属性，Ul有三个Type属性值，分别是disc、circle和square，Ol有五个Type属性值，分别是1、a、A、i、I，具体的效果，看看下面的例子大家就知道了。

例子：

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<dl>

  <ul

type="square">

  <li><dt>人事资料</dt></li>

    <ol

type="1"

start="1">

    <li><dd>员工资料</li>

    <li><dd>人事合同料</dd></li>

    <li><dd>工作经历</dd></li>

    <li><dd>员工访谈</dd></li>

    <li><dd>综合报告</dd></li>

    <li><dd>统计报表</dd></li>

    <li><dd>职称管理</dd></li>

    <li><dd>培训记录</dd></li>

    </ol>

  <li><dt>人力资源</dt></li>

    <ol

type="i"

start="2">

    <li><dd>员工技能</dd></li>

    <li><dd>招聘计划</dd></li>

    <li><dd>应聘人员</dd></li>

    <li><dd>问卷管理</dd></li>

    <li><dd>培训需求</dd></li>

    <li><dd>培训老师</dd></li>

    <li><dd>档案托管</dd></li>

    </ol>

  <li><dt>工资管理</dt></li>

    <ol

type="A">

    <li><dd>工资录入</dd></li>

    <li><dd>工资报表</dd></li>

    <li><dd>工资查询</dd></li>

    <li><dd>工资帐薄</dd></li>

    <li><dd>工资标准</dd></li>

    <li><dd>员工存支</dd></li>

    <li><dd>工分管理</dd></li>

    </ol>

  <li><dt>考勤管理源</dt></li>

    <ul

type="circle">

    <li><dd>员工排班</dd></li>

    <li><dd>考勤日帐</dd></li>

    <li><dd>考勤报表</dd></li>

    <li><dd>考勤月帐</dd></li>

    </ul>

  <li><dt>绩效考核</dt></li>

    <ul

type="disc"">

    <li><dd>考核指标</dd></li>

    <li><dd>员工考核</dd></li>

    <li><dd>批次管理</dd></li>

    <li><dd>累积分管理</dd></li>

    <li><dd>考核报表</dd></li>

    </ul>

  <li><dt>办公管理</dt></li>

    <ul

type="square">

    <li><dd>证照管理</dd></li>

    <li><dd>惩罚记录</dd></li>

    <li><dd>工伤管理</dd></li>

    <li><dd>员工福利</dd></li>

    <li><dd>奖励记录</dd></li>

    <li><dd>物品管理</dd></li>

    <li><dd>车辆管理</dd></li>

    </ul>

    </ul>

</dl>

</body>

</html>