编辑“︁HTML列表样式”︁（章节）

= HTML列表样式 =

'''HTML列表样式'''是指在HTML文档中控制列表（有序列表、无序列表和定义列表）视觉呈现的技术。通过CSS样式表，开发者可以自定义列表标记类型、位置、图像等属性，从而创建符合设计需求的列表布局。本条目将详细介绍各类HTML列表的样式控制方法。

== 列表基础类型 ==
HTML提供三种基础列表结构：

=== 无序列表 (ul) ===
使用'''<nowiki><ul></nowiki>'''标签创建，默认显示实心圆点标记：
<syntaxhighlight lang="html">
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>
</syntaxhighlight>

输出效果：
* 第一项
* 第二项

=== 有序列表 (ol) ===
使用'''<nowiki><ol></nowiki>'''标签创建，默认显示数字序号：
<syntaxhighlight lang="html">
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>
</syntaxhighlight>

输出效果：
1. 第一步
2. 第二步

=== 定义列表 (dl) ===
使用'''<nowiki><dl></nowiki>'''标签创建术语-描述对：
<syntaxhighlight lang="html">
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>
</syntaxhighlight>

输出效果：
; HTML : 超文本标记语言

== CSS列表样式属性 ==
通过CSS的'''list-style-type'''属性可修改列表标记样式：

=== 无序列表样式示例 ===
<syntaxhighlight lang="css">
ul.square { list-style-type: square; }
ul.circle { list-style-type: circle; }
ul.none { list-style-type: none; }
</syntaxhighlight>

对应HTML：
<syntaxhighlight lang="html">
<ul class="square">
  <li>方形标记</li>
</ul>
<ul class="circle">
  <li>空心圆标记</li>
</ul>
<ul class="none">
  <li>无标记</li>
</ul>
</syntaxhighlight>

=== 有序列表样式示例 ===
支持多种编号系统：
<syntaxhighlight lang="css">
ol.upper-roman { list-style-type: upper-roman; }
ol.lower-alpha { list-style-type: lower-alpha; }
ol.armenian { list-style-type: armenian; }
</syntaxhighlight>

数学表达式示例：
<math>n^{th}</math>项可使用::before伪元素自定义

== 高级样式技术 ==

=== 自定义列表标记 ===
使用'''list-style-image'''属性引入图像标记：
<syntaxhighlight lang="css">
ul.custom {
  list-style-image: url('marker.png');
}
</syntaxhighlight>

=== 多级列表样式 ===
通过嵌套选择器实现层级样式：
<syntaxhighlight lang="css">
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
</syntaxhighlight>

=== 计数器样式 ===
CSS计数器实现复杂编号：
<syntaxhighlight lang="css">
ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
</syntaxhighlight>

== 实际应用案例 ==

=== 导航菜单 ===
使用无标记列表创建水平导航：
<syntaxhighlight lang="html">
<ul class="nav">
  <li><a href="/">首页</a></li>
  <li><a href="/about">关于</a></li>
</ul>

<style>
.nav {
  list-style-type: none;
  display: flex;
  gap: 20px;
}
</style>
</syntaxhighlight>

=== 步骤说明 ===
自定义有序列表实现步骤指示器：
<mermaid>
graph LR
  A[1. 准备材料] --> B[2. 混合原料]
  B --> C[3. 烘烤]
  C --> D[4. 装饰]
</mermaid>

== 浏览器兼容性 ==
主要样式属性在现代浏览器中支持良好，但需注意：
* '''list-style-type'''的某些值（如'''armenian'''）可能不被所有浏览器支持
* 图像标记在不同分辨率下的显示差异
* 旧版IE对CSS计数器的支持有限

== 最佳实践 ==
1. 优先使用CSS而非HTML属性（如'''type'''）
2. 考虑无障碍访问，确保列表语义明确
3. 复杂列表建议使用CSS计数器而非手动编号
4. 移动端注意标记尺寸适配

== 参见 ==
* [[CSS盒模型]]
* [[网页排版技术]]
* [[响应式设计]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]