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  一菲聪天  阅读(343)  评论(0)  编辑  收藏  举报