html的列表
1.无序列表(最常用)
先看个例子:如下图:
使用的 html标签为
<ul> <!--ul是UnorderList的缩写,意为无序列表;li是ListItem的缩写,列表项-->
<li></li>
</ul>
1 <html> 2 <head> 3 <title>html list test</title> 4 </head> 5 <body> 6 <!--ul is the Unordered_List --> 7 <ul> 8 <!--li is List_Item--> 9 <li>Tommy</li> 10 <li>Jacky</li> 11 <li>Sam</li> 12 </ul> 13 </body> 14 </html>
注意:在上述的图中,看样看到列表前面有个小圆圈,这是通过修改 ul标签的 type属性来变化的
<ul type="value"> 属性值:
值 | 描述 |
---|---|
disc | 默认值。实心圆。 |
circle | 空心圆。 |
square | 实心方块。 |
更多信息请参考官方文档:http://www.w3school.com.cn/tags/att_ul_type.asp
2.有序列表(用的不多)
标签为: <ol> <!--ol是OrderedList的简称-->
<li></li>
</ol>
ol的排序指的是在数据的前方显示序号而已,并不会对内容进行任何排序(所以是个鸡肋)
两个常用的属性:
2.1. type属性:5个候选值,表示排序所使用的文字
2.2. start属性:表示排序的起始位置,效果如下图
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8;"/> <title>html ordered list test</title> </head> <body> <ol type="1"> <li><font color="red">当type为数字1时,表示前方的排序用阿拉伯数字</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> <ol type="a"> <li><font color="red">当type为a时,表示前方的排序用小写字母</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> <ol type="A"> <li><font color="red">当type为A时,表示前方的排序用大写字母</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> <ol type="i"> <li><font color="red">当type为小写字母i时,表示前方的排序用小写罗马数字</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> <ol type="I"> <li><font color="red">当type为大写字母I时,表示前方的排序用大写罗马数字</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> <ol start="100"> <li><font color="red">start为排序起始数字,这里从100开始</font></li> <li>Tommy</li> <li>Jacky</li> <li>Sam</li> </ol> </body> </html>