标签–有序列表

更新时间:2023-04-06 08:37:55 阅读：评论：0

[2019.07.03 学习笔记1]

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

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

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4     <meta chart="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属性

type=”1″ 默认数字

　type=”a” type=”a”凛冽的近义词;字母列表

type=”i” type=”i” 罗马字母列表

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4     <meta chart="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&硕士是什么学历gt;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>

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

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>无序列表 </title></head><body><ol>    <li>有害垃圾</li>    <li>可回收物</li>    <li>湿垃圾</li>    <li>干垃圾        <ol>            <li&霸气传奇名字gt;餐盒</li>            <li>餐巾纸</li>            <li>湿纸巾</li>            <li>硬果壳                <ol>                    <li>椰子壳</li>                    <li>榴莲壳</li>                    <li>核桃壳</li>                </ol>            </li>        </ol>    </li></ol></body></html>

5.<li>国内最好的舞蹈学院也可嵌套图片<img>

6.<ol>是块级元素

本文发布于:2023-04-06 08:37:52，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/00fa8401074d3b442e4935de8805ac6b.html