标签--有序列表
程序员文章站
2022-06-27 21:54:42
[2019.07.03 学习笔记1] 1.定义有序列表,有顺序。 2.默认情况下采用数字进行标记，有序列表始于
- 标签，每个列表项始于
- 。 1 2 3 4 5
[2019.07.03 学习笔记1]
1.定义有序列表,有顺序。
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属性
type="1" 默认数字
type="a" type="a" 字母列表
type="i" type="i" 罗马字母列表
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>
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>
6.<ol>是块级元素
上一篇： DotNet加密方式解析--对称加密
下一篇： 成语接龙-查找指定层数以内的成语