HTML list

There are three main types of HTML list tags: Ordered list, unordered list and definition list. Let’s learn one by one

(1).Ordered list

The ordered list starts with the < ol> tag. Each list item begins with a < li> tag. Paragraphs, line breaks, pictures, links, other lists, etc. can be used inside list items.

<ol>
<li>balabala</li>
</ol>

This is the smallest element of a relatively simple ordered list. The default sorting method starts with a number. Let's write it by hand. Let’s start with the simplest list. The following is the content and effect:

QQ截图20161011092345.png

We can also define other items in the ordered list Sorting method, the above is the default numerical sorting, below we add alphabetical sorting and Roman numeral sorting. Here we only need to add the type attribute. "a" means to sort by lowercase letters; "A" means to use uppercase letters. to sort; "i" means to sort by lowercase Roman numerals; "I" means to sort by uppercase Roman numerals. You can also add the start attribute here to determine the starting point. The following is an example:

<html>
<head>
    <title>test</title>
    </head>
    <body style="font-size:20px;background-color:gray" >
    <ol start="2">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol> 
    <ol type="a">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>     
    <ol type="A">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>       
    <ol type="i">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol> 
     <ol type="I">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>     
    </body>
</html>

QQ截图20161011092413.png

##After looking at the renderings, go back and compare the attribute values

(2).

Unordered list

After talking about ordered lists, let’s talk about unordered lists. Unordered lists are still very commonly used in HTML. The unordered list starts with the < ul> tag. Each list item starts with < li> (ordered and unordered are the same). When there is no need to sort the list, add various small symbols to each list item, which are divided into Disc (default) solid black dot; Cirle small circle; square square dot, which are the same as the attributes of the ordered list. Next Let’s get started

QQ截图20161011092435.png

Similarly, after looking at the renderings, look back at the property settings

(3)

. Definition List

Definition lists are often used to define and explain terms. The definition list starts with < dl>, the term starts with < dt>, the explanation starts with < dd>, and the text in < dd>....< /dd> is indented. Let’s do the simple operation

QQ截图20161011092455.png

Continuing Learning

new file

<html> <head> <title>test</title> </head> <body style="font-size:20px;background-color:gray" > <ol start="2"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="a"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="A"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="i"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="I"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> </body> </html>

submit Reset Code

Automatic operation

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]