在HTML中，使用`
标签创建无序列表，内部通过标签定义列表项，每个独立包裹一项内容，如：苹果香蕉`，浏览器默认以圆点符号渲染每项，可通过CSS自定义样式。在HTML中，<ul>（无序列表）和<li>（列表项）是构建内容列表的核心标签,以下是详细指南：
基础语法
<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);
引用说明遵循W3C HTML5标准规范，参考MDN Web Docs对列表元素的定义，并依据Google搜索内容质量指南强调E-A-T（专业性、权威性、可信度）原则，CSS样式建议符合WCAG 2.1可访问性标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/26404.html
