HTML Lists

HTML Lists （HTML列表）

In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.

HTML Unordered Lists

HTML Unordered Lists （无序列表）

We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing </ul> tags.

Each element of an unordered list is declared inside the <li> tag.

Example of the HTML <ul> tag for creating an unordered list: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>An unordered list:</h1>
   <ul>
     <li>This is a list item</li>
     <li>This is another list item</li>
     <li>This is one more list item</li>
   </ul>
 </body>
</html>

The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute. （默认情况下，无序列表中的项目用项目符号（小黑圈）标记。但是，可以使用类型属性更改列表项的默认项目符号样式。）

The type attribute is used to change the default bullet style for the list items. （Type属性用于更改列表项的默认项目符号样式。）

Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <ul type="circle">
     <li>List item </li>
     <li>List item</li>
     <li>List item</li>
   </ul>
   <ul type="square">
     <li>List item</li>
     <li>List item</li>
     <li>List item</li>
   </ul>
 </body>
</html>

Result

You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element. （还可以使用CSS list-style-type或list-style-image属性来指定列表项元素的类型。）

Example of the HTML <ul> tag used with the CSS list-style-type property for creating an unordered list: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>Examples of unordered lists:</h2>
   <ul style="list-style-type: square;">
     <li>Cold Drinks</li>
     <li>Hot Drinks</li>
     <li>Ice-Creams</li>
   </ul>
   <ul style="list-style-type: disc;">
     <li>Coca-Cola</li>
     <li>Fanta</li>
     <li>Ice Tea</li>
   </ul>
   <ul style="list-style-type: circle;">
     <li>Coca-Cola</li>
     <li>Fanta</li>
     <li>Ice Tea</li>
   </ul>
 </body>
</html>

HTML Ordered Lists

HTML Ordered Lists （有序列表）

HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing </ol> tags.

Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.

Example of the HTML <ol> tag for creating an ordered list: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>An ordered list:</h1>
   <ol>
     <li>This is List item number 1</li>
     <li>This is List item number 2</li>
     <li>This is List item number 3</li>
   </ol>
 </body>
</html>

The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type=“a” or type=“I” to the <ol> tag.

Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h3>A numbered list:</h3>
   <ol>
     <li>Peach</li>
     <li>Apricot</li>
     <li>Banana</li>
     <li>Strawberry</li>
   </ol>
   <h3>An alphabetized list:</h3>
   <ol type="A">
     <li>Peach</li>
     <li>Apricot</li>
     <li>Banana</li>
     <li>Strawberry</li>
   </ol>
   <h3>An alphabetized list (lowercase letters):</h3>
   <ol type="a">
     <li>Peach</li>
     <li>Apricot</li>
     <li>Banana</li>
     <li>Strawberry</li>
   </ol>
   <h3>A numbered list (Roman numerals):</h3>
   <ol type="I">
     <li>Peach</li>
     <li>Apricot</li>
     <li>Banana</li>
     <li>Strawberry</li>
   </ol>
   <h3>A numbered list (lowercase Roman numerals):</h3>
   <ol type="i">
     <li>Peach</li>
     <li>Apricot</li>
     <li>Banana</li>
     <li>Strawberry</li>
   </ol>
 </body>
</html>

HTML Description Lists

HTML Description Lists （HTML描述列表）

HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary. （HTML描述列表用于排列具有描述的术语或名称，其排列方式与它们在字典中的排列方式相同。）

To create a description list, we use the <dl> tag. This tag comes in pairs.

In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.

Example of the HTML <dl> tag for creating a description list: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>Description Lists:</h1>
   <dl>
     <dt>Tea</dt>
     <dd>- hot drink</dd>
     <dt>Juice</dt>
     <dd>- cold drink</dd>
   </dl>
 </body>
</html>

Result

HTML Nested Lists:

HTML Nested Lists:

A nested list contains a list inside a list. （嵌套列表在列表中包含列表。）

Example of an HTML nested list: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>A nested HTML list</h2>
   <p>A nested list contains a list inside a list.</p>
   <ul>
     <li>Copybooks</li>
     <li>
       Books
（�?）
       <ul>
         <li>Detective books</li>
         <li>Roman books</li>
         <li>Fairy tale books</li>
       </ul>
     </li>
   </ul>
 </body>
</html>

List Counting Control

List Counting Control （列表计数控件）

By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number. （默认情况下，有序列表中的枚举从1开始。使用start属性从指定的数字开始计数。）

Example of an HTML list for counting from a specified number: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>List counting control</h2>
   <p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
   <ol start="40">
     <li>Pen</li>
     <li>Pencil</li>
     <li>Copybook</li>
   </ol>
   <ol type="I" start="40">
     <li>Pen</li>
     <li>Pencil</li>
     <li>Copybook</li>
   </ol>
 </body>
</html>

Horizontal List with CSS

Horizontal List with CSS （带CSS的水平列表）

HTML lists can be styled in many different ways with CSS. （HTML列表可以通过CSS以多种不同的方式进行样式化。）

You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally. （您可以使用不同的CSS属性来设置HTML列表的样式。例如，您可以创建水平设置列表样式的导航菜单。）

Example of a horizontal list with CSS: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color: #F44336;
     }
     li {
       float: left;
     }
     li a {
       display: block;
       color: white;
       text-align: center;
       padding: 16px;
       text-decoration: none;
     }
     li a:hover {
       background-color: #981816;
     }
   </style>
 </head>
 <body>
   <h2>Navigation Menu Example</h2>
   <p>
     You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
（您可以使用不同的CSS属性来设置HTML列表的样式。例如，您可以创建水平设置列表样式的导航菜单。）
   </p>
   <ul>
     <li>
       <a href="#home">Home</a>
     </li>
     <li>
       <a href="https://www.a2doc.com/tool/">Tools</a>
     </li>
     <li>
       <a href="https://www.a2doc.com/snippets">Snippets</a>
     </li>
     <li>
       <a href="https://www.a2doc.com/quiz/">Quizzes</a>
     </li>
     <li>
       <a href="https://www.a2doc.com/string-functions/">String Functions</a>
     </li>
   </ul>
 </body>
</html>
← HTML Links
HTML Colors →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部