无序列表(ul)和列表项(li)是HTML中最常用的标签组合之一,用于创建项目符号列表。本教程将展示它们的各种用法。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>西兰花</li>
<li>土豆</li>
</ul>
</li>
</ul>
<ul style="list-style-type: square;">
<li style="color: red;">红色项目</li>
<li style="color: blue;">蓝色项目</li>
<li style="color: green;">绿色项目</li>
</ul>
<ul>
<li><strong>粗体文本</strong></li>
<li><a href="#">链接项目</a></li>
<li><img src="placeholder.png" alt="示例图片"> 带图片的项目</li>
<li><input type="checkbox"> 带复选框的项目</li>
</ul>
<ul style="list-style-type: none; padding: 0; display: flex; gap: 15px;">
<li><a href="#" style="text-decoration: none;">首页</a></li>
<li><a href="#" style="text-decoration: none;">产品</a></li>
<li><a href="#" style="text-decoration: none;">服务</a></li>
<li><a href="#" style="text-decoration: none;">关于我们</a></li>
</ul>
<ul style="list-style-image: url('bullet.png');">
<li>自定义项目符号1</li>
<li>自定义项目符号2</li>
<li>自定义项目符号3</li>
</ul>
ul
代表"无序列表"(Unordered List)li
代表"列表项"(List Item)list-style-type
属性更改项目符号样式通过以上示例,你可以看到ul
和li
标签的强大功能和灵活性。它们是构建网站导航、内容列表和各种菜单的基础。