当前位置: 移动技术网 > IT编程>网页制作>Html5 > 课时30.无序列表(掌握)

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

2018年06月07日  | 移动技术网IT编程  | 我要评论

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;

}

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网