標籤--有序列表

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。