当前位置：首页 > 前端开发 > 正文

ul li写法示例？

admin
前端开发
2025-06-16
2665

在HTML中，使用` 标签创建无序列表，内部通过 标签定义列表项，每个 独立包裹一项内容，如：苹果香蕉`，浏览器默认以圆点符号渲染每项，可通过CSS自定义样式。

在HTML中，<ul>（无序列表）和<li>（列表项）是构建内容列表的核心标签,以下是详细指南：

ul li写法示例？第1张

基础语法

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ul> 定义无序列表（默认显示实心圆点）
<li> 包裹每个列表项内容
每个<li>必须直接嵌套在<ul>内

嵌套列表（多级目录）

<ul>
  <li>主项1
    <ul>
      <li>子项1.1</li>
      <li>子项1.2</li>
    </ul>
  </li>
  <li>主项2</li>
</ul>

子列表的<ul>需放在父级<li>内部
浏览器会自动缩进并切换符号（如圆点→方框）

自定义列表样式（CSS示例）

<ul class="custom-list">
  <li>自定义图标项</li>
  <li>带边框的项</li>
</ul>
<style>
.custom-list {
  list-style-type: none; /* 移除默认符号 */
  padding-left: 0;
}
.custom-list li {
  padding: 8px;
  margin-bottom: 5px;
  background: #f8f9fa;
  border-left: 3px solid #4CAF50; /* 左侧装饰线 */
}
</style>

通过CSS的list-style-type可修改符号（square/circle等）
使用list-style-image: url(icon.png)添加自定义图标
推荐用CSS而非废弃的type属性（如type="square"）

关键注意事项

语义化规范
- 为”无顺序关系”时使用<ul>（如菜单、功能点）
- 用<ol>（如步骤、排名）
可访问性优化
```
<ul aria-label="主要功能">
  <li>用户登录</li>
  <li>数据导出</li>
</ul>
```
- 添加aria-label为屏幕阅读器提供说明
- 避免在<li>内放置块级元素（如<div>）
SEO最佳实践
- 在<li>中包裹关键词相关内容
- 保持列表结构扁平（嵌套不超过3层）
- 结合微数据标记（如itemprop="itemListElement"）

常见错误

错误：未闭合标签

<ul>
  <li>项1  <!-- 缺少闭合标签 -->
</ul>

错误：直接嵌套其他容器

<ul>
  <div> <!-- 非规容器 -->
    <li>项1</li>
  </div>
</ul>

动态生成示例（JavaScript）

const features = ["响应式设计", "SEO优化", "HTTPS加密"];
const list = document.createElement('ul');
features.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});
document.body.appendChild(list);