Home > Web Front-end > HTML Tutorial > HTML Tutorial: Ordered List_HTML/Xhtml_Web Page Production

HTML Tutorial: Ordered List_HTML/Xhtml_Web Page Production

WBOY
Release: 2016-05-16 16:46:05
Original
1703 people have browsed it

Original text: http://andymao.com/andy/post/103.html
Previous section: Unordered list
Sometimes information is summarized out of order, but some has a clear order, which was also mentioned in the previous article. So simply think about what things around you are in order: operation steps, rankings, book catalogs... In the past, when we faced these contents with order or numbers indicating the order, we mostly added them before the data. The previous value, or the value added by the program. If you use an ordered list, you don't need to be so troublesome. You don't have to fill in the ordinal numbers yourself. This feature does not seem to be obvious when using a single-level list, but it becomes obvious when using multiple levels. So let’s first understand the code form of an ordered list:

  1. This is the content of the list, this is the first sentence

  2. This is the content of the list, this is the second sentence

  3. This is the content of the list, this is the third sentence

  4. This is the content of the list, this is the fourth sentence

  5. This That’s it for the list, this is the fifth sentence


You can see that its form is the same as that of an unordered list, except that the names on the peripheral labels are different. Disorder is UL, order 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 the order.
Change start value
Normally, the browser will automatically number sequentially starting from the Arabic numeral "1". But things are special. When the ordered list needs to be divided into two parts, then it is naturally wrong for the next person to start numbering from the beginning. Then the number of the next part will naturally be based on the last number of the previous paragraph plus 1 as the starting number. This means we need to change the starting value of the list. The attribute that changes the start value is: "start". The formal writing is:

  1. This is the content of the list, this is the first sentence

  2. This is the content of the list, this is the second sentence

  3. This is the content of the list, this is the third sentence

  4. This is the content of the list, this is the fourth sentence

  5. This That’s it for the list, this is the fifth sentence


Everyone noticed that the above code means that the starting value of the list starts from 6, so now you can try to add this attribute to an ordered list to see if it has changed?
Change number type
Browsers generally use Arabic numerals to number lists by default, so is there any other type? Yes, the attribute is "type", but there are not many types provided, only five types:
Type value Generate style Sequence example A uppercase letter A,B,C,D,E a lowercase letters a, b, c, c, e I uppercase roman numerals I, II, III, IV, V i lower case roman numerals i, ii, iii, iv, v 1 Arabic numerals 1, 2, 3, 4, 5
should be written in the code as:

  1. This is the content of the list, this is the first sentence

  2. This is the content of the list, this is the second sentence

  3. This is the content of the list, this is the third sentence

  4. This is the content of the list, this is the fourth sentence

  5. This That’s it for the list, this is the fifth sentence


I think it is better for people to use this type sparingly, because this type can also be set using CSS. I have always advocated that style matters should be done by style languages. So unless there are special reasons, it is better not to use this attribute. Of course, neither CSS1 nor CSS2 basically considers China. Japanese numbering characters have been provided in CSS2, but there is no Chinese yet. I think CSS2 is still flawed at this point, at least it does not provide a better extension form. Although he didn't provide it, we can still achieve diversification in our own way. How to do it? Please think about it first, and I will describe how I handle it later in the style content of the list.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template