ul li写法示例？

在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"）

关键注意事项

1. 语义化规范
   • 为”无顺序关系”时使用<ul>（如菜单、功能点）
   • 用<ol>（如步骤、排名）
2. 可访问性优化 <ul aria-label="主要功能"> <li>用户登录</li> <li>数据导出</li> </ul>
   • 添加aria-label为屏幕阅读器提供说明
   • 避免在<li>内放置块级元素（如<div>）
3. 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可访问性标准。