HTML列表的常用属性及其应用

首先列表分成有序和无序分别是<ol><ul>，无序的比较简单，看个例子：

 1 <html>
 2 
 3 <body>
 4 
 5 <h4>一个无序列表：</h4>
 6 <ul>
 7   <li>咖啡</li>
 8   <li>茶</li>
 9   <li>牛奶</li>
10 </ul>
11 <h4>一个有序列表：</h4>
12 <ol>
13   <li>咖啡</li>
14   <li>牛奶</li>
15   <li>茶</li>
16 </ol>
17 </body>
18 </html>

网页显示：，我们可以看到无序的只是个黑色实心点，有序的列表可以看到1,2,3，这只是默认的，如果我们要让它变成5,6,7呢：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <ol>
 6   <li>咖啡</li>
 7   <li>牛奶</li>
 8   <li>茶</li>
 9 </ol>
10 
11 <ol start="5">
12   <li>咖啡</li>
13   <li>牛奶</li>
14   <li>茶</li>
15 </ol>
16  
17 </body>
18 </html>

网页显示：，只需在<ol star="value">中的value加个值。综上所述：有序列表放在<ol></ol>中，无序列表放在<ul></ul>中。当然它们两个的子属性不止这些，比如无序列表的属性还有“circle”:空心原点，“disc”：实心原点也是默认值，“square”：实心小正方形。来看个例子：

 1 <html>
 2 <body>
 3 
 4 <h4>Disc 项目符号列表：</h4>
 5 <ul type="disc">
 6  <li>苹果</li>
 7  <li>香蕉</li>
 8  <li>柠檬</li>
 9  <li>桔子</li>
10 </ul>  
11 
12 <h4>Circle 项目符号列表：</h4>
13 <ul type="circle">
14  <li>苹果</li>
15  <li>香蕉</li>
16  <li>柠檬</li>
17  <li>桔子</li>
18 </ul>  
19 
20 <h4>Square 项目符号列表：</h4>
21 <ul type="square">
22  <li>苹果</li>
23  <li>香蕉</li>
24  <li>柠檬</li>
25  <li>桔子</li>
26 </ul>  
27 
28 </body>
29 </html>

网页显示：，有序列表的子属性：type="value"的值可以是“字母，阿拉伯数字，I,i",来看个例子：

  <html>
  <body>
  
  <h4>数字列表：</h4>
  <ol>
   <li>我是数字</li>
  <li>我是数字</li>
  <li>我是数字</li>
 <li>我是数字</li>
 </ol>  
 
 <h4>字母列表：</h4>
 <ol type="A">
  <li>我是大写字母</li>
  <li>我是大写字母</li>
  <li>我是大写字母</li>
  <li>我是大写字母</li>
 </ol>  
 
 <h4>小写字母列表：</h4>
 <ol type="a">
  <li>我是小写字母</li>
  <li>我是小写字母</li>
  <li>我是小写字母</li>
  <li>我是小写字母</li>
 </ol>  
 
 <h4>罗马字母列表：</h4>
 <ol type="I">
 <li>我是罗马字母</li>
 <li>我是罗马字母</li>
<li>我是罗马字母</li>
<li>我是罗马字母</li>
</ol>  
 
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>我是小写罗马字母</li>
<li>我是小写罗马字母</li>
<li>我是小写罗马字母</li>
 <li>我是小写罗马字母</li>
</ol>  
 
</body>
</html>

网页显示：。我们可以看到无序和有序有个共性：都要用value来定义值。

我是数字
posted @ 2015-11-24 18:06  await  阅读(869)  评论(0)  编辑  收藏  举报