HTML列表

列表有三种

1. 有序列表

格式:

 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <meta charset=" utf-8">  
 6 <title>部落</title>   
 7 </head> 
 8 <body> 
 9 <ol type="1">
10   <li>部落一</li>
11   <li>部落二</li>
12   <li>部落三</li>
13 </ol>
14 <ol type="a" reversed>
15   <li>部落一</li>
16   <li>部落二</li>
17   <li>部落三</li>
18 </ol>
19 </body> 
20 </html>

ol有一个type属性,可以指定按照什么样的东西来排序,,加一个reversed会倒序排序

 

2. 无序列表

格式:

 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <meta charset=" utf-8">  
 6 <title>部落</title>   
 7 </head> 
 8 <body> 
 9 <ul type="dise">
10   <li>部落一</li>
11   <li></li>
12   <li>部落三</li>
13 </ul>
14 <ul type="circle">
15   <li>部落一</li>
16   <li>部落二</li>
17   <li>部落三</li>
18 </ul>
19 <ul type="square">
20   <li>部落一</li>
21   <li>部落二</li>
22   <li>部落三</li>
23 </ul>
24 </body> 
25 </html>

 

3. 描述列表

格式:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定义列表练习</title>
 6 </head>
 7 <body>
 8 <dl>
 9     <dt><b>购物指南</b></dt>
10     <dd><a href="#">购物流程</a></dd>
11     <dd><a href="#">会员介绍</a></dd>
12     <dd><a href="#">生活旅行</a></dd>
13     <dd><a href="#">常见问题</a></dd>
14     <dd><a href="#">大家电</a></dd>
15     <dd><a href="#">联系客服</a></dd>
16 </dl>
17 </body>
18 </html>

dt算是一个标题,dd中的内容都是对这个标题的描述

 

这三种列表中无序列表使用最广,其中列表内部是可以嵌套列表的

posted @ 2017-04-16 08:36  LearnerC  阅读(189)  评论(0编辑  收藏  举报