售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 建站教程

学习HTML方法详解二:常用标签之列表标签

网站编辑:小润 | 发表时间:2019-02-02 20:24:51

 HTML 列表标签支持有序、无序和定义列表。

       列表标签表格:

        一无序列表

        无序列表是一个项目的列表。无序列表项开始于 <ul> 标签,结束于</ul>标签。每个列表项开始于 <li>标签,结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。

[html] view plaincopyprint?

1.<html>  

2.       <head>  

3.       <title>列表标签演示</title>  

4.       </head>  

5.       <body>  

6.       <h1>这是一个无序列表标签演示</h1>  

7.       <ul>  

8.           <li>苹果</li>  

9.       <li>香蕉</li>  

10.       <li>葡萄</li>  

11.       <li>西瓜</li>  

12.       <li>荔枝</li>  

13.       </ul>  

14.       </body>  

15.</html>  

        浏览器结果显示为:

        二有序列表

        同样,有序列表也是一列项目,列表项目使用数字,字母等进行标记。有序列表开始于 <ol> 标签,结束于</ol>标签。每个列表项始于 <li> 标签,结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

[html] view plaincopyprint?

1.<html>  

2.       <head>  

3.       <title>列表标签演示</title>  

4.       </head>  

5.       <body>  

6.       <h1>这是一个有序列表标签演示</h1>  

7.       <ol type="a"><!--利用标签的属性设置属性值,从a开自增长-->  

8.           <li>苹果</li>  

9.       <li>香蕉</li>  

10.       <li>葡萄</li>  

11.       <li>西瓜</li>  

12.       <li>荔枝</li>  

13.       </ol>  

14.       </body>  

15.</html>  

        浏览器结果显示为:

[html] view plaincopyprint?

1.<html>  

2.       <head>  

3.       <title>列表标签演示</title>  

4.       </head>  

5.       <body>  

6.       <h1>这是一个有序列表标签演示</h1>  

7.       <ol type="1"><!--利用标签的属性设置属性值,从1开始自增长-->  

8.           <li>苹果</li>  

9.       <li>香蕉</li>  

10.       <li>葡萄</li>  

11.       <li>西瓜</li>  

12.       <li>荔枝</li>  

13.       </ol>  

14.       </body>  

15.</html>  

        浏览器结果显示为:

        三定义列表

       自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始,结束于</dl>标签。每个自定义列表项以 <dt> 开始,结束于</dt>标签。每个自定义列表项的定义以 <dd> 开始,结束于</dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

[html] view plaincopyprint?

1.<html>  

2.       <head>  

3.       <title>列表标签演示</title>  

4.       </head>  

5.       <body>  

6.       <h1>这是一个定义列表标签演示</h1>  

7.       <!--HTML注释:演示列表标签  

8.       列表标签:dl  

9.       上层项目:dt  

10.       下层项目:dd:封装的内容是会被缩进的,有自动缩进的效果。  

11.       -->  

12.       <dl>  

13.          <dt>游戏名称</dt>  

14.          <dd>红色警戒</dd>  

15.          <dd>三国无双</dd>  

16.          <dd>反恐精英</dd>  

17.          <dd>街头篮球</dd>  

18.       </dl>  

19.       </body>  

20.</html>  

         浏览器结果显示为:

 

         对于列表标签,可以自己和自己嵌套,也可以和其他的列表标签嵌套。

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区12层
座机:+021-5994 6805
24热线:+135 8590 1130