HTML li列表标记教程和示例

最新推荐文章于 2023-12-30 14:45:52 发布

cunjiu9486

最新推荐文章于 2023-12-30 14:45:52 发布

阅读量1.8k

点赞数 1

文章标签：列表 css html html5 javascript ViewUI

原文链接：https://www.poftut.com/html-list-tag-tutorial-with-examples/

版权

本文详细介绍了HTML中的

标签，用于创建有序和无序列表。通过

创建列表，同时展示了如何设置列表起始编号、选择不同的列表类型，如小写字母、大写字母、罗马数字等。

摘要由CSDN通过智能技术生成

HTML provides the <li> tag which is used to created different types of lists. These lists can be ordered or in ordered and <li> tag is used as a child item for the <ol>, <ul> and <menu> tags which are explained below.

HTML提供了<li>标记，该标记用于创建不同类型的列表。这些列表可以按顺序排列，也可以按顺序排列，并且<li>标记用作<ol>，<ul>和<menu>标记的子项，下面将对其进行说明。

使用<li>和<ol>标签创建有序列表 (Create Ordered List with <li> and <ol> Tags)

Ordered list and items can be created by using <ol> and <li> tags. <ol> tag is used to create the ordered list and <li> tag is used to add an item to this list. The ordered list means the items will be numbered by default and these numbers are will start from 1 by default and increase.

可以使用<ol>和<li>标记创建有序列表和项目。 <ol>标记用于创建有序列表，而<li>标记用于向该列表添加项目。有序列表表示默认情况下将对项目编号，并且这些编号将默认从1开始并增加。

<html>
<body>

<h1>Ordered List with Number</h1>

<p>The ol element defines an ordered list:</p>
<ol>
   <li>Turkey</li>
   <li>USA</li>
   <li>UK</li>
   <li>Germany</li>
   <li>Italy</li>
</ol>

</body>
</html>

Create Ordered List with <li> and <ol> Tags

设置订购清单的起始编号(Set Start Number For Ordered List)

By default ordered list will start from the number 1 which is the first counting number. Alternatively, we can specify a start number explicitly from the provided value. We will use the value attribute of the <li> tag . In the following example, we will start the ordered list numbering from 3.

默认情况下，有序列表将从第一个计数数字1开始。另外，我们可以从提供的值中明确指定一个起始编号。我们将使用<li>标签的value属性。在下面的示例中，我们将从3开始排序。

<html>
<body>

<h1>Ordered List with Number</h1>

<p>The ol element defines an ordered list:</p>
<ol>
<li value=3>Turkey</li>
<li>USA</li>
<li>UK</li>
<li>Germany</li>
<li>Italy</li>
</ol>


</body>
</html>

使用<li>和<ul>标签创建无序列表(Create Unordered List with <li> and <ul> Tags )

If we do not need and want to use numbers for the list items we should use the unordered list with the <ul> and <li> tags. The unordered list simply uses bullets as list item signs.

如果我们不需要并且不想使用数字作为列表项，则应使用带有<ul>和<li>标记的无序列表。无序列表只是将项目符号用作项目符号。

<html>
<body>

<h1>Unordered List with Number</h1>

<p>The ul element defines an unordered list:</p>
<ul>
<li>Turkey</li>
<li>USA</li>
<li>UK</li>
<li>Germany</li>
<li>Italy</li>
</ul>


</body>
</html>

Create Unordered List with <li> and <ul> Tags

<li>标记属性(<li> Tag Attributes)

<li> tag is a very simple tag that has only two attributes which are defined below.

<li>标签是一个非常简单的标签，仅具有以下定义的两个属性。

LEARN MORE HTML Bullet List Tutorial with Examples

了解更多带有示例HTML项目符号列表教程

value attribute is used to set the start number of the list item.

value属性用于设置列表项的开始编号。

type attribute is used to set the list type like lowercase letters, uppercase letters, numbers, lowercase Roman numerals, and uppercase Roman numerals. This attribute is deprecated with the new versions of HTML and CSS list-style-type property should be used instead.

type属性用于设置列表类型，例如小写字母，大写字母，数字，小写罗马数字和大写罗马数字。新版HTML不推荐使用此属性，而应使用CSS list-style-type属性。

使用<li>标记和type = a属性创建小写字母列表项 (Create Lowercase Letter List Item with <li> Tag and type=a Attribute)

In the following example, we will create an ordered list where lowercase letters will be used to number each item. We will set each item attribute to type=a like below.

在下面的示例中，我们将创建一个有序列表，其中将使用小写字母为每个项目编号。我们将每个item属性设置为type=a如下所示。

<!DOCTYPE html>
<html>
<body>

<h1>Ordered List with Lowercase Letters</h1>

<p>The ol element defines an ordered list:</p>
<ol>
<li type=a>Turkey</li>
<li type=a >USA</li>
<li type=a>UK</li>
<li type=a>Germany</li>
<li type=a>Italy</li>
</ol>


</body>
</html>

Create Lowercase Letter List Item with <li> Tag and type=a Attribute

使用<li>标记创建大写字母列表项(Create Uppercase Letter List Item with <li> Tag )

We can also use uppercase letters in order to use in list items. We will use <li> tag type=A attribute.

我们也可以使用大写字母以便在列表项中使用。我们将使用<li>标签type=A属性。

<html>
<body>

<h1>Ordered List with Uppercase Letters</h1>

<p>The ol element defines an ordered list:</p>
<ol>
<li type=A>Turkey</li>
<li type=A >USA</li>
<li type=A>UK</li>
<li type=A>Germany</li>
<li type=A>Italy</li>
</ol>


</body>
</html>

Create Uppercase Letter List Item with <li> Tag

使用<li>标记创建小写罗马数字列表项(Create Lowercase Roman Numeral List Item with <li> Tag )

We can also use lowercase Roman numerals in order for list items. We will set the <li> tag attribute as type=i like below.

我们还可以使用小写罗马数字来排列列表项。如下所示，我们将<li>标签属性设置为type=i 。

<html>
<body>

<h1>Ordered List with Lowercase Roman Numerals</h1>

<p>The ol element defines an ordered list:</p>
<ol>
<li type=i>Turkey</li>
<li type=i >USA</li>
<li type=i>UK</li>
<li type=i>Germany</li>
<li type=i>Italy</li>
</ol>


</body>
</html>

Create Lowercase Roman Numeral List Item with <li> Tag

使用<li>标签创建大写罗马数字列表项(Create Uppercase Roman Numeral List Item with <li> Tag )

We can use uppercase Roman numerals for the list items with the type=I <li> tag attribute.

我们可以使用具有type=I <li>标签属性的列表项使用大写罗马数字。

<html>
<body>

<h1>Ordered List with Uppercase Roman Numerals</h1>

<p>The ol element defines an ordered list:</p>
<ol>
<li type=I>Turkey</li>
<li type=I >USA</li>
<li type=I>UK</li>
<li type=I>Germany</li>
<li type=I>Italy</li>
</ol>


</body>
</html>

Create Uppercase Roman Numeral List Item with <li> Tag

翻译自: https://www.poftut.com/html-list-tag-tutorial-with-examples/

cunjiu9486

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML li列表标记教程和示例

HTML provides the <li> tag which is used to created different types of lists. These lists can be ordered or in ordered and <li> tag is used as a child item for the <ol>, <ul> a...
复制链接

扫一扫