第二十九課 無序列表
列表標(biāo)簽：給一堆數(shù)據(jù)添加列表語義，表示這一堆數(shù)據(jù)是一個整體
分類：
無序列表（最多）（unordered list）
有序列表（最少）(ordered list)
定義列表（其次） （definition list)
無序列表:給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒有先后之分
格式：
<ul>
<li> list item 1 </li>
</ul>
注意點：
1、無序列表是給一堆數(shù)據(jù)添加列表語義的，告訴瀏覽器這一堆數(shù)據(jù)是一個整體，不是添加小圓點的，小圓點css修改樣式
2、ul和li標(biāo)簽是一個整體，是一個組合，不會單獨使用
3、ul標(biāo)簽中不推薦添加除li標(biāo)簽以外的標(biāo)簽
應(yīng)用：
1、新聞列表
2、商品列表
3、導(dǎo)航條 css修改樣式
<h2>列表</h2>
<ul>
<li> list item1 </li>
<li> list item2 </li>
<li> list item3 </li>
</ul>
第三十課 無序列表練習(xí)
<h2>搜狐新聞類標(biāo)</h2>
<!--雖然通過標(biāo)簽可以修改樣式，但是在企業(yè)開發(fā)中不建議使用 -->
<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>
第三十一課 無序列表練習(xí) 2
<!--ul標(biāo)簽中只能放li標(biāo)簽，但是li中可以放其他標(biāo)簽 -->
<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>
第三十二課 無序列表練習(xí) 3
<!-- 無序列表中l(wèi)i標(biāo)簽中可以添加ul標(biāo)簽，ul中只能有l(wèi)i -->
<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>
第三十三課 有序列表
有序列表:給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分
其他和ul一樣
<ol>
<li> list item </li>
</ol>
<ol type="a">
<li>演員</li>
<li>丑八怪</li>
<li>一人飲酒醉</li>
</ol>
第三十四課 定義列表
1、給一堆數(shù)據(jù)添加列表語義
2、dt標(biāo)題 dd標(biāo)題描述
格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
dt:definition title 定義列表中的標(biāo)題
dd:definition description 定義標(biāo)題對應(yīng)的描述的
注意點
1 dl和dt/dd是一個整體，一次出現(xiàn)
2 dl中建議只放dt和dd標(biāo)簽
3 一個dt可以沒有對應(yīng)的dd，也可以沒有dd，但是不建議使用
建議使用一個dt對應(yīng)一個dd
4 和li標(biāo)簽一樣，當(dāng)豐富界面時，可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽
應(yīng)用場景：
1、做網(wǎng)站尾部的相關(guān)信息
2、做圖文混排
<dl>
<dt>北京</dt>
<dd>中國的首都</dd>
<dt>上海</dt>
<dd>富人聚集地</dd>
</dl>
第三十五課 定義列表練習(xí)
和li標(biāo)簽一樣，當(dāng)豐富界面時，可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽
<!--和li標(biāo)簽一樣，當(dāng)豐富界面時，可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽-->
<!--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="#">聯(lián)系客服</a>
</dd>
</dl>
