How to remove the label from the ol tag in html? Summary of how to use the tag-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to remove the label from the ol tag in html? Summary of how to use the tag

寻∝梦

Aug 31, 2018 pm 01:35 PM

html ol type

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>

Copy after login

This is a basic ol tag code. The effect is shown in the figure below:

How to remove the label from the ol tag in html? Summary of how to use the <ol> tag

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>
跟上面也差

Copy after login

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:

How to remove the label from the ol tag in html? Summary of how to use the <ol> tag

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>

Copy after login

Effect As shown in the figure below:

How to remove the label from the ol tag in html? Summary of how to use the <ol> tag

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:

How to remove the label from the ol tag in html? Summary of how to use the <ol> tag

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!

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