Ask?

We know that tables are generally used for data display, but there are still many similar layouts in the web page, as shown in the following picture ~~ what do we use to do?

A:

The answer is a list. What is a list? Tables are for displaying data, so lists are for layout. Because it’s very neat and free

1. The concept:

A container holds a form of structured, consistent text or chart called a list

2. Features:

The biggest characteristic of a list is that it is neat, clean and orderly, similar to a table, but it can be combined with a higher degree of freedom.

3. Unordered list UL

Items in an unordered list are juxtaposed rather than ordered. The basic syntax is as follows:

< ul > < li > list item 1 < / li > < li > list item 2 < / li > < li > list item 3 < / li >... </ul>Copy the code

For example, the following news is not in order, no queue, first come, first served, first published first displayed.

Watch your step:

1. <ul></ul> can only nest <li></li>. It is not allowed to directly input other tags or characters in <ul></ul> tags. 2. A container between <li> and </li> can contain all elements. 3. Unordered lists have their own style attribute, drop that style and let CSS do it later!Copy the code

4. Ordered list OL

An ordered list is a list with an order, and its items are defined in a certain order. The basic syntax of an ordered list is as follows:

< ol > < li > list item 1 < / li > < li > list item 2 < / li > < li > list item 3 < / li >... </ol>Copy the code

All features are basically consistent with UL. But it’s actually used a lot less than unordered lists.

5. Customize a list

Defining lists are often used to explain and describe terms or nouns without any bullet in front of the list item. The basic syntax is as follows:

< dl > < dt > noun 1 < / dt > < dd > noun explanation 1 < / dd > < dd > noun 1 < / dd > 2... <dt> noun 2</dt> <dd> noun 2解释1</dd> <dd> noun 2解释2</dd>... </dl>Copy the code

It works ok:

6. List summary

Tag name define instructions
<ul></ul> Unordered label It can only contain li in no order, the most common list we’ll use in future layouts
<ol></ol> Orderly label It can only contain the order of Li, which is rarely used
<dl></dl> Custom list There are two brothers, DT and DD

We haven’t learned layout yet, so just make sure there are two points:

  1. When to use unordered lists and when to use custom lists
  2. How to write unordered list and custom list code?
  3. Specific we just look at the layout, so we learned CSS in the overall layout.