List label

A list is a series of arranged items, mainly divided into two categories: ordered lists and unordered lists.

An ordered list has a number in front of each list item, showing the order, as shown below.

1. List item A 2. List item B 3. List item C

An unordered list means that there is no number in front of the list item, only a list symbol, and the default is a dot.

· List item A · List item B · List item C

<ol>

The <ol> tag is an ordered list container, which will generate a number in front of the internal list items. When the order of the list items is meaningful, such as ranking, this label is used.

<ol>
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

The above code will generate 1, 2, and 3 numbers in front of list items A, B, and C, respectively.

The <ol> tag can be nested inside the <ol> tag or <ul> tag to form a multi-level list.

<ol>
  <li>List item A</li>
  <li>
    List item B
    <ol>
      <li>List item B1</li>
      <li>List item B2</li>
      <li>List item B3</li>
    </ol>
  </li>
  <li>List item C</li>
</ol>

In the above code, an ordered list is nested inside another ordered list, and the rendering result is as follows.

1. List item A 2. List item B 1. List item B1 2. List item B2 3. List item B3 3.
List item C

The tag has the following attributes.

(1) reversed

The reversed attribute produces a reversed list of numbers.

<ol reversed>
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

In the above code, before the list items A, B, and C, the numbers generated are 3, 2, and 1.

(2) start

The value of the start attribute is an integer that represents the starting number of the list of numbers.

<ol start="5">
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

In the above code, before the list items A, B, and C, the generated numbers are 5, 6, and 7.

(3) type

The type attribute specifies the style of numbering. Currently, the browser supports the following styles.

-a: lowercase letters -A: uppercase letter -i: lowercase Roman numerals -I: uppercase roman numerals -1: integer (default value)

<ol type="a">
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

In the above code, the numbers in front of the list items A, B, and C are English lowercase letters a, b, and c, respectively.

Note that even if the number is a letter, the start attribute still uses an integer.

<ol type="a" start="3">
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ol>

In the above code, the number specified by the type attribute is in lowercase English letters, and the start attribute is equal to 3, which means that the number starts from c.

<ul>

The <ul> tag is an unordered list container, which will generate a small solid dot in front of the internal list items as a list symbol. This tag is used when the order of the list items is meaningless.

<ul>
  <li>List item A</li>
  <li>List item B</li>
  <li>List item C</li>
</ul>

The rendering result of the above code is that in front of the list items A, B, and C, a small solid dot is generated as a list symbol.

<ul> tags can be nested with <ul> or <ol> to form a multi-level list.

<li>

<li> means list item, used in <ol> or <ul> container.

In the ordered list <ol>, <li> has a value attribute, which defines the number of the current list item, and subsequent list items will be numbered from this value.

<ol>
  <li>List item A</li>
  <li value="4">List item B</li>
  <li>List item C</li>
</ol>

In the above code, the value attribute specifies that the number of the second list item is 4, so the numbers of the three list items are 1, 4, and 5.

<dl>, <dt>, <dd>

The <dl> tag is a block-level element that represents a list of terms (description list). The description term is defined by the <dt> tag, and the description detail is defined by the <dd> tag. <dl> is often used to define vocabulary.

<dl>
  <dt>CPU</dt>
  <dd>Central Processing Unit</dd>

  <dt>Memory</dt>
  <dd>Memory</dd>

  <dt>Hard Disk</dt>
  <dd>hard disk</dd>
</dl>

Both <dt> and <dd> are block-level elements. By default, <dd> will be displayed indented below <dt>. The default rendering result of the above code is as follows.

CPU CPU Memory RAM Hard Disk hard disk

Multiple terms (<dt>) corresponding to one explanation (<dd>), or multiple explanations (<dd>) corresponding to one term (<dt>) are legal.

<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>

In the above code, A and B have the same explanation C, and D has two explanations, E and F.