Home > Article > Web Front-end > How to remove the label from the ol tag in html? Summary of how to use the
- tag
How to remove the label from the ol tag in html? Summary of how to use the tag
- 寻∝梦Original
- 2018-08-31 13:35:2119630browse
This article introduces how the ol tag of HTML removes the serial number. There is also a detailed explanation of the code. It also introduces how to change the serial number of the HTML ol ordered list tag, which is introduced below. There are three types of serial numbers, and you can also decide which serial number to fill in. Now let’s look at this article
1. Let’s first take a look at how to remove the label from the ol tag in HTML:
We We all know that the ol tag of HTML is an ordered list of tags. It usually goes on like 1, 2, 3, and 4. Sometimes you don’t want it to go on like this and want to change these numbers to something else. For example, replace it with your own serial number, such as A, I, i, etc. Or, if you don’t want these symbols anymore and want to remove the previous serial number, let’s first talk about how to remove the serial number. (If you want to see more, come to the PHP Chinese website, courses about HTML programming)
Let’s take a look at a complete code example first
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <ol> <li>php中文网</li> <li>百度</li> <li>腾讯</li> </ol> </body> </html>
This is a basic ol tag code. The effect is shown in the figure below:
We can obviously see that the serial number of this ol tag starts with 123 by default. , all use lowercase numbers as the default serial number, so what we have to do is to remove the serial number.
Now let me show you a code example that has removed the ol tag serial number:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
ol{
list-style:none;
}
</style>
</head>
<body>
<ol>
<li>php中文网</li>
<li>百度</li>
<li>腾讯</li>
</ol>
</body>
</html>
跟上面也差Not much, here is a little more cascading style sheet css style than above, this style , you don’t need to understand it now, we will talk about this later. What you need to do now is to remember the code of this css style. The function of this style is to cancel the serial numbers in all ol tags in the current web page. The effect is as shown in the figure:
There is no serial number on it. Obviously our experiment was successful. Although CSS style was used, this is only the simplest style example. . Using this method to remove labels is the simplest and most commonly used method.
2. Now let’s take a look at how to change the serial number in the ol tag:
We don’t need css style here, It's just an attribute in the most basic html tag.
Now we introduce the type attribute in this ol tag: the type attribute defines the serial number type in the ol list.
Next, let’s experiment with three types: “A”, “I”, and “i”:
The following is the code for this:
<body> <ol type="A"> <li>php中文网</li> <li>百度</li> <li>腾讯</li> </ol> </body>
Effect As shown in the figure below:
This attribute stipulates that the serial number of the ol tag is changed to a list starting with "A", so it is displayed like this.
The same is true when the value of this type attribute is equal to "a", starting from lowercase a, abc and the like.
The same is true when the type attribute value is equal to "I". Let's take a look at the effect:
When the type attribute value is equal to "i" and It's almost equal to "I".
Personal summary about the usage of html ol tag:
Now we can basically think of using ol tag to make various lists, and change the serial number to whatever we want. Serial number, you have the final say on your list. The definition of ol ordered list is that it can use any sequence number that can be extended indefinitely. If the sequence numbers are the same, it will be no different from an unordered list. So it’s better to use ordered lists. (If you want to learn more, come here: PHP Chinese Online HTML Course)
[Editor’s Recommendation]
Where can I find the head tag in HTML? Summary of the role of the head tag
#What are the three elements of the meta tag in html5? Summary of the use of meta tags
The above is the detailed content of How to remove the label from the ol tag in html? Summary of how to use the
- tag. For more information, please follow other related articles on the PHP Chinese website!