欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

课时30.无序列表(掌握)

程序员文章站 2022-03-22 14:53:58
1.什么是列表标签? 列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎,告诉浏览器这一堆数据是一个整体 2.HTML列表标签的分类 2.1无序列表(企业开发中用到最多)(unordered list) 2.2有序列表 (企业开发中用的最少) (ordered list) 2.3定义列表 ( ......

1.什么是列表标签?

列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎,告诉浏览器这一堆数据是一个整体

2.HTML列表标签的分类

2.1无序列表(企业开发中用到最多)(unordered list)

2.2有序列表  (企业开发中用的最少)  (ordered list)

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

3.无序列表作用:

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

什么叫有先后之分?

例如:排行榜

什么叫没有先后之分?

例如:中国有哪些城市

4.无序列表格式

<ul>

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

</ul>

li其实是英文list item的缩写

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

5.注意点

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

<head>

<style type="text/css">

ul {

list-style:none;

}

</head>

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

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

<ul>

<li>1.广州</li>

<li>2.北京</li>

<li>3.上海</li>

<li>4.武汉</li>

</ul>

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

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

<ul>

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

<li></li>

<li></li>

</ul>

这种写法是不提倡的

  • 无序列表应用场景:
  1. 新闻列表
  2. 商品列表
  3. 导航条

有人说导航条是横着的,列表是竖着的,无法出现这种效果,其实是可以的,但是需要用到css,在<head></head>之间写

li {

float:left;

background-color:yellow;

width:150px;

height:50px;

text-align:center;

line-height:50px;

}