【HTML】列表标签

原创已于 2023-08-22 21:26:00 修改 · 461 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #html

于 2021-04-02 22:33:09 首次发布

html 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了HTML的有序列表(ol)、无序列表(ul)和自定义列表(dl)的用法，包括它们的标签结构、属性设置和实例展示。无论是数字编号的列表还是灵活的符号样式，或是定义主题和描述的定义列表，都是网页设计中不可或缺的内容。

列表标签

文章目录

- 列表标签

1、有序列表(Order list)

标签：ol>li*num

属性：

type 设置符号的类型，默认是1，可取值为 a A i I
start 设置是重第几个数字开始，取值为数字
reversed 倒序，当前属性的参数等于属性值，可以不写参数

Html示例：
<body>

<ol type="A" start="4" reversed>
 <li>一</li>																
 <li>二</li>																
 <li>三</li>																
	</ol>
</body>

type	设置符号的类型，默认是1，可取值为 a A i I
start	设置是重第几个数字开始，取值为数字
reversed	倒序，当前属性的参数等于属性值，可以不写参数

2、无序列表(Unordered List)

标签：ul>li*num

属性:

type类型：

注意：这里的type设置符号类型，可以在ul里面设置，也可以单独在li里面设置，在ul里面设置是这个列表全部修改，而在li里米只针对当前列

disc 默认的实心圆
circle 空心圆
square 小方块
none 不显示

disc	默认的实心圆
circle	空心圆
square	小方块
none	不显示

Html示例：

<body>
  <!-- 这是一个无序列表 -->
  <ul>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
    <li>这是第四条</li>
    <li>这是第五条</li>
	</ul>
  
  <!-- 列表一般和a标签搭配使用 -->
  <ul>
    <li><a href="https://www.baidu.com" target="_blank"><b>点击跳转百度</b></a></li>
    <li><a href="">点击跳转</a></li>
    <li><a href="">点击跳转</a></li>
    <li><a href="">点击跳转</a></li>
	</ul>
  
  <!-- 列表也可以相互嵌套 -->
 <ul>
    <li>中国
        <ul>
            <li>武汉</li>
            <li>北京
                <ul>
                    <li>东城
                        <ul>
                            <li type="circle">不知道</li>
                            <li>不知道</li>
                        </ul>
                    </li>
                    <li>西城</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>美国</li>
    <li>法国</li>
	</ul>
  <!-- 无序列表的属性 -->
  <ul type="none">
    <li type="circle"><a href="">空心圆</a></li>
    <li type="square"><a href="">小方块</a></li>
    <li type="disc"><a href="">实心圆</a></li>
    <li><a href=""></a>默认没有</li>
    <li><a href=""></a>默认没有</li>
	</ul>
</body>

无序列表和有序列表嵌套小案例

<body>
  <!-- 模拟一个树菜单 -->
	<ol>
    <li><a href="#">发展团队</a></li>
    <li><a href="#">管理团队</a>
        <ul type="circle">
            <li><a href="#">团队</a></li>
            <li><a href="#">董事会</a></li>
        </ul>
    </li>
    <li><a href="#">产品服务</a>
        <ul type="circle">
            <li><a href="#">门户网站</a></li>
            <li><a href="#">在线游戏</a></li>
            <li><a href="#">软件</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </li>
    <li><a href="#">企业文化</a>
        <ul type="circle">
            <li><a href="#">愿景</a></li>
            <li><a href="#">价值观</a></li>
        </ul>
    </li>
    <li><a href="#">社会责任</a></li>
    <li><a href="#">涉查事件</a></li>
    <li><a href="#">公司地址</a></li>
	</ol>
</body>

3、自定义列表(definition list)

标签：dl>dd*num

子标签：

dt definition term，一个主题，也可以理解为一个标签，一个自定义列表可以有多个主(标题)
dd definition description，描述，就是对一个主题进行描述，一个主题也可以有多个描述

Html示例：
<body>
<dl>
 
 <dt>主题</dt>
 
 <dd>对主题进行描述</dd>
 
 <dd>一个主题可以有多个描述</dd>
 
 
 <dt>一个dl可以有多个主题</dt>
 <dd>对主题进行描述</dd>
 <dd>一个主题可以有多个描述</dd>
</dl>
</body>