【HTML教程】HTML的ul标签|html入门知识
【HTML教程】HTML的ul标签|html入门知识
攻城狮与产品喵
发布于 2025-07-30 14:12:42
发布于 2025-07-30 14:12:42
——致力做企业用得上的平台； ——开发企业节省成本的系统；
导读
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，是我们在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就 查询/搜索 一下，实践出真章，做多了自然就熟悉了！
——龙腾飞网络科技-小吴
#ul标签 #HTML教程 #HTML标签 #html入门知识
【定义和用法】
ul标签定义无序(带项目符号)列表。
请使用 ul标签和 li标签来创建无序列表。
提示：请使用 CSS 来设置列表样式。
提示：对于有序列表，请使用 ol标签。
【实例】
例子 1
一个无序的 HTML 列表：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul>例子 2
设置不同的列表样式类型(使用 CSS)：
<ul style="list-style-type:circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul><ul style="list-style-type:disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul><ul style="list-style-type:square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul>例子 3
在列表中扩大和缩小行高(使用 CSS)
<ul style="line-height:180%">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul><ul style="line-height:80%">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li></ul>例子 4
在列表中创建另一个列表(嵌套列表)：
<ul>
<li>咖啡</li>
<li>茶 <ul>
<li>普洱</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li></ul>例子 5
创建更复杂的嵌套列表：
<ul>
<li>咖啡</li>
<li>茶 <ul>
<li>普洱</li>
<li>绿茶 <ul>
<li>碧螺春</li>
<li>龙井</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li></ul>【默认的 CSS 设置】
大多数浏览器将使用以下默认值显示 ul元素：
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
