Click here to return to the Wulin.com HTML tutorial column.
Above: Markup Language - Anchor Point
Original source Chapter 8 Let’s talk about the list again
Previously in the first chapter, we discussed several ways to mark lists, studying the benefits of marking them as disordered lists with <ul> and <li>. This method can identify the structure of the list, ensure that all browsers and devices can correctly display its contents, and also allow us to add various styles to it with CSS.
In various environments, it is not difficult to fill the entire book by writing all the practices of marking lists when dealing with individual issues. I do not plan to fill the entire book, but I do plan to discuss several other list categories in an independent chapter besides disordered lists. Research several situations suitable for using lists.
Checklists are a powerful tool for organizing page structure, adding meaning to each independent project, allowing you to add independent styles later in CSS.
Let's first look at the numbered project list and two ways to mark such lists. Maybe you can see which method is more beneficial at a glance, but I will still explain this example in detail again to emphasize the importance of structured marking and using the right tools to solve problems. Which is the best way to mark a numbered project list?
Suppose you plan to mark a step list, each project has a number before, we will study two different methods that can achieve this goal, and explain why a certain method is more applicable. Method A: Order in chaos
<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the onions for 3 minutes.</li>
<li>3. Add 3 clloves of garlic.</li>
<li>4. Cook for another 3 minutes.</li>
<li>5. Eat.</li>
</ul>
The previous list may be one of the worst recipes in cooking history. But it’s quite appropriate to use it as a simple example, adding a little salt and eggs might be better, or... no matter what, back to the point.
Method A We choose to mark these steps with an unordered list in order to get all the benefits we mentioned in Chapter 1, we add structure to the content, and know that most browsers, screen readers and other devices can handle this part correctly, and we can also use css to easily style it, which is great! But... digital games
Since this is a numbered list, we add numbers before each project and followed by a period to identify the order of each step, but what should we do if we need to add new steps between steps 2 and 3? Now we need to renumber all the items after the new steps (manually). This list is not a hassle, but if you are modifying a list of 100 items, the modification process will become very tedious. Small dot symbols appear
Since we mark the structure in this example with an unordered list, we will see a small dot symbol before each numbered project (like Figure 8-1). You may like the small dot symbol. If you don't like it, of course you can remove it through CSS, but you will definitely see these small dot symbols when browsing this list without using CSS.
Figure 8-1, Results of Browser Close CSS Reading Method A
There is a simpler, more meaningful and easier to maintain method. Let's take a look at Method B. Method B: Ordered List
<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 clloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>
I'm sure this is what most people choose to do, but this does not mean that we are not using method A.<ol> for some reason for using ordered list, so semantically we use the correct elements to solve the problem in our hands. What's more special about method B? Automatic numbering
Maybe you find that we don't have to manually number each list item. When using <ol>, we will automatically generate numbers in order. If our step list contains more than 100 items and we need to insert a few new steps in the middle, we just need to simply insert a new <li> item in the correct position, and the browser will automatically renumber it, just like magic.
If using Method A, we need to manually correct all numbers when inserting each project. I can easily think of any more interesting work to do...
Figure 8-2, the effect of the eleventh version of browser display method B, automatically added a number before each step.
Figure 8-2 The happy effect of browser display method B, Part 2
Another advantage of method B is that when a long list item is broken, it will be indented after the generated number, while method A will be folded below the number (Figure 8-3)
Figure 8-3 Comparison of the list of new line effects of Method A and Method B
Although the preset numbering styles of an ordered list are usually Arabic numerals (1,2,3,4,5, etc.), we can replace the numbering style by using the list-style-type attribute of CSS. The list-style-type can be selected in one of the following: decimal: 1,2,3,4,... (usually the preset value) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: No numbering
So, for example, if we want method B to produce a capital Roman number, we can achieve the following CSS:
ol li {
list-style-type: upper-roman;
}
Figure 8-4 is the display effect of Method B with this CSS in the browser. Our step list is no longer preset Arabic numerals, but is replaced with Roman numerals. Of course, the marked parts are still exactly the same. Have you changed your mind? Just make some small changes and change to other styles listed earlier, and you can immediately change the numbering method of the list to what you like.
Figure 8-4 Ordered list of switches to Roman numerals
HTML type attribute: Before, some people might use the type attribute directly in the <ol> tag, changing the numbering method of the list to Roman numerals, English letters, etc. However, in order to support the CSS rules mentioned earlier, it is not recommended to use the type attribute since the HTML 4.01 standard. Therefore, you should no longer use the type attribute, you should use CSS instead.
Later, in the tip extension, we will style this ordered list with CSS. But now let's look at another list type example.
Previous page 1 2 3 Next page Read the full text