In HTML, the symbols for ordered and unordered lists are defined using the Type attribute. To follow the principle of separating structure from style, list styles should be defined in CSS.

1, list item symbol list-style type

1. Define list item symbols

List item symbols are for OL or ul elements, not li elements. In OL, list item symbols take the following values:

Attribute values instructions
decimal Arabic numerals 1, 2, 3… (the default)
lower-roman Lower Roman numerals I, II, iii…
upper-roman Capital Roman numerals I, II, III…
lower-alpha Lowercase letters A, B, C……
upper-alpha Uppercase Letters A, B, C……

In UL, the list item symbols are as follows:

Attribute values instructions
disc Solid circle (default)
circle The hollow circle
square A square

Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            ol{
                list-style-type: upper-roman;
            }
            ul{
                list-style-type: circle;
            }
        </style>
    </head>
    <body>
        <h4>An ordered list</h4>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <h4>Unordered list</h4>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </body>
</html>
Copy the code

The browser displays:

2. Remove symbols from list items

When you do not want to use the symbol of a list item, you can use list-style-type:none to remove the symbol of a list item, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            ol.ul{
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <h4>An ordered list</h4>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <h4>Unordered list</h4>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </body>
</html>
Copy the code

How it looks in the browser:

List-style-image

List items can be replaced with images to make the site more beautiful, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            ol.ul{
                list-style-image: url("cat.svg")}</style>
    </head>
    <body>
        <h4>An ordered list</h4>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <h4>Unordered list</h4>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </body>
</html>
Copy the code

In the browser it looks like this:

For symbols of list items, iconfont icon is more commonly used to achieve, recommend a good icon library: www.iconfont.cn/