html列表快速预览

2020-07-19 03:15:29
列表是一种非常有用的数据展现方式,可以扩展出非常多的有意思的功能,例如导航,布局等。

列表主要有三种:

1. 无序列表: <ul>标签,必须与<li>子标签配对使用

2. 有序列表: <ol>标签,与<ul>使用规则一样,可以看作是无序列表的一个特例,实际开发中使用不多

3. 自定义列表: <dl><dt><dd>非常像名词解释,用途非常广泛,例如底部导航,内容详情页,联系信息,商品描述等.

ul有一个属性type,可以设置列表项前面的标记

type="disc" 实心小黑点,这是默认一级列表的标记

type="circle" 空心小圆点,这是二级列表默认标记

type="square" 实心方块

<html><head><meta charset="UTF-8"><title>1-1.列表快速预览</title></head><body><ul type="square"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li><li>Bootstrap</li></ul><hr><h4>单身狗的周未</h4><ol><li>自己请自己看场电影希望有艳遇</li><li>购买充气娃娃2个</li><!-- 列表是可以嵌套的 --><ul><li>冰冰款2个</li><li>凤姐款1个</li></ul><li>玩"吃鸡"</li><li>为心目中的女主播打Call</li></ol><hr><h4>后端编程语言:</h4><dl><dt>PHP</dt><dd>超文本预处理编程语言</dd><dt>MySQL</dt><dd>全球最流行的关系型数据库管理工具</dd><dt>ThinkPHP5.1</dt><dd>国内最流行的中文轻量级PHP开发框架</dd></dl></body></html>