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
Analysis of Difficulties in Hot Standby of MySQL Database
I have previously introduced to you the configura...
WeChat applet development practical skills: data transmission and storage
Combining the various problems I encountered in m...
Implementing the page turning effect through sliding and the click event problem on the mobile terminal
aforementioned This article is very short~ The ma...
Writing methods that should be prohibited in native JS
Table of contents Block-level functions Directly ...
Detailed explanation of common MySQL operation commands in Linux terminal
Serve: # chkconfig --list List all system service...
.NETCore Docker implements containerization and private image repository management
1. Introduction to Docker Docker is developed in ...
In-depth study of MySQL composite index
A composite index (also called a joint index) is ...
Linux sftp command usage
Concept of SFTP sftp is the abbreviation of Secur...
Detailed comparison of Ember.js and Vue.js
Table of contents Overview Why choose a framework...
Dockerfile echo specifies the method of implementing multiple lines of text in the specified file
Add multiple lines to the specified file in Docke...
MySQL series multi-table join query 92 and 99 syntax examples detailed tutorial
Table of contents 1. Cartesian product phenomenon...
Shell script nginx automation script
This script can satisfy the operations of startin...
Vue2 implements provide inject to deliver responsiveness
1. Conventional writing in vue2 // The parent com...
Some suggestions for Linux system optimization (kernel optimization)
Disable swap If the server is running a database ...
Tips for efficient use of CSS style sheets: Take full advantage of the power of style sheets
With the continuous development of the Internet ec...