你不了解 HTML 列表

阅读时间：13 分钟 “你不懂 HTML”系列的第二部分将讨论我们如何将事物集合在一起。我们跳过了 MDN 和 W3Schools 的介绍页面，而是进入了你在打开 W3C 规范之前不小心服用了你表弟的利他林后发现的东西。让我们深入研究列表。我们甚至没有讨论如何设计它们。这不是介绍！我假设您有编写 HTML 的实际经验，并且这不是您第一次搜索“如何制作列表”。我将介绍将内容集合组合在一起的所有方法。所以我谈论的是这些类型的列表：有序无序描述菜单控制如果您不知道 HTML 中有五种不同类型的列表，那就完美了。这一定意味着你不懂 HTML！我们如何决定使用哪个？无需向AI索要总结；我先给你结局。以下是您决定使用哪种列表的方法：如果列表中的项目用于从用户获取数据的单个控制字段，则需要 + 组合如果更改项目的顺序会改变列表的含义，则使用有序列表 (

)如果项目是在用户界面中执行操作的控件，请使用菜单 ( ) 使用无序列表 (

的控制列表当我们想到列表时，我们通常不会将用户控件字段混入其中。这很奇怪，因为我们使用列表构建导航，而这些是用户……呃……可以控制的链接列表。因此，我们往往对我们所认为的列表存在偏见。但我在这里是为了让您首先想到这一点：当我们构建表单时，有时我们会构建用户将与之交互的列表。如果是固定列表，请使用选择一种语言英语法语西班牙语葡萄牙语这为用户提供了一个选择。但如果用户也精通多种语言，也许他们想要选择不止一种语言。多属性就够简单了！该列表的显示方式会有所不同。现在所有选项都将可见，因此我们可以通过 Shift 或 cmd + 单击我们想要的选项：选择一个语言英语法语西班牙语葡萄牙语爱尔兰语威尔士语只要您使用实际的 select 元素和 option 执行此操作，就不必在具有 role="listbox" 属性的列表元素上使用 aria-multiselectable 属性。本机浏览器语义为您提供了这一点。将相关选项与放在一起如果我们想按语言家族对语言进行分组怎么办？我们可以使用 optgroup 来做到这一点，它可以让我们将选项列表分组在一起：英语法语西班牙语葡萄牙语爱尔兰语威尔士语如果有一堆选项，但由于[原因]我们不希望用户能够选择其中的子集怎么办？让我们将禁用属性添加到 optgroup 中：英语法语西班牙语葡萄牙语爱尔兰语威尔士语首先使用本机 HTML 选项来改进列表有时，我们可能希望在您的组之间有视觉上的休息。如果我们不想摆弄 CSS，那么我们很幸运！

是 select 中已批准的项目。这不仅使我们的选择看起来更清晰，我们还可以使用 size 属性来控制一次显示多少个项目 - 这对于特殊情况很有用