HTML List

Опубликовано 2018-09-24 автором stariс

In HTML, there are three kinds of lists.

1. Ordered list

Example of an ordered list
Example of an ordered list
Example of an ordered list

In html we write this way:



Code:

<ol>                             <!--List container-->

  <li>Example of an ordered</li>  <!--List line-->

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

2. Unordered list

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ul>                             <!--List container-->

  <li>Example of an Unordered</li>  <!--List line-->

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

</ul>

3. List with description

Example list with description: Example of line description
Example list with description: Example of line description
Example list with description: Example of line description



Code:

<dl>                             <!--List container-->

  <dt>Example list with description</dt>  <!--List line-->

    <dd>Example of line description</dd>  <!--Description of the line-->

  <dt>Example list with description</dt>

    <dd>Example of line description</dd>

  <dt>Example list with description</dt>

    <dd>Example of line description</dd>

</dl>

If you want to insert text into the ordered list between the lines, and then continue the numbering, add the attribute value to the row container.

Example of an ordered list
Example of an ordered list
Example of an ordered list

Text Text Text Text

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

Text Text Text Text

<ol>

  <li value="4">Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

In the ordered list, you can change the arabic numerals to roman numerals and Latin letters.

To do this, enter a style in the list container.

1. Roman upper case

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:upper-roman;">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

2. Roman numerals of lower case

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:lower-roman;">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

3. Latin letters upper case

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:upper-latin;">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

4. Latin letters lowercase

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:lower-latin;">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

5. The numbers start at 0

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:decimal-leading-zero;">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

6. Armenian letters

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ol style="list-style-type:armenian">

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

  <li>Example of an ordered</li>

</ol>

In the unnumbered list, you can change the markers

1. A circle

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ul style="list-style-type:circle;">

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

</ul>

2. The filled circle

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ul style="list-style-type:disc;">

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

</ul>

3. Square

Example of an ordered list
Example of an ordered list
Example of an ordered list



Code:

<ul style="list-style-type:square;">

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

  <li>Example of an Unordered</li>

</ul>

Html headers < < < HTML basics > > > Links HTML

Запись опубликована в рубрике Html basics. Добавьте в закладки постоянную ссылку.

HTML List

Добавить комментарий