前端HTML篇--10列表标签

论坛 期权论坛 期权     
前端旺   2019-7-21 15:46   2539   0
[iframe]https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_907580923296743425[/iframe]
目标
  • 列表标签的作用是什么?
  • 列表标签有哪些表现形式?
  • 列表标签的具体用法?
  • 他们之间的区别又是什么?


1
列表标签的作用
  • 列表就是信息资源的一种展示形式。
  • 它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。


一篇夏天游泳注意事项通告

2
列表标签有哪些表现形式
1无序列表
2
有序列表
3
定义列表


3
列表标签的具体用法
1无序列表
标签
父标签
子标签


实例
  1. [/code][code]  刘德华受制片人邀约 表态愿意参与《流浪地球2》
复制代码
  1.   自曝想当网红放弃拍戏?郑爽发文:让很多人失望了
复制代码
  1.   10个问题看看你对香槟到底知多少?
复制代码
  1. [/code][img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-9b990cd6be5f79201fa73388cf158a66[/img]
  2. 特性
  3. 1. 没有顺序,每个标签独占一行(块元素)
  4. 2. 默认标签项前面有个实心小圆点
  5. 3. 一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等
  6. 2
  7. 有序列表
  8. 标签
  9. 父标签
  10. 子标签
  11. 实例
  12. [list][*][*][*][*][*][/list][code]
复制代码
  1.   刘德华受制片人邀约 表态愿意参与《流浪地球2》
复制代码
  1.   自曝想当网红放弃拍戏?郑爽发文:让很多人失望了
复制代码
  1.   10个问题看看你对香槟到底知多少?
复制代码
  1. [/code][img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-2e18d9a42716b49b12f674b0afbf04cf[/img]
  2. 特性
  3. 1. 有顺序,每个标签独占一行(块元素)
  4. 2. 默认标签项前面有顺序标记
  5. 3. 一般用于排序类型的列表,如试卷、问卷选项等
  6. 3
  7. 定义列表
  8. 标签
  9. 父标签
  10. 子标签
  11. 题目
  12. 内容
  13. 实例
  14. [list][*][*][*][*][*][*][*][/list][code]
复制代码
  1.   娱乐圈
复制代码
  1.     刘德华受制片人邀约 表态愿意参与《流浪地球2》
复制代码
  1.     自曝想当网红放弃拍戏?郑爽发文:让很多人失望了  
复制代码
  1.   生活圈
复制代码
  1.     10个问题看看你对香槟到底知多少?  
复制代码
[code][/code]


特性
  • 没有顺序,每个标签、标签独占一行(块元素)。
  • 默认没有标记,有缩进效果。
  • 一般用于一个标题下有一个或多个列表项的情况。


4
他们之间的区别又是什么
  • 无序列表:无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容。
  • 有序列表:有序列表ol-li一般用于显示带有顺序编号的特定场合。
  • 定义列表:定义列表一般适用于带有标题和标题解释性内容的场合。


总结

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:10
帖子:2
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP