Home >Web Front-end >HTML Tutorial >Advanced application of ol tag and li tag in html

Advanced application of ol tag and li tag in html

黄舟Original: 2017-06-30 14:03:032310browse

This article mainly introduces the advanced application of ordered list tags ol and li in HTML.

When designing ordered list content in web design, we often manually add a value before each ITEM. Or add this value by the program.

If you use the ordered list tags ol and li, 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 when using a multi-level list At that time, its characteristics are obvious.

The general application code of the ordered list of tags ol and li is as follows:

 <ol>
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

Let’s take a look at the advanced application of the ordered list tags ol and li:

Changes are The start value of the sequence list

The # attribute that changes the start value is: "start", the following is a sequence with the sequence number starting from 10 Table example code:

 <ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

Run the code to see Effect:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
</body>
</html>

Set the serial number of the ordered list Type

The attribute that changes the number type is: "type". The type type has the following types:

A Capital letters A, B, C, D, E

a Lowercase letters a, b, c, c, e

I Uppercase Roman numerals I, II, III, IV, V

i Lowercase Roman numerals i, ii , iii, iv, v

1 Arabic numerals 1, 2, 3, 4, 5

The following is an example code of a sequence table where the serial number type is uppercase letters:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<ol type="A">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
</body>
</html>

The above is the detailed content of Advanced application of ol tag and li tag in html. For more information, please follow other related articles on the PHP Chinese website!

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：Detailed explanation of the use and definition of html

tag

Next article：Detailed explanation of the use and definition of html

tag

See more

Advanced application of ol tag and li tag in html

Related articles