在html中创建无序列表需使用<ul>作为容器标签，每个列表项用<li>标签定义；2. 改变项目符号样式需通过css的list-style-type属性设置，可选值包括circle、square、none等，并建议同时调整padding-left以消除默认缩进；3. 无序列表支持嵌套，可在<li>内部插入新的<ul>来创建多级列表，实现清晰的层级结构；4. 常见误区包括在<ul>和<li>之间插入非<li>元素（如<div>），滥用列表实现缩进效果，以及忽略语义化和浏览器默认样式差异，应始终确保结构合规并用css统一控制样式，最终形成可访问、易维护的代码结构。
在HTML里创建无序列表，核心就是用
<ul>
<li>
<ul>
<li>
<li>
<li>
<ul>
创建无序列表其实比想象中要直接得多。你只需要先写一个
<ul>
<li>
<li>
举个例子，假设你想列出你周末想做的几件事：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>去超市买菜</li> <li>看一部新上映的电影</li> <li>整理书房</li> <li>给朋友打电话聊聊近况</li> </ul>
当你把这段代码放到HTML文件里并在浏览器中打开时，你就会看到一个清晰的列表，每个项目前面都有一个圆点。这真的是HTML里最基础也最常用的结构之一了，它让信息呈现变得非常有条理，一眼就能看明白。我个人觉得，很多时候，一个设计精良的列表比一大段文字更能有效传达信息。
虽然默认的实心圆点很经典，但有时候我们可能想让列表看起来更独特一点，或者为了设计风格统一，需要改变它的项目符号。这通常不是通过HTML标签本身来完成的，而是通过CSS。毕竟，HTML负责结构，CSS负责样式。
要改变项目符号的样式，你主要会用到CSS的
list-style-type
比如，如果你想把默认的实心圆改成空心圆：
<style>
ul {
list-style-type: circle; /* 将实心圆改为空心圆 */
}
</style>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>果汁</li>
</ul>或者，如果你想用方块：
<style>
ul {
list-style-type: square; /* 使用方块作为项目符号 */
}
</style>
<ul>
<li>前端开发</li>
<li>后端开发</li>
<li>数据库管理</li>
</ul>有时候，你可能根本不想要任何项目符号，只是想让内容以列表的形式排列，但没有视觉上的标记。这时候，
list-style-type: none;
<style>
.no-bullet-list {
list-style-type: none; /* 移除所有项目符号 */
padding-left: 0; /* 通常还需要移除默认的左内边距 */
}
</style>
<ul class="no-bullet-list">
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
<li>联系方式</li>
</ul>值得注意的是，当
list-style-type: none;
padding-left: 0;
padding-left
绝对可以！无序列表的一个强大之处就在于它的嵌套能力。你可以很轻松地创建多级列表，这对于展示层级关系清晰的信息非常有用，比如一个网站的目录结构、一份复杂的报告大纲，或者一个食谱的步骤分解。
实现嵌套列表的方法很简单：你只需要在任何一个
<li>
<ul>
<ol>
想象一下你正在规划一个旅行，想列出目的地和每个目的地的具体活动：
<ul>
<li>亚洲行
<ul>
<li>日本
<ul>
<li>东京
<ul>
<li>参观浅草寺</li>
<li>品尝寿司</li>
</ul>
</li>
<li>京都
<ul>
<li>体验和服</li>
<li>游览清水寺</li>
</ul>
</li>
</ul>
</li>
<li>韩国
<ul>
<li>首尔</li>
<li>釜山</li>
</ul>
</li>
</ul>
</li>
<li>欧洲行
<ul>
<li>法国</li>
<li>意大利</li>
</ul>
</li>
</ul>这段代码会生成一个多层级的列表。浏览器通常会为不同层级的列表自动应用不同的项目符号样式（比如第一级是实心圆，第二级是空心圆，第三级是方块），并且会有相应的缩进，这让层级关系一目了然。在我看来，这种嵌套结构是HTML语义化的一个绝佳体现，它不仅提供了视觉上的组织，也为屏幕阅读器等辅助技术提供了清晰的结构信息。如果只是用
<div>
<span>
<ul>
<li>
虽然
<ul>
<li>
一个非常普遍的错误是不将 <li>
<ul>
<ul>
<li>
<div>
<!-- 错误示例 -->
<ul>
<div>
<li>项目一</li>
</div>
<li>项目二</li>
</ul>这种做法是不符合HTML规范的。
<ul>
<li>
另一个需要注意的点是语义化。
<ul>
<li>
margin
padding
避免创建空的 <li>
<li>
最后，关于样式控制。虽然
<ul>
<li>
list-style-type
padding
margin
<ul>
<li>
以上就是如何在HTML中创建无序列表？ul和li标签怎么用？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
726
收藏
