HTML basic tutorial HTML list

HTML bullets (unordered list)

Lists can be seen everywhere on web pages, such as news pages, such lists can be seen everywhere

These lists can be completed using the ul-li tag. ul-li is a list of information in no order.

Next, let’s achieve this effect

Syntax:

<ul >

Common attributes of ##</ul>

type: the type of bullet, Values: disc (small black dot), circle (hollow circle), square (solid square)

## Example:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ul type="square">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委：进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li>

</ul>
    </body>
</html>

Note:
In HTML markup, content should be placed in the lowest level markup.

HTML number list (ordered list)

There is also such a list in the website

This kind of information display can use the <ol> tag to create an ordered list for display.

Grammar:

<ol>

or Common attributes of <li>

## type: number type, values: 1, a, A, i, I

start: From which number to start numbering (number).

Modify the above example:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ol type="1" start="1">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委：进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li>

</ol>
    </body>
</html>

Note: You can try changing the value of the attribute to see what changes the output

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ul type="square"> <li>三星在大陆召回19万台Note7手机可全额退款</li> <li>国土部等5部委：进城落户人口人均用地不超1百平米</li> <li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li> </ul> </body> </html>

submit Reset Code

Automatic operation

HTML basic tutorial HTML list

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]