#HTMLLists Study Guide - Creating Ordered and Unordered Lists to Enhance Web Content

introduction

HTML lists are a key element in web design, they allow us to present information, data or things in an ordered or unordered manner. In this detailed guide, we'll take a deep dive into lists in HTML, explore how to create ordered and unordered lists, and how to utilize list tags to enhance the readability and visualization of web content.

Table of contents

1. HTML unordered list
   • Basic unordered list syntax
   • Custom unordered list styles
   • Nested unordered lists
2. HTML ordered list
   • Ordered List Basic Syntax
   • Control the starting value and counting method of the ordered list
   • nested ordered list
3. List of HTML definitions
   • Definition List Basic Syntax
   • Define the use case of the list
   • nested definition list
4. common properties of lists
   • Label property for list items
   • List Accessibility
   • List style modification

1. HTML unordered list

An unordered list displays list items as symbols or icons without numbering. Learn the basic syntax of unordered lists and how to customize styles and nest list items.

1.1 Basic grammar of unordered list

Unordered lists <ul>are represented by labels, and each list item <li>is defined using a label.

Basic syntax example:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

1.2 Custom unordered list style

CSS can be used to customize the style of the unordered list, including symbol type, color and spacing.

Example of a custom style:

ul {
    
    
    list-style-type: square; /* 使用方块符号 */
    color: blue; /* 改变符号颜色为蓝色 */
    margin-left: 20px; /* 添加左侧间距 */
}

1.3 Nested unordered lists

Nested unordered lists can be created by placing one unordered list inside the list items of another unordered list.

Nested unordered list example:

<ul>
    <li>列表项1</li>
    <li>列表项2
        <ul>
            <li>子列表项1</li>
            <li>子列表项2</li>
        </ul>
    </li>
    <li>列表项3</li>
</ul>

2. HTML ordered list

An ordered list numbers the list items numerically or alphabetically, and presents them in the specified order. Learn the basic syntax of ordered lists, control labels, and nested list items.

2.1 Basic grammar of ordered list

Ordered lists <ol>are represented by labels, and each list item is <li>defined using a label.

Basic syntax example:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

2.2 Control the starting value and counting method of the ordered list

Attributes can be used startto specify the starting value of the ordered list, and typeattributes can be used to change the way labels are counted.

Example of control start value and counting method:

<ol start="5">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

<ol type="A">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

2.3 Nested ordered lists

Nested ordered lists can be created by placing one ordered list inside the list items of another ordered list.

Nested ordered list example:

<ol>
    <li>列表项1</li>
    <li>列表项2
        <ol>
            <li>子列表项1</li>
            <li>子列表项2</li>
        </ol>
    </li>
    <li>列表项3</li>
</ol>

3. HTML definition list

Definition lists are used to display terms and their corresponding definitions in the form of key-value pairs. Learn the basic syntax, usage scenarios, and nested list items for defining lists.

3.1 Definition List Basic Syntax

The definition list <dl>is represented by tags, and each term is <dt>defined with a tag, and the corresponding definition is used with <dd>a tag.

Basic syntax example:

<dl>
    <dt>术语1</dt>
    <dd>定义1</dd>
    <dt>术语2</dt>
    <dd>定义2</dd>
    <dt>术语3</dt>
    <dd>定义3</dd>
</dl>

3.2 The usage scenarios of the definition list

Definition lists are often used in glossaries, glossaries, or documentation to clearly present terms and their corresponding definitions.

Example usage scenarios:

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>一种高级编程语言</dd>
</dl>

4. Common properties of lists

List items can use some common properties to enhance their functionality

4.1 Label attribute of list item

List items can use the following label attributes to enhance their functionality:

• value: Used to specify the value of an ordered list item.
• type: Used to specify the symbol type for unordered list items.

Example tag attributes:

<ol>
    <li value="100">列表项1</li>
    <li value="200">列表项2</li>
    <li value="300">列表项3</li>
</ol>

<ul>
    <li type="circle">列表项1</li>
    <li type="square">列表项2</li>
    <li type="disc">列表项3</li>
</ul>

4.2 Accessibility of lists

To provide better accessibility, lists should contain appropriate semantic information and use appropriate ARIA attributes.

Accessibility example:

<ul role="list">
    <li role="listitem">列表项1</li>
    <li role="listitem">列表项2</li>
    <li role="listitem">列表项3</li>
</ul>

<ol role="list">
    <li role="listitem">列表项1</li>
    <li role="listitem">列表项2</li>
    <li role="listitem">列表项3</li>
</ol>

4.3 Style modification of the list

CSS can be used to modify the style of the list, including modifying the style of the list items, modifying the spacing of the list, and adding a background.

Example of style modification:

li {
    
    
    color: red; /* 改变列表项的颜色为红色 */
}

ul {
    
    
    margin-top: 20px; /* 添加列表顶部间距 */
    background-color: #f5f5f5; /* 添加背景颜色 */
}

This concludes the HTML list study guide. Hope this guide can help you master the use of lists in HTML, and how to customize styles and nesting according to your needs. By judicious use of lists, you can enhance the readability and visualization of web content.