The list in HTML

The list in HTML can be divided into 1. Unordered list (in ul--li form)

2. Sequence list (in the form of Ol Li)

3. Definition list (DL form)

Here are a few things to look at in the list:

1. Unordered list.

The format of the unordered list is as follows:

<ul>    <Li>Li1</Li>    <Li>Li1</Li>    <Li>Li1</Li>    <Li>Li1</Li></ul>    

Unordered lists have their own default styles, and the default styles that come with them are not the same as they appear in different browsers. We generally use reset.css to understand the differences between these default styles.

Some of the specific CSS properties of the unordered list are list-style-type,list-style-position, and list-style-image. These properties set the type of the list bullet, the location of the marker, and the use of the picture instead of the tag. These three attributes can be combined by using list-style abbreviations.

2. There are sequence tables:

The HTML code for an ordered list is generally as follows:

<ol>    <Li>Li1</Li>    <Li>Li1</Li>    <Li>Li1</Li>    <Li>Li1</Li></ol>  

A sequence list is often used when a recursive increment is required in front of the list (for example, a. List type List-style-type with sequence lists can be set to any value that can be set under the unordered list. In most cases, a sequence table is either preceded by an increment value or preceded by no markup. It is not recommended to use an ordered list for performance similar to unordered lists. because of this, the semantics of the sequence list itself are already incorrect.

3. Define the list:

A definition list is used to mark list items that are already defined, including the definition title (DT) and the definition itself (DD). There is no need for the definition list item to match exactly, and the following code is completely legal under strict XHTML:

<DLclass= "Fore">   <DT><ahref= "#nogo">Men's</a></DT>   <DD>Addidas</DD>   <DD>Nike</DD>   <DD>Anta</DD>
</DL>

To see the results you can refer to the demo page.

Examples and Applications:

　　

Some examples and applications
1. Navigation bar
So far, the most common use of unordered lists is the navigation bar, whether horizontal or vertical, since the table-based layout is obsolete and the unordered list has been widely used as the basis for navigational elements, as shown in the following list:

• The unordered list is a block-level element that does not need to wrap a div outside to apply background or other graphics extensions.
• When the style is disabled, the list style is downgraded gracefully, preserving its original style, ensuring that the navigation item behaves differently from the rest of the page.
• Although unordered lists are not just a simple list, add elements such as <a> tags, but additional <li> elements will make the navigation bar behave in a more flexible way.
• Navigation is divided into lists and/or sub-lists, allowing the use of assistive technologies such as screen readers, which users can easily skip through the entire navigation bar.

Vertical drop-down navigation bar demo.

This article abstracts from Zhang Xin Asahi great God's blog, the blog Content link: http://www.zhangxinxu.com/wordpress/?p=489

The list in HTML