HTML 有序列表中的小技巧，让你惊艳众人

• 使用 type 属性来更改编号样式，例如：
  • type="A"：大写字母
  • type="a"：小写字母
  • type="I"：大写罗马数字
  • type="i"：小写罗马数字

2. 自定义编号起始值

• 使用 start 属性来指定列表编号的起始值。例如：
  • <ol start="5">：从 5 开始编号

3. 使用自定义标记

• 使用 value 属性来指定列表项目中的自定义标记。例如：
  • <li value="♥">：使用爱心符号作为项目标记

4. 嵌套列表

• 可以将有序列表嵌套在其他列表中。例如：

<ol type="1">
  <li>Item 1
    <ol type="a">
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ol>
  </li>
  <li>Item 2</li>
</ol>

5. 添加标题

• 使用 <caption> 标签来为有序列表添加标题。例如：

<ol>
  <caption style="font-size: 1.5em">Important Notes</caption>
  <li>...</li>
  <li>...</li>
</ol>

6. 水平对齐列表编号

• 使用 CSS text-align 属性将列表编号水平对齐。例如：

ol {
  text-align: right;
}

7. 垂直对齐列表项目

• 使用 CSS vertical-align 属性将列表项目垂直对齐。例如：

li {
  vertical-align: middle;
}

8. 使用 CSS 美化列表

• 可以使用 CSS 来美化有序列表。例如：

/* 带圆点的编号 */
ol {
  list-style-type: circle;
}

/* 自定义字体和颜色 */
ol li {
  font-family: Arial, sans-serif;
  color: #333;
}

/* 缩进列表 */
ol {
  padding-left: 2em;
}

9. 使用 JavaScript 动态生成列表

• 可以使用 javascript 动态生成和更新有序列表。例如：

const list = document.createElement("ol");
list.type = "1";

for (let i = 1; i <= 5; i++) {
  const item = document.createElement("li");
  item.textContent = `Item ${i}`;
  list.appendChild(item);
}

document.body.appendChild(list);

10. 可访问性

• 确保有序列表具有良好的可访问性，例如为列表项目提供 aria-label 属性。