首页 时政热点 科技头条 智能AI 安全攻防 数码硬件 开发者生态 汽车 游戏 社会热点 开源推荐 医疗健康 归档 标签 关于

你不了解 HTML 列表

摘要

Reading Time: 13 minutes This second installment in the “You don’t know HTML” series is going to be all about the ways that we put collections of things together。

the you lists list and
2026-05-16 1 阅读 约4分钟阅读 speckx
分享:
字号:
阅读时间:13 分钟 “你不懂 HTML”系列的第二部分将讨论我们如何将事物集合在一起。我们跳过了 MDN 和 W3Schools 的介绍页面,而是进入了你在打开 W3C 规范之前不小心服用了你表弟的利他林后发现的东西。让我们深入研究列表。我们甚至没有讨论如何设计它们。这不是介绍!我假设您有编写 HTML 的实际经验,并且这不是您第一次搜索“如何制作列表”。我将介绍将内容集合组合在一起的所有方法。所以我谈论的是这些类型的列表: 有序 无序 描述 菜单控制 如果您不知道 HTML 中有五种不同类型的列表,那就完美了。这一定意味着你不懂 HTML!我们如何决定使用哪个?无需向AI索要总结;我先给你结局。以下是您决定使用哪种列表的方法: 如果列表中的项目用于从用户获取数据的单个控制字段,则需要 + 组合 如果更改项目的顺序会改变列表的含义,则使用有序列表 (
    ) 如果项目是键值对或键值对,请使用描述列表 (
    )如果项目是在用户界面中执行操作的控件,请使用菜单 ( ) 使用无序列表 (
      ) 使用 的控制列表 当我们想到列表时,我们通常不会将用户控件字段混入其中。这很奇怪,因为我们使用列表构建导航,而这些是用户……呃……可以控制的链接列表。因此,我们往往对我们所认为的列表存在偏见。但我在这里是为了让您首先想到这一点:当我们构建表单时,有时我们会构建用户将与之交互的列表。如果是固定列表,请使用 选择一种语言 英语 法语 西班牙语 葡萄牙语 这为用户提供了一个选择。但如果用户也精通多种语言,也许他们想要选择不止一种语言。多属性就够简单了!该列表的显示方式会有所不同。现在所有选项都将可见,因此我们可以通过 Shift 或 cmd + 单击我们想要的选项: 选择一个语言 英语 法语 西班牙语 葡萄牙语 爱尔兰语 威尔士语 只要您使用实际的 select 元素和 option 执行此操作,就不必在具有 role="listbox" 属性的列表元素上使用 aria-multiselectable 属性。本机浏览器语义为您提供了这一点。将相关选项与 放在一起 如果我们想按语言家族对语言进行分组怎么办?我们可以使用 optgroup 来做到这一点,它可以让我们将选项列表分组在一起: 英语 法语 西班牙语 葡萄牙语 爱尔兰语 威尔士语 如果有一堆选项,但由于[原因]我们不希望用户能够选择其中的子集怎么办?让我们将禁用属性添加到 optgroup 中: 英语 法语 西班牙语 葡萄牙语 爱尔兰语 威尔士语 首先使用本机 HTML 选项来改进列表 有时,我们可能希望在您的组之间有视觉上的休息。如果我们不想摆弄 CSS,那么我们很幸运!
      是 select 中已批准的项目。这不仅使我们的选择看起来更清晰,我们还可以使用 size 属性来控制一次显示多少个项目 - 这对于特殊情况很有用
这篇文章对您有帮助吗?

订阅66必读

每日精选科技资讯,直达你的邮箱