Home >Web Front-end >HTML Tutorial >Markup language - another discussion list_HTML/Xhtml_Web page production

Markup language - another discussion list_HTML/Xhtml_Web page production

PHP中文网Original: 2016-05-16 16:45:551301browse

Previously in Chapter 1, we discussed several ways to mark lists, and looked at the benefits of marking them as unordered lists with

. This method can mark the structure of the list and ensure that all Browsers and devices can display its content correctly, and it also allows us to add various styles to it using CSS.
In various circumstances, it would not be difficult to fill up the whole book with all the ways to mark the list when dealing with individual problems. I don’t plan to fill the whole book, but I do plan to use a separate chapter to discuss the exceptions. Several categories of lists other than unordered lists. Explore several situations in which lists are appropriate.
List is a powerful tool for organizing page structure, adding meaning to each independent item, allowing you to add independent styles with CSS later.
Let’s start by looking at a numbered list of items, and two ways to mark such a list. Maybe you can see at a glance which method is more beneficial, but I’ll elaborate on the example again so that Emphasizes the importance of structured markup and using the right tools to solve problems. Which method of notation is best for numbered item lists?
Suppose you plan to mark a list of steps, with each item preceded by a number. We will look at two different ways to achieve this goal, and explain why one method is more suitable. 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 cloves 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 the history of cooking. But it is good as a simple example. It might be better to add some salt and eggs, or... whatever, Back to topic.
Method A We choose to mark these steps as 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 If we handle this part of the content correctly, we can also easily specify styles for it using css later, which is great! But... numbers game
Since this is a numbered list, we add a number before each item and a period after the number to identify the order of each step, but if you need to do it later between step 2 and step 3 What if we add a new step? Now we need to (manually) renumber all the items after the new step. For this list, it is not a troublesome thing, but if you are modifying a list with 100 items list, the modification process becomes very tedious. A small dot symbol appears
Since we marked the structures in this example as an unordered list, you will see a little dot symbol before each numbered item (just like Figure 8-1). You might also like the little dot symbol. Symbol, of course you can remove it through CSS if you don’t like it, but when you browse this list without using CSS, you will definitely see these little dot symbols again.

Picture 8-1. The browser closes the result of 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 cloves of 
garlic.</li>
<li>Cook for another 3 
minutes.</li>
<li>Eat.</li>
</ol>
```
I'm sure this is what most people do, but that doesn't mean we all don't use method A in some situations, for some reason.

Statement：

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

Previous article：HTML is actually the application of learning several important tags_HTML/Xhtml_Webpage ProductionNext article：HTML is actually the application of learning several important tags_HTML/Xhtml_Webpage Production

See more

Markup language - another discussion list_HTML/Xhtml_Web page production

Related articles