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的列表

<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

 

你可能感兴趣的:(html)