无序列表(ul, li)

作者：陈川阅读数：44303人阅读分类： HTML

无序列表的基本概念

无序列表（Unordered List）是HTML中用于展示项目列表的一种方式，列表项前通常显示为圆点、方块或其他符号。无序列表使用<ul>标签定义，每个列表项使用<li>标签包裹。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

ul和li标签的语法结构

<ul>标签只能包含<li>元素作为直接子元素，但<li>元素内部可以包含其他HTML元素：

<ul>
  <li>
    <h3>水果</h3>
    <p>新鲜的水果</p>
  </li>
  <li>
    <h3>蔬菜</h3>
    <p>有机蔬菜</p>
  </li>
</ul>

无序列表的样式控制

默认情况下，浏览器会为无序列表添加圆点样式，但可以通过CSS修改：

ul {
  list-style-type: square; /* 方块 */
}

ul.custom {
  list-style-type: none; /* 无标记 */
  padding-left: 0;
}

ul.custom li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

嵌套无序列表

无序列表可以多层嵌套，形成层级结构：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
    </ul>
  </li>
</ul>

实际应用场景

导航菜单

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

功能列表

<ul class="feature-list">
  <li>
    <span class="icon">✓</span>
    <span>快速响应</span>
  </li>
  <li>
    <span class="icon">✓</span>
    <span>24/7支持</span>
  </li>
</ul>

无障碍考虑

为增强无障碍访问，可以添加ARIA属性：

<ul role="list">
  <li role="listitem">项目一</li>
  <li role="listitem">项目二</li>
</ul>

浏览器兼容性

所有现代浏览器都完全支持<ul>和<li>标签，包括：

Chrome
Firefox
Safari
Edge
Opera

性能优化建议

对于大型列表，考虑虚拟滚动技术：

// 使用虚拟滚动的示例框架代码
const virtualList = new VirtualScroll({
  container: document.getElementById('list-container'),
  items: largeDataSet,
  renderItem: item => `<li>${item.name}</li>`
});

与其他列表类型的比较

与有序列表(<ol>)不同，无序列表不表示项目的顺序重要性：

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>项目A</li>
  <li>项目B</li>
</ul>

高级应用：自定义列表标记

使用CSS可以完全自定义列表标记：

ul.fancy {
  list-style: none;
}

ul.fancy li::before {
  content: "→";
  color: #ff6b6b;
  margin-right: 10px;
}

响应式设计中的列表

针对不同屏幕尺寸调整列表布局：

/* 小屏幕时垂直排列 */
ul.responsive {
  display: block;
}

/* 大屏幕时水平排列 */
@media (min-width: 768px) {
  ul.responsive {
    display: flex;
    gap: 20px;
  }
}

与JavaScript的交互

动态操作无序列表：

// 添加新项目
const list = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.textContent = '新项目';
list.appendChild(newItem);

// 删除项目
list.removeChild(list.lastElementChild);

语义化的重要性

虽然可以使用<div>模拟列表，但语义化标签更有利于SEO和可访问性：

<!-- 不推荐 -->
<div class="fake-list">
  <div class="fake-item">项目1</div>
  <div class="fake-item">项目2</div>
</div>

<!-- 推荐 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

国际化考虑

对于从右到左(RTL)的语言，列表标记位置会自动调整：

<html dir="rtl">
  <body>
    <ul>
      <li>العنصر الأول</li>
      <li>العنصر الثاني</li>
    </ul>
  </body>
</html>

打印样式优化

确保列表在打印时保持良好格式：

@media print {
  ul {
    page-break-inside: avoid;
  }
  
  li {
    page-break-inside: avoid;
  }
}

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：表单字段集(fieldset, legend)

下一篇：有序列表(ol, li)