第二十九课 无序列表
列表标签：给一堆数据添加列表语义，表示这一堆数据是一个整体
分类：
无序列表（最多）（unordered list）
有序列表（最少）(ordered list)
定义列表（其次） （definition list)
无序列表:给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分
格式：
<ul>
<li> list item 1 </li>
</ul>
注意点：
1、无序列表是给一堆数据添加列表语义的，告诉浏览器这一堆数据是一个整体，不是添加小圆点的，小圆点css修改样式
2、ul和li标签是一个整体，是一个组合，不会单独使用
3、ul标签中不推荐添加除li标签以外的标签
应用：
1、新闻列表
2、商品列表
3、导航条 css修改样式
<h2>列表</h2>
<ul>
<li> list item1 </li>
<li> list item2 </li>
<li> list item3 </li>
</ul>
第三十课 无序列表练习
<h2>搜狐新闻类标</h2>
<!--虽然通过标签可以修改样式，但是在企业开发中不建议使用 -->
<hr width="500px" align="left">
<ul type="circle">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
第三十一课 无序列表练习 2
<!--ul标签中只能放li标签，但是li中可以放其他标签 -->
<h2>四大名著</h2>
<ul>
<li>
<h3>《三国演员》</h3>
<p>三国鼎立</p>
</li>
<li>
<h3>《西游记》</h3>
<p>孙悟空</p>
</li>
<li>
<h3>《水浒传》</h3>
<p>武松</p>
</li>
<li>
<h3>《红楼梦》</h3>
<p>贾宝玉</p>
</li>
</ul>
第三十二课 无序列表练习 3
<!-- 无序列表中li标签中可以添加ul标签，ul中只能有li -->
<h2>物品清单</h2>
<ul>
<li>
<h3>蔬菜</h3>
<ul>
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h3>水果</h3>
<ul>
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
</li>
</ul>
webstorm 快捷方式
ul>li；ul>li*3
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul>li2>h2+ul>li3
<ul>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
第三十三课 有序列表
有序列表:给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分
其他和ul一样
<ol>
<li> list item </li>
</ol>
<ol type="a">
<li>演员</li>
<li>丑八怪</li>
<li>一人饮酒醉</li>
</ol>
第三十四课 定义列表
1、给一堆数据添加列表语义
2、dt标题 dd标题描述
格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
dt:definition title 定义列表中的标题
dd:definition description 定义标题对应的描述的
注意点
1 dl和dt/dd是一个整体，一次出现
2 dl中建议只放dt和dd标签
3 一个dt可以没有对应的dd，也可以没有dd，但是不建议使用
建议使用一个dt对应一个dd
4 和li标签一样，当丰富界面时，可以在dt和dd标签中继续添加其他标签
应用场景：
1、做网站尾部的相关信息
2、做图文混排
<dl>
<dt>北京</dt>
<dd>中国的首都</dd>
<dt>上海</dt>
<dd>富人聚集地</dd>
</dl>
第三十五课 定义列表练习
和li标签一样，当丰富界面时，可以在dt和dd标签中继续添加其他标签
<!--和li标签一样，当丰富界面时，可以在dt和dd标签中继续添加其他标签-->
<!--dl>dt+dd-->
<dl>
<dt>
</dt>
<dd>
<h2>图片</h2>
<p>图片很好看</p>
</dd>
</dl>
<!-- 定义列表 -->
<dl>
<dt dir="rtl">购物指南</dt>
<dd>
<a href="#">购物指南</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行／团购</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</dd>
</dl>
