list tag
list is used very frequently in various page content display forms.
HTML lists are divided into the following three types: on the left side we call it an ordered list, in the middle we call it an unordered list, and on the right we call it a custom list. In this class, we will first learn the ordered list.
See several examples, markdown directory in the file, shopping and ticketing guide, instrument usage steps, Baidu hot search list, etc. are all displayed through the list.
We found that these lists have a common feature. The front of each content has a numerical number.
In HTML, these ordered lists are called ordered lists. They can express information such as display sequence operation steps, rankings, etc.
Ordered list consists of two elements: element ol and element li, both of which are father-son relationships. The li tag must be wrapped in ol. ol is the abbreviation of order list, which means an ordered list. li is the abbreviation of list item, which means a list, and both are double tags.
The syntax for an ordered list is
Here again emphasizes that in order to follow the W3C syntax standards, ol can only nest li in ol. If other tags need to be nested, it must be placed in the li tag.
Here put some text in the li tag.
to make a case: How many steps should I put in the refrigerator? 3 steps!
Open the editor, create a new order_list.html file , complete the basic code, use ctrl + slash ( / ) to implement a comment in the body, add it in the comment, This is an introduction to the ordered list .
This case requires using an ol, which wraps three lis in it, enter the contents of the three steps into the corresponding li tag, open the refrigerator door, put the elephant in, bring the refrigerator door on, and save it.
opens the page in the browser, and clearly see that the sequence number is automatically added in front of the three steps 1 2 3
The sequence number in front of the list here is called bullets. The default bullet value of the ordered list is a natural number, starting from 1.
need to be noted. In order to take into account the needs of multilinguals, the W3C standard stipulates that bullets for ordered lists can be set by adding type attributes to the ol tag to define the value of the type attribute. There are five types of values for types that everyone needs to remember: A/a/I/i/1 uppercase A lowercase a lowercase i digit 1 each represents English alphabetical order, Roman numeral order, and Arabic numeral order.
Return to the editor, add attribute type to the ol tag, set the attribute value to uppercase letter A (A), save.
Return to the browser, refresh, the bullet displayed in the original number becomes a letter starting with capital A.
can realize the starting sequence number by adding another attribute to ol. The value of start is a numeric sequence number. No units are required.
Return to the editor to add another start attribute to ol, with the value of 6, and save.
Back to the browser Refresh, the bullets of the ordered list start from A to F.
Article supporting video:
https://www.bilibili.com/video/BV1oU4y1278g?p=15
