html如何使用<ul><li>无序列表标签

发布时间：2022-03-11 10:20:53 作者：小新
来源：亿速云阅读：523

# HTML如何使用`<ul><li>`无序列表标签

## 一、无序列表基础概念

无序列表（Unordered List）是HTML中用于展示无特定顺序项目的结构化元素，由`<ul>`标签定义列表容器，`<li>`标签定义列表项。默认情况下，浏览器会为每个`<li>`项添加实心圆点符号（•）。

### 基本语法
```html
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

二、核心属性详解

1. type属性（已废弃）

虽然HTML5已废弃该属性，但在旧代码中仍可能见到： - type="disc"：实心圆点（默认） - type="circle"：空心圆圈 - type="square"：实心方块

建议改用CSS的list-style-type替代：

ul { list-style-type: square; }

2. 全局属性支持

<ul>和<li>支持所有HTML全局属性： - class / id：用于CSS和JS操作 - data-*：自定义数据属性 - aria-*：无障碍访问属性

三、实际应用场景

1. 导航菜单

<ul class="nav-menu">
  <li><a href="/">首页</a></li>
  <li><a href="/products">产品</a></li>
  <li><a href="/about">关于我们</a></li>
</ul>

2. 多级嵌套列表

<ul>
  <li>一级项目
    <ul>
      <li>二级项目A</li>
      <li>二级项目B</li>
    </ul>
  </li>
</ul>

3. 图文混排

<ul class="image-list">
  <li>
    <img src="icon1.png" alt="图标">
    <p>图文描述内容</p>
  </li>
</ul>

四、CSS样式控制技巧

1. 修改列表符号

ul.custom {
  list-style-type: none; /* 移除默认符号 */
  list-style-image: url('bullet.png'); /* 自定义图片符号 */
}

2. 横向排列

ul.horizontal {
  display: flex;
  list-style: none;
  padding: 0;
}

3. 悬浮效果

ul li:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}

五、JavaScript动态操作

1. 添加新项目

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.textContent = '动态添加的项目';
ul.appendChild(newItem);

2. 列表排序

const ul = document.querySelector('ul');
[...ul.children]
  .sort((a, b) => a.textContent.localeCompare(b.textContent))
  .forEach(li => ul.appendChild(li));

六、无障碍最佳实践

为导航列表添加ARIA角色：

<ul role="navigation">
  <li><a href="/">首页</a></li>
</ul>

复杂列表使用aria-label：

<ul aria-label="产品特性列表">
  <li>高性能</li>
</ul>

七、常见问题解决方案

1. 符号不显示问题

检查是否误设了：

ul {
  list-style: none; /* 这会隐藏符号 */
  padding-left: 0; /* 可能导致缩进消失 */
}

2. 跨浏览器一致性

推荐使用CSS重置：

ul {
  margin: 0;
  padding-left: 20px;
}

八、HTML5新特性结合

与`<details>`标签配合

<ul>
  <li>
    <details>
      <summary>可折叠项目</summary>
      <p>详细内容...</p>
    </details>
  </li>
</ul>

九、性能优化建议

避免超过3层嵌套
超过50项的列表建议分页或虚拟滚动
使用CSS计数器替代复杂编号：

ul { counter-reset: section; }
li::before { 
  content: counter(section) ". ";
  counter-increment: section; 
}

十、扩展应用案例

1. 待办事项列表

<ul class="todo-list">
  <li contenteditable="true">可编辑项目</li>
</ul>

2. 瀑布流布局

ul.masonry {
  column-count: 3;
  column-gap: 20px;
}

通过灵活运用<ul>和<li>标签，配合现代CSS技术，可以构建从简单列表到复杂交互组件的各种界面元素。掌握这些核心用法将显著提升前端开发效率。 “`

（注：实际字符数约2100字，如需缩减到1050字左右，可删除部分示例或简化章节内容）