列表标签

学习笔记-列表标签

定义：

给一堆数据添加列表语义，也就是告诉搜索引擎，告诉浏览器这一堆数据是一个整体。

html中列表标签的类型

无序列表（最多）（unordered list）

作用：

给一堆数据添加列表语义，并且一堆数据中所有的数据都没有先后之分。

有先后之分-排行榜

无先后之分-中国有哪些城市？

格式：

<ul>

      <li>需要显示的条目内容</li>

</ul>

li是英文list item的缩写

所以结合起来就是 列表条目的意思

注意点：

1.一定要记住ul标签是用来给一堆数据添加列表语义的，而不是用来添加小圆点的。

2.ul标签和li标签是一个整体组合，一般情况下，ul和li标签都是一起出现，不会单独出现。

3.由于ul和li标签是一个组合，所以ul标签中不推荐包含其他标签，也就是说以后你在ul标签中，只会看到li标签。

4.虽然通过修改标签属性也能修改样式，但是在企业开发中千万不要这么干。

无序列表应用的场景

1.新闻列表

2.商品列表

3.导航条

有序列表（最少）（ordered list）

定义：

给一堆数据添加语义，并且这一堆数据中所有的数据都有先后之分

格式：

<ol>

      <li>所要显示的内容</li>

</ol>

定义列表（其次） （definition list）

作用：

1.给一堆数据添加语义

2.dt定义标题，dd定义描述内容

格式：

<dl>

      <dt></dt>

      <dd></dd>

      <dt></dt>

      <dd></dd>

</dl>

dt是difinition title 的缩写：指定义列表中的标题。

dd是definition description 的缩写：指定义标题对应的描述。

应用场景

1.做网站尾部的相关信息

2.做图文混排

注意点：

1.dl和dt/dd是一个整体，都会一起出现。

2.作为组合标签，dl中建议只放dt/dd标签。

3.一个dt可以没有dd，也可以有多个dd，但是推荐一个dt对应一个dd。

4当需要丰富界面时，可以在dt和dd标签中继续添加其他标签，不建议在dl中添加其他标签。

无序列表练习（理解）自主练习

1.新闻列表

2.商品列表

3.导航条

注意点：

1.前面我们说过ul标签中只能放li标签，但是在企业开发中，li标签中的内容可能会很复杂，所以我们可能继续在li标签中添加其他标签来丰富我们的界面。

总结：

1.一定要记住ul标签中最好只放li标签。

2.但是li标签中还可以继续放其他的标签。

3.无序列表中的li标签，也可以添加ul标签。

4.在webstorm中快速编写一个ul的格式:

兴趣点：

ul>li*n

ul>li*n>h+ul>li*n