第四章 列表标签

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

第三十三课 有序列表

有序列表:给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后之分
其他和ul一样

<ol>
    <li> list item </li>
</ol>

<ol type="a">
    <li>演员</li>
    <li>丑八怪</li>
    <li>一人饮酒醉</li>
</ol>

list-style:none;

第三十五课 定义列表练习

和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加其他标签

<!--和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加其他标签-->
<!--dl>dt+dd-->
<dl>
    <dt>
        ![](0.gif)
    </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>

内容参考

width:150px;

第三十四课 定义列表

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>

</ul>

第二十九课 无序列表

列表标签:给一堆数据添加列表语义,表示这一堆数据是一个整体
分类:

无序列表(最多)(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>

什么叫没有先后之分?

这种写法是不提倡的

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

height:50px;

因为有序列表能做的无序列表也能做,如在无序列表中添加序号:

例如:排行榜

  1. 新闻列表
  2. 商品列表
  3. 导航条
  • 如何去除小圆点?

金沙官网线上,什么叫有先后之分?

5.注意点

<li></li>

<ul>

li {

float:left;

        2.ul标签和li标签是一个整体,是一个组合,所以一般情况下ul标签和li标签都是一起出现,不会单个出现,也就是说不会单独使用一个ul标签或者单独使用一个li标签,都是结合在一起使用。

<h2>中国的城市有哪些</h2>

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

  • 为什么企业开发中有序列表用的非常少?

<ul>

4.无序列表格式

1.什么是列表标签?

2.3定义列表  (企业开发中用的其次多)   (definition list)

本文由金沙官网线上发布于Web前端,转载请注明出处:第四章 列表标签

您可能还会对下面的文章感兴趣: