HTML中ol和ul的区别及自定义方法

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML中，

和

都是用于创建列表的标签，但它们的用途不同：

：表示有序列表（Ordered List），列表项会按顺序编号显示，如1. 2. 3. 等。

：表示无序列表（Unordered List），列表项通常以项目符号（如圆点、方块等）显示。如何自定义列表样式？可以通过CSS来改变列表的外观，例如修改编号样式、项目符号形状、缩进等。以下是一些常见方法：1. 自定义有序列表编号ol { list-style-type: upper-roman; /* 可选值：decimal, lower-alpha, upper-roman等 */ }2. 自定义无序列表项目符号ul { list-style-type: square; /* 可选值：disc, circle, square等 */ }3. 移除默认样式并自定义ul { list-style: none; /* 移除默认样式 */ } /* 自定义项目符号 */ li::before { content: "• "; color: red; }4. 使用图片作为项目符号ul { list-style-image: url('icon.png'); }通过这些方式，你可以灵活地控制列表》

ol与ul的核心区别在于语义：1.ol代表有序列表，适用于强调顺序的场景，如步骤指南、排名、法律条文、议程或时间线；2.ul代表无序列表，适用于并列关系的集合，如功能列表、导航菜单、项目符号列表、相关资源列表。3.自定义样式主要通过CSS实现，包括list-style-type、list-style-image、list-style-position及简写属性list-style；4.进阶技巧包括使用::before或::marker伪元素、Flexbox或CSS Grid布局，以实现更精细和创意的列表样式。

HTML中的ol和ul标签，它们最核心的区别在于语义：ol代表有序列表，强调列表项的顺序性；而ul则代表无序列表，列表项之间没有特定的顺序关系。这不仅仅是视觉上的差异——ol默认显示数字或字母，ul默认显示项目符号——更是关于内容结构和意义的声明。

解决方案

要自定义列表样式，我们主要通过CSS来操作。最直接的方法是使用list-style相关的属性：

• list-style-type: 这是控制列表项标记类型的基础属性。
  • 对于ul，你可以选择disc（实心圆，默认）、circle（空心圆）、square（实心方块）或none（不显示标记）。
  • 对于ol，选项就更多了，比如decimal（数字，默认）、decimal-leading-zero（带前导零的数字）、lower-alpha（小写字母）、upper-alpha（大写字母）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）等等。
• list-style-image: 如果你不想用内置的标记，想用一张图片作为列表标记，就可以用这个属性。它接受一个URL，指向你的图片文件。
  • 例如：list-style-image: url('path/to/your-marker.png');
• list-style-position: 这个属性控制列表标记是位于列表项内容的“外部”（outside，默认）还是“内部”（inside）。outside意味着标记在内容块之外，内容会缩进；inside则意味着标记是内容的一部分，文本会环绕标记。
• list-style: 这是一个简写属性，可以同时设置list-style-type、list-style-position和list-style-image。
  • 例如：list-style: square inside url('path/to/marker.png');

当然，如果你想要更精细的控制，比如让标记和文本有不同的颜色，或者实现一些不规则的布局，list-style属性可能就不够用了。这时候，我们可以考虑将list-style-type设置为none，然后利用伪元素（::before或::marker）来创建和自定义标记。

有序列表（

）在哪些场景下更具优势？

在我看来，ol标签的价值在于它明确地传达了“顺序”或“步骤”的概念。它不仅仅是视觉上的编号，更是一种语义上的声明。想想看，当我们撰写一份食谱时，每一步骤的先后顺序是至关重要的；或者在技术文档中，安装软件的步骤，一步错可能导致步步错。

具体来说，ol标签适用于：

• 步骤指南或教程：比如“如何安装软件的五步曲”、“完成任务的三个关键步骤”。顺序在这里是不可逆的。
• 排名或排行榜：例如“全球十大最佳咖啡豆”、“最受欢迎的电影Top 5”。数字本身就代表了位置和优先级。
• 法律条文或规定：很多法规都是按条、款、项来编号的，这种结构性要求就非常适合ol。
• 议程或时间线：会议议程、项目里程碑，这些内容通常都有明确的时间或执行顺序。

