标签--有序列表

时间 2019-12-13

标签标签有序列表繁體版

原文原文链接

[2019.07.03 学习笔记1]html

1.定义有序列表,有顺序。ide

2.默认状况下采用数字进行标记，有序列表始于<ol>标签，每一个列表项始于<li>。学习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>有序列表 </title>
 6 </head>
 7 <body>
 8     <ol>城市
 9         <li>北京</li>
10         <li>广州</li>
11         <li>上海</li>
12         <li>...</li>
13     </ol>
14 </body>
15 </html>

有序列表

3.改变项目符号，在<ol>标签上加上type属性spa

type="1" 默认数字code

　type="A" type="a" 字母列表htm

type="I" type="i" 罗马字母列表blog

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>有序列表 </title>
 6 </head>
 7 <body>
 8     <!--默认-->
 9     <ol>默认项目符号
10         <li> <a href="http://www.baidu.com/">百度连接1</a></li>
11         <li><a href="http://www.baidu.com/">百度连接2</a></li>
12         <li><a href="http://www.baidu.com/">百度连接3</a></li>
13     </ol>
14     <!-- 1：数字列表-->
15     <ol type="1">1：数字列表
16         <li> <a href="http://www.baidu.com/">百度连接1</a></li>
17         <li><a href="http://www.baidu.com/">百度连接2</a></li>
18         <li><a href="http://www.baidu.com/">百度连接3</a></li>
19     </ol>
20     <!--A：大写字母列表-->
21     <ol type="A">A：大写字母列表
22         <li> <a href="http://www.baidu.com/">百度连接1</a></li>
23         <li><a href="http://www.baidu.com/">百度连接2</a></li>
24         <li><a href="http://www.baidu.com/">百度连接3</a></li>
25     </ol>
26     <!--a：小写字母列表-->
27     <ol type="a">a：小写字母列表
28             <li> <a href="http://www.baidu.com/">百度连接1</a></li>
29             <li><a href="http://www.baidu.com/">百度连接2</a></li>
30             <li><a href="http://www.baidu.com/">百度连接3</a></li>
31     </ol>
32     <!--I：大写罗马字母列表-->
33     <ol type="I">I：大写罗马字母列表
34         <li> <a href="http://www.baidu.com/">百度连接1</a></li>
35         <li><a href="http://www.baidu.com/">百度连接2</a></li>
36         <li><a href="http://www.baidu.com/">百度连接3</a></li>
37     </ol>
38     <!--i：小写罗马字母列表-->
39     <ol type="i">i：小写罗马字母列表
40         <li> <a href="http://www.baidu.com/">百度连接1</a></li>
41         <li><a href="http://www.baidu.com/">百度连接2</a></li>
42         <li><a href="http://www.baidu.com/">百度连接3</a></li>
43     </ol>
44 </body>
45 </html>

有序列表--type属性

4.可继续嵌套<ol>标签图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表 </title>
</head>
<body>
<ol>
    <li>有害垃圾</li>
    <li>可回收物</li>
    <li>湿垃圾</li>
    <li>干垃圾
        <ol>
            <li>餐盒</li>
            <li>餐巾纸</li>
            <li>湿纸巾</li>
            <li>硬果壳
                <ol>
                    <li>椰子壳</li>
                    <li>榴莲壳</li>
                    <li>核桃壳</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>
</body>
</html>

有序列表-嵌套

5.<li>也可嵌套图片<img>it

6.<ol>是块级元素event