html-列表标签
程序员文章站
2022-03-29 20:09:52
列表标签 比如现在显示这样的效果 山水集团 财务部 学工部 人事部
列表标签
比如现在显示这样的效果
山水集团
财务部
学工部
人事部
<dl></dl> ： 表示列表的范围
在dl里面 <dt></dt>：上层内容（没有缩进）
在dl里面 <dd></dd>: 下层内容（有缩进）
代码：
<dl>
<dt>山水集团</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
想要在页面上显示这样的内容（有序列表）
1.财务部
2.学工部
3.人事部
a.财务部
b.学工部
c.人事部
i.财务部
ii.学工部
iii.人事部
<ol></ol> ： 有序列表的范围
属性 type : 设置排序的方式 1(默认) a i
在ol标签里面 <li>具体内容</li>
代码：
<ol type="a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
想要在页面上显示这样的效果（无序列表）
特殊符号（方框） 财务部
特殊符号（方框） 人事部
<ul></ul>：表示无序列表的范围
属性： type：空心圆（circle）、实心圆（disc）、实心方块（square）、默认是disc
在ul里面 <li></li>
代码
<ul type="square">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
完整代码：
<html>
<head>
<title>world</title>
</head>
<body>
<!-- 演示列表标签 -->
<dl>
<dt>山水集团</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
<hr/>
<!-- 有序列表 -->
<ol type="a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
<hr/>
<!--无序列表-->
<ul type="square">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
</body>
</html>