HTML列表分为有序和无序两种，有序用ol，无序用ul

HTML列表是网页内容组织的重要方式，主要分为三种类型：无序列表（

）、有序列表（
）和描述列表（

）。无序列表适用于无特定顺序的项目，如导航菜单，有序列表则用于需要按顺序排列的内容，如步骤指南。描述列表则通过

、

和

标签，构建术语与定义、问题与答案等键值对关系，提升内容语义化。选择合适的列表类型，遵循语义化原则，能有效提升用户体验和SEO表现。此外，通过CSS自定义样式，可以实现列表的视觉美观和层级清晰，增强网页的可访问性和搜索可见性。掌握HTML列表的创建和应用，是前端开发的基础技能。

HTML列表主要有三种类型：1. 无序列表使用

和
• 标签创建，适用于没有特定顺序的项目；2. 有序列表使用
  和
  1. 标签定义，用于需要按顺序排列的内容；3. 描述列表由

     、

     和

     标签构成，适合表达术语与定义、问题与答案等键值对关系；选择合适的列表类型应基于语义化原则，以提升用户体验和SEO表现，同时可通过CSS实现样式自定义与嵌套层级设计，使列表结构清晰且视觉美观，最终增强可访问性与搜索可见性。

     

     HTML列表主要有三种类型：无序列表、有序列表和描述列表。创建无序列表通常使用

     标签包裹
     • 标签，而有序列表则用
       标签包裹
       1. 标签。描述列表则由

          、

          和

          标签构成。

          要创建HTML列表，核心在于理解其语义和结构。对于最常见的无序列表（Unordered List），你可能会用它来罗列一些没有特定顺序的项目，比如一个购物清单或者导航菜单。它通过

          标签定义，每个列表项则用
          • （List Item）标签表示。

            <ul>
              <li>咖啡</li>
              <li>牛奶</li>
              <li>茶</li>
            </ul>

            而有序列表（Ordered List），顾名思义，适用于那些需要按特定顺序排列的项目，例如步骤指南、排名或者食谱中的操作顺序。它由

            标签定义，同样，每个列表项也是
            1. 标签。默认情况下，浏览器会用数字来标记这些列表项，但你也可以通过CSS或HTML属性来改变这种标记方式。

               <ol>
                 <li>准备食材</li>
                 <li>预热烤箱</li>
                 <li>烘焙20分钟</li>
               </ol>

               有时候，我们还需要在列表中嵌套其他列表，这其实非常简单，只需要在

            2. 标签内部再插入一个
               或
               即可。这在构建复杂的导航结构或多级目录时特别有用。

               HTML列表除了有序和无序，还有哪些不为人知但同样实用的类型？

               说起HTML列表，很多人第一反应就是无序和有序，毕竟它们出镜率最高。但实际上，HTML还提供了一种非常强大且语义化的列表类型——描述列表（Description List），也就是我们常说的定义列表。它由

               标签定义，内部包含

               （Description Term，描述术语）和

               （Description Description，描述描述）标签对。

               我个人觉得，

               在很多场景下都被低估了。它不像

               或
               那样简单地罗列项目，而是构建了一种“术语-定义”或者“问题-答案”的关联结构。比如，你要创建一个术语表、FAQ页面，或者展示某个产品的属性（如“颜色：红色”，“尺寸：L”），

               简直是完美的选择。它能清晰地表达术语和其解释之间的关系，这不仅对阅读者友好，对搜索引擎和辅助技术（如屏幕阅读器）的理解也大有裨益。

               举个例子，一个简单的问答：

               <dl>
                 <dt>什么是HTML？</dt>
                 <dd>HTML（超文本标记语言）是用于创建网页的标准标记语言。</dd>
               
                 <dt>CSS的作用是什么？</dt>
                 <dd>CSS（层叠样式表）用于描述HTML文档的呈现方式，包括颜色、字体和布局。</dd>
               </dl>

               你看，这种结构是不是比用一堆段落标签更清晰、更有逻辑？它明确地告诉浏览器和用户，这是一个术语和其对应描述的集合。

               在实际项目中，如何选择合适的列表类型以提升用户体验和SEO表现？

               选择列表类型，其实远不止是“看起来像什么”那么简单，它更多关乎“它是什么”。我总强调语义化，因为这不仅是代码整洁的问题，更是关乎用户体验和SEO的底层逻辑。

               • 语义优先：

                 • 如果你有一组项目，它们之间没有内在的顺序关系，比如一个博客文章分类列表、一个产品特性列表，那么
                   （无序列表）就是你的不二之选。它表示的是一个“集合”。
                   • 如果列表中的项目有明确的步骤、优先级或顺序，比如一个操作指南、排名前十的榜单，那么
                     （有序列表）才是正解。它传递的是“序列”的概念。
                     1. 而当你要表达“某个术语的定义”、“某个属性的描述”或者“问题与答案”这种键值对关系时，

                        （描述列表）的语义优势就体现出来了。它构建的是“关联”。

                 • 用户体验： 语义正确的列表对辅助技术（如屏幕阅读器）至关重要。屏幕阅读器会根据标签类型告知用户当前是“列表”还是“有序列表”，这能帮助视障用户更好地理解页面结构。一个结构混乱的页面，即使视觉上再美观，对某些用户群体来说也是一场灾难。

                 • SEO表现： 搜索引擎在抓取和理解网页内容时，也会高度依赖HTML的语义结构。正确使用列表标签，可以帮助搜索引擎更好地理解内容的组织方式和主题。例如，一个用

                   包裹的步骤指南，可能更容易被识别为“如何做”的内容，从而在相关搜索中获得更好的排名。此外，一些结构化数据（如FAQ Schema）也常常会利用

                   的结构来组织数据，这直接有助于提升搜索结果的展示效果（比如在搜索结果中直接显示问答片段）。

                 我的经验是，别偷懒用

                 加去模拟列表效果，虽然视觉上可能一样，但在语义层面，你损失的远比你想象的要多。

                 列表嵌套和样式自定义：如何让你的HTML列表既美观又富有层级感？

                 列表嵌套是构建复杂信息结构的一个利器。想象一下，一个网站的导航菜单，通常会有主分类，主分类下又包含子分类。这时候，你就可以在主

               • 项里再嵌套一个
                 或
                 。这种层级关系，不仅让信息组织更清晰，也为后续的样式设计提供了极大的便利。

                 <ul>
                   <li>水果
                     <ul>
                       <li>苹果</li>
                       <li>香蕉</li>
                     </ul>
                   </li>
                   <li>蔬菜
                     <ol>
                       <li>西红柿</li>
                       <li>黄瓜</li>
                     </ol>
                   </li>
                 </ul>

                 至于样式自定义，这才是让列表从“朴素”变得“惊艳”的关键。默认的列表样式（圆点、数字）往往过于单调，我们需要CSS来赋予它们生命。

                 • 移除默认样式： 最常用的就是list-style: none;，尤其是在做导航菜单时，我们通常会移除默认的圆点或数字，然后用自定义的背景图或图标来代替。
                 • 改变标记类型： list-style-type属性可以改变标记的形状（disc, circle, square）或数字类型（decimal, lower-alpha, upper-roman等）。
                 • 自定义标记图片： list-style-image: url('path/to/your/image.png'); 可以让你用任何图片作为列表项的标记。
                 • 定位标记： list-style-position: inside | outside; 控制标记是在列表项内部还是外部。

                 更进一步，你可以通过调整padding、margin来控制列表项的间距，用color、font-size来改变文本样式，甚至利用伪元素::before或::after来创建完全自定义的标记图标。

                 例如，一个简单的自定义样式：

                 /* 移除所有列表的默认样式 */
                 ul, ol {
                   margin: 0;
                   padding: 0;
                   list-style: none; /* 关键一步 */
                 }
                 
                 /* 为特定列表项添加自定义图标 */
                 ul.custom-list li {
                   padding-left: 20px; /* 为图标留出空间 */
                   position: relative;
                 }
                 
                 ul.custom-list li::before {
                   content: '★'; /* 使用星号作为图标 */
                   color: gold;
                   position: absolute;
                   left: 0;
                   top: 0;
                 }
                 
                 /* 嵌套列表的样式调整 */
                 ul.custom-list ul {
                   margin-top: 5px;
                   margin-left: 20px; /* 增加缩进，体现层级 */
                   border-left: 1px solid #eee; /* 增加视觉分隔线 */
                 }

                 通过这些CSS技巧，我们不仅能让列表看起来更符合设计要求，还能通过视觉上的差异（比如缩进、颜色、边框）来强化其层级感，从而提升用户对信息结构的理解。记住，美观和实用性从来不是对立面，它们应该相辅相成。

                 到这里，我们也就讲完了《HTML列表分为有序和无序两种，有序用ol，无序用ul》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS样式,HTML列表,有序列表,无序列表,描述列表的知识点！