HTML listLOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

HTML list

HTML supports ordered, unordered and defined lists:

##Ordered list

The ordered list starts with the

<ol> tag. Each list item begins with a <li> tag.

List items are marked with numbers.

Example

This example demonstrates an ordered list. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
</body>
</html>

Program running result:

3.jpg

HTML unordered list

An unordered list is a list of items marked with bold dots (typically small black circles).

Unordered list uses <ul> tag

Example

This example demonstrates an unordered list. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h4>一个无序列表：</h4>
<ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ul>
</body>
</html>

Program running result:

6.jpg

HTML custom list

A custom list is not just a list of items, but a combination of items and their comments.

Custom lists start with a <dl> tag. Each custom list item begins with <dt>. The definition of each custom list item begins with <dd>.

Example

This example demonstrates a definition list. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h2>一个定义列表：</h2>
<dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

Program running result:

7.jpg

#Tips: Paragraphs, line breaks, pictures, and links can be used inside list items and other lists and more.

More examples

This example demonstrates different types of unordered lists. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
</body>
</html>

Program running result:

8.jpg

##Example

This example demonstrates different types of ordered lists. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h4>字母列表：</h4>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>

<h4>罗马字母列表：</h4>
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>

<h4>小写罗马字母列表：</h4>
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>

</body>
</html>

Program running result:

2.jpg

Example

This example Demonstrates how to nest lists. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h4>一个嵌套列表：</h4>
<ul>
    <li>咖啡</li>
    <li>茶
        <ol>
            <li>红茶</li>
            <li>绿茶</li>
        </ol>
    </li>
    <li>牛奶</li>
</ul>
</body>
</html>

Program running result:

Q.jpg

##HTML list tag

Tag Description
<ol> Define an ordered list.
<ul> Define an unordered list.
<li> Define list items.
<dl> Definition definition list.

​ <dt> Definition definition item. <dd> Definition description.



Next Section

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
submitReset Code
ChapterCourseware