【HTML】列表标签

`moon`晓龙

已于 2023-08-22 21:26:00 修改

阅读量203

点赞数

分类专栏： html 文章标签： html5 html

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

本文链接：https://blog.csdn.net/MY9_19/article/details/115409069

版权

html 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

列表标签

文章目录

- 列表标签

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>

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

`moon`晓龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】列表标签

列表标签文章目录列表标签1、有序列表(Order list)2、无序列表(Unordered List)3、自定义列表(definition list)1、有序列表(Order list)标签：ol>li*num属性：type设置符号的类型，默认是1，可取值为 a A i Istart设置是重第几个数字开始，取值为数字reversed倒序，当前属性的参数等于属性值，可以不写参数Html示例：<body><!-- 设置符号为大写字母，
复制链接

扫一扫

专栏目录