HTML Tutorial: Ordered Lists
|
<br />Original text: http://andymao.com/andy/post/103.html Previous section : Unordered list Information is sometimes summarized in disorder, but sometimes it has a clear order, which was also mentioned in the previous article. So let's simply think about the things around us that have a sequence: operating steps, rankings, book catalogs... In the past, when we faced these contents with a sequence or numbers indicating the order, we mostly added a number in front of the data ourselves, or had the program add this number. If you use an ordered list, you don't need to be so troublesome. You don't have to fill in the ordinal number yourself. This feature does not seem to be obvious when using a single-layer list, but it becomes very obvious when using multiple layers. Then let's first understand the code form of the ordered list: <ol> <li>This is the content of the list, this is the first sentence</li> <li>This is the content of the list, this is the second sentence</li> <li>This is the content of the list, this is the third sentence</li> <li>This is the content of the list, this is the fourth sentence</li> <li>This is the content of the list, this is the fifth sentence</li> </ol> As you can see, its basic form is the same as that of an unordered list, except that the names on the outer tags are different. Unordered is UL, and ordered becomes OL. The difference is that an ordered list will have more tag attributes than an unordered list. Because it is ordered, it involves all aspects of sequence. Change the starting value <br />Normally the browser will automatically number the numbers sequentially starting from the Arabic numeral "1". However, when an ordered list needs to be split into two parts, it would be wrong to start numbering the next part from the beginning. Then the numbering of the next part will naturally start from the last number of the previous part plus 1. This means we need to change the start value of the list. The property to change the start value is: "start", the formal way to write it is: <ol start="6"> <li>This is the content of the list, this is the first sentence</li> <li>This is the content of the list, this is the second sentence</li> <li>This is the content of the list, this is the third sentence</li> <li>This is the content of the list, this is the fourth sentence</li> <li>This is the content of the list, this is the fifth sentence</li> </ol> As you may have noticed, the code above says that the starting value of the list starts at 6. Now, can you try adding this attribute to an ordered list to see if anything changes? Change the numbering type <br />By default, browsers use Arabic numerals for list numbers. Is there another type? Yes, the attribute is "type", but there are only five types provided: Type value generation pattern sequence example A uppercase letters A, B, C, D, E a lowercase letters a, b, c, c, e I uppercase Roman numerals I, II, III, IV, V i lowercase Roman numerals i, ii, iii, iv, v 1 Arabic numerals 1, 2, 3, 4, 5 The code should be written as: <ol type="A"> <li>This is the content of the list, this is the first sentence</li> <li>This is the content of the list, this is the second sentence</li> <li>This is the content of the list, this is the third sentence</li> <li>This is the content of the list, this is the fourth sentence</li> <li>This is the content of the list, this is the fifth sentence</li> </ol> I think it is better to use this type value less often, because this type can also be set using CSS. I have always advocated that style matters should be done by style languages. Unless there are special reasons, it is better not to use this attribute. Of course, neither CSS1 nor CSS2 basically took China into consideration. Japanese numbering characters have been provided in CSS2, but not Chinese. I think CSS2 still has flaws in this regard, at least it does not provide a better form of expansion. Although he didn't provide it, we can still achieve diversity in our own way. How to do it? Please think about it first. I will explain how I deal with the list style later. |
>>: Solve the problem of docker log mounting
Recommend
Example operation MySQL short link
How to set up a MySQL short link 1. Check the mys...
HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar
Table of contents First look at the effect: accom...
JavaScript canvas to achieve colorful clock effect
Use canvas to write a colorful clock! 1. Title (1...
Vue's simple implementation process of imitating NetEase Cloud Music Player interface
Due to the needs of the work project, song playba...
HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code
Effect (source code at the end): accomplish: 1. D...
Detailed explanation of the relationship between React and Redux
Table of contents 1. The relationship between red...
JavaScript CollectGarbage Function Example
First, let's look at an example of memory rel...
Detailed explanation of the role of explain in MySQL
1. MYSQL index Index: A data structure that helps...
Explore how an LED can get you started with the Linux kernel
Table of contents Preface LED Trigger Start explo...
HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)
Without further ado, I will post the code for you...
Configure VIM as a C++ development editor in Ubuntu
1. Copy the configuration file to the user enviro...
How to use crontab to add scheduled tasks in Linux
Preface The Linux system is controlled by the sys...
Use non-root users to execute script operations in docker containers
After the application is containerized, when the ...
uniapp Sample code for implementing global sharing of WeChat mini-programs
Table of contents Create a global shared content ...
Linux nohup command principle and example analysis
nohup Command When using Unix/Linux, we usually w...