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>
View Code

     注意:在上述的图中,看样看到列表前面有个小圆圈,这是通过修改 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>
View Code

 

posted @ 2015-05-09 10:59  一菲聪天  阅读(348)  评论(0编辑  收藏  举报