如何在HTML中正确使用和标签

在HTML中，`ul` 和 `li` 是常用的列表标记，分别代表无序列表（Unordered List）和列表项（List Item）。使用这两个元素可以创建一个项目列表，通常用于呈现一组无特定顺序的项目，如菜单、导航栏、项目列表等。

无序列表 `

`

无序列表由 `

` 标签定义，它是一个块级元素，用于包含一个或多个 `
• ` 元素。在网页中，`
  ` 通常以圆点或者小方块的形式展示列表项。

  列表项 `

  `

  列表项由 `

  • ` 标签定义，它是一个内联元素，用于包含列表中的单个项目。每个 `
  • ` 必须是 `
    ` 或 `
    `（有序列表）的直接子元素。

    以下是一个简单的使用示例：

    
    项目一
    
    项目二
    
    项目三
    
    
    

    在浏览器中，上面的代码会显示为一个带圆点的无序列表。

    

    常用属性

    虽然 `

    ` 和 `
    • ` 元素本身并没有太多属性，但以下属性经常与它们一起使用：
      • `type`：这个属性在 `
        ` 或 `
        ` 标签中使用，可以设置列表项的标记样式。对于 `
        `，标记可以是圆点（默认）、方块等。但这个属性已经不建议使用，样式应该通过CSS设置。
        • `class` 和 `id`：这两个属性用于CSS和JavaScript选择器，可以给列表和列表项指定样式或者绑定事件。

        CSS样式

        可以通过CSS对列表进行样式设计，如下所示：

        ul {
        
        list-style-type: circle; /* 改变标记样式 */
        padding-left: 20px; /* 增加内边距 */
        }
        
        li {
        margin-bottom: 5px; /* 在列表项之间添加外边距 */
        }
        

        使用场景

        • 菜单和导航栏：无序列表常用于创建垂直或水平的菜单。
        • 项目列表：用于展示一系列项目，如文章摘要、产品列表等。
        • 选项集合：在一些表单中，可以用 `
          ` 和 `
          • ` 创建一组单选或多选按钮。

          注意事项

          • 不要仅为了样式而使用列表。列表应只用于呈现项目列表，而不是用来进行页面布局。
          • 确保 `
          • ` 元素是 `
            ` 或 `
            ` 的直接子元素，否则可能导致布局或样式问题。

            通过以上介绍，你应该能掌握 `ul` 和 `li` 的基本使用方法，并能灵活运用它们在你的前端项目中。