列表是在网页上组织信息的另一种方式——它们提供简单的结构并且易于理解。在本文中，了解不同类型的 HTML 列表、何时使用它们以及如何自定义它们的外观。
无序的 HTML 列表
使用标签创建无序列表。当项目的顺序不重要时，这种类型的列表非常有用——例如，在购物清单中。浏览器通常用项目符号标记此类列表中的项目。要列出项目，您可以在元素内使用标签。 <ul> <li><ul>
有序的 HTML 列表
使用标签创建有序列表。有序列表的项目被编号，当项目的顺序很重要时，这种类型的列表是最佳选择 - 例如，在逐步说明中。就像在无序列表中一样，您需要在有序列表中使用标签来定义列表项。默认情况下，有序列表中的项目编号从 1 开始。 <ol> <li>
<li> 标签
<li>标签用于引入有序和无序列表的项目。它是分别嵌套在<ol>和标记中的容器标记，它承载列表中的一项。该项目可以是任何类型的信息：文本、图像、链接、换行符，甚至是其他列表！ <ul>
定义 HTML 列表
定义列表，也称为描述列表，与<dl>标记一起引入。当您需要呈现术语及其......定义时，请使用此类列表，是的。定义列表的经典用例是词汇表。
定义列表元素<dl>包含两种类型的项目：
• 用<dt>标签引入的术语
• 描述，与<dd>标签一起介绍
浏览器通常通过将术语和定义放在单独的行中来呈现定义列表，定义稍微缩进。
嵌套的 HTML 列表
列表的项目可以包含任何类型的内容——文本、图像、多媒体。它们还可以包含列表——没错，列表中的Inception风格的子列表！这种类型的列表被描述为“嵌套的”。
正确标记嵌套列表的技巧是识别子列表实际上是列表项的子项，而不是列表。首先创建一个带有<ul>或<ol>标签的列表，添加带有<li>标签的项目，然后在其中一个项目中启动另一个列表。现在，你可以走了！
更改无序列表中的项目符号类型
正如我们所提到的，浏览器默认使用圆形项目符号来表示无序列表。但是，您可以使用 CSS list-style-type 属性设置自定义项目符号类型。要么通过属性添加到元素，要么在标签内部创建 CSS 规则： 。 "list-style-type:square;"<ul>style <style>ul {list-style-type: square;}
设置有序列表的列表类型
有多种方法可以将物品放入订单中。您可以使用阿拉伯数字 (1,2,3) 来表示琐碎的事情，罗马数字 (I, II, III) 可以用于更高级的场合，或者字母 (A, B, C) 在谈论备份计划时。typeHTML 为您提供了使用属性设置列表项标记的选项。
可用值为：
•"1"用于阿拉伯数字（默认）
•"I"用于大写罗马数字
•"i"用于小写罗马数字
•"A"大写字母
•"a"对于小写字母
指定的类型用于整个列表，除非type 在封闭<li>元素上使用了不同的属性。
控制列表计数
有序列表中的项目编号通常从 1 开始，但您可以通过将 start 属性添加到<ol>标签并将其值设置为您希望列表开始的编号来更改此编号。例如，写作<ol start="10">将使您的编号列表以数字 10 开头。
始终使用阿拉伯数字（1、2、3 等）作为起始值，即使编号类型是字母或罗马数字也是如此。例如，要从字母“d”或罗马数字“IV”开始编号元素，请使用start="4".
颠倒列表顺序
假设您想从最差到最好（无论出于何种原因）对所有汤姆汉克斯电影进行评分。以最大的数字开始您的列表并将数字 1 保存到最后是有意义的，对吗？好消息是 HTML 已为您服务！
将reversed 属性添加到标签以反转列表项的编号，瞧——汤姆汉克斯的每一部电影，从最差到最好，都准备好了！ <ol>
使用 <li> 标签
使用标签列出有序和无序列表的项目。根据列表的类型，浏览器会使用不同的标记显示项目。项目符号是无序列表的默认标记，而有序列表通常按升序编号。您可以通过向and标记添加属性来更改标记的类型。 <li><ul> <ol>
使用 <ol> 标签
<ol>标签用于引入项目的有序列表——通常是编号列表。type 但是，您可以使用该属性将编号类型设置为罗马数字上的字母。此元素可以采用的其他属性包括start （定义订单的第一项）和reversed （一个没有值的属性，它会反转项目的顺序）。
更改标记类型
浏览器默认用项目符号标记无序列表。但是，您可以通过将 CSSlist-style-type属性添加到正方形、空心圆或浏览器可以显示的任何符号来更改标记样式。在 MDN Web Docs 上阅读有关可用符号及其值的更多信息。
更改编号
您可以使用标签的type 属性设置有序列表的自定义编号。<ol>可用值包括A大写字母、a小写字母、i 小写罗马数字、大写罗马数字和数字（这是默认值）。 I1
以上内容为转载
网友评论