广州总部电话:020-85564311

TOP

收起快捷

首页 > 关于途必 > 途必学院 > 学习HTML方法详解二:常用标签之列表标签
学习HTML方法详解二:常用标签之列表标签
发布日期:2015-11-17 08:35:27
浏览次数:
来源:广州网站建设

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

       列表标签表格:

学习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>  

        浏览器结果显示为:

学习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方法详解二:常用标签之列表标签

[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>  

        浏览器结果显示为:

学习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>  

         浏览器结果显示为:

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

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

责任编辑:途必技术部

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

关闭
推荐新闻
童心无界 童萌有礼——六一儿童节活动来啦!
童心无界 童萌有礼——六一儿童节活动来啦!
六一儿童节是属于“孩子们”节日,不管是天真卡爱的小朋友,还是童心未泯的大朋友。跟着我们一起重回童年,让童心出发吧。
2024.06.03 10:56:04
途必科技十一月生日会--关怀与爱
途必科技十一月生日会--关怀与爱
时隔一个月,又迎来了我们可爱小伙伴们的生日,本月有好几位的寿星生日。途必科技为了关怀员工,特地举办了此次的集体生日会活动,并且还有很多丰富的小吃零食,饮品饮料,当然更重要的蛋糕也是不可或缺的。
2023.11.29 10:57:26
一起成长---十月途必科技员工生日会
一起成长---十月途必科技员工生日会
秋高气爽的季节里头,我们迎来了十月份途必科技小伙伴们的生日,在这个温馨的聚会里一同感受着生日的快乐,能在工作繁忙之余享受到节日带来的温暖。每一次的生日会都是大家在共同的成长,当然啦,成长的路上少不了磕磕碰碰,但是在我们的人生里头,总会相遇温暖,陪伴左右,成长也就变得更加有意义。
2023.10.30 09:29:30
温暖与你同在-八月途必科技小伙伴生日会
温暖与你同在-八月途必科技小伙伴生日会
在每个人成长的背后,总会有温暖相伴,像在途必科技的大家庭里,大家都可以感受到这样的氛围,又温馨,有爱。也许有时候自己都忘了的生日,却是有人记得你的生日,有人愿意为你祝福,这又何尝不是一种温暖呢。途必科技与大家一同成长,也将爱送给大家,途必科技对出席生日会的每一位小可爱表示热烈的欢迎和衷心的感谢,同时也为八月份生日的寿星们送上美丽的祝福~祝愿可爱的寿星们天天开心,心想事成,身体健康,另外也希望每位途必科技的小伙伴在未来的工作中越来越顺利,生活里也越来越好。
2023.08.30 10:32:55
这次圣诞节,我们玩大的
这次圣诞节,我们玩大的
这次的圣诞节,我们玩大的,为了让大家感受到如火热情般的圣诞节,此次带来了很多不一样的玩法和活动。行政人事部代表途必科技给大家制造了很多不一样的惊喜,在这里你可以收获丰富满满的礼物,漂亮小姐姐和可爱圣诞老人的合影,小伙伴们其乐融融的氛围,
2022.12.25 17:00:04
推荐案例
眼光高度决定品牌厚度!
业务展示
专业团队,品质服务

预算不足没关系,

这里

广州市途必企业管理中心(有限合伙)版权所有 粤ICP备2020085998号 Copyright © 2023 All Rights Reserved
 
扫码咨询

专属顾问
扫码咨询您的优网专属顾问!