使用ol，不仅能让读者清晰地把握内容的逻辑流程，对屏幕阅读器等辅助技术也更友好，因为它能准确地告诉用户这是一个有顺序的列表。我见过不少新手开发者，为了视觉效果，用ul然后自己手动加数字，这其实就丢失了HTML本身的语义优势，给后续的维护和无障碍化带来了不必要的麻烦。

无序列表（

）适用于哪些场景？

与ol强调顺序不同，ul则聚焦于“集合”或“分组”的概念，列表项之间是并列关系，没有先后之分。它的美在于简洁和概括性，能快速地呈现一组相关信息。

我经常在以下场景中使用ul：

• 功能列表或特性描述：比如一个产品的特点，每一点都是独立的，没有谁必须在谁之前。
• 导航菜单：网站的顶部导航、侧边栏菜单，这些都是一系列链接的集合，顺序通常不那么重要（虽然视觉上会有固定排列）。
• 项目符号列表：在文章中列举一些要点、注意事项，或者仅仅是为了让一大段文字看起来不那么密密麻麻，增加可读性。
• 相关链接或资源列表：比如一篇文章末尾的“延伸阅读”或“相关资源”，这些都是推荐内容，没有严格的阅读顺序。

ul的灵活性在于，你可以通过CSS轻易地改变它的项目符号，甚至完全移除它们，然后用其他视觉元素来替代，使其适应各种设计风格。它的默认样式虽然简单，但正是这种简单，让它成为了组织信息、提升内容可读性的万金油。我发现，很多时候，当你不确定该用ol还是ul时，如果内容的顺序真的不影响其含义，那么ul往往是更安全、更灵活的选择。

进一步自定义列表样式的进阶技巧有哪些？

当我们谈到“进阶”时，往往意味着要跳出list-style属性的固有框架，利用CSS更底层的能力来创造独特的列表样式。

一个非常强大的工具是伪元素（::before或::after）。通过将list-style-type设置为none，我们就可以完全控制列表项的标记。

ul.custom-list li {
    list-style-type: none; /* 移除默认标记 */
    position: relative; /* 为伪元素定位提供上下文 */
    padding-left: 25px; /* 为自定义标记留出空间 */
}

ul.custom-list li::before {
    content: "✨"; /* 可以是任何字符、表情符号，甚至是CSS计数器 */
    position: absolute;
    left: 0;
    top: 0; /* 根据需要调整垂直位置 */
    color: #FFD700; /* 标记的颜色 */
    font-size: 1.2em; /* 标记的大小 */
}

这种方法让你能够：

• 使用任何Unicode字符、表情符号甚至自定义图标（通过background-image和content: ""结合）作为标记。
• 精确控制标记的颜色、大小、字体、阴影等所有CSS属性。
• 将标记定位在列表项的任何位置，实现更复杂的对齐。

另一个相对较新且更语义化的方式是使用::marker伪元素。这个伪元素直接作用于列表项的默认标记。

ul.marker-styled li::marker {
    color: #007bff; /* 改变标记的颜色 */
    font-size: 1.5em; /* 改变标记的大小 */
    /* 甚至可以改变标记的 content，但兼容性不如 ::before 广泛 */
}

::marker的优势在于它直接操作原生的标记，语义更清晰，但它的可定制性目前还不如::before那么广泛，例如你不能直接改变其形状（只能改变list-style-type）。

对于更复杂的列表布局，比如需要多列显示列表项，或者列表项内部有非常规的对齐需求，我会倾向于使用Flexbox或CSS Grid。通过给ul或ol设置display: flex或display: grid，并配合flex-wrap、gap等属性，可以实现响应式的多列列表布局，或者让列表项内容与标记之间有更复杂的对齐关系，远超传统列表样式所能提供的能力。这就像是把列表项从单纯的“列表”概念中解放出来，变成可以自由布局的“元素”。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~