无序列表
首先我们观察几个大型网站的一些案例:
网易新闻:
我们观察一下搜狐新闻:
我们再观察一下凤凰新闻
看一下腾讯新闻
什么是列表标签?
列表标签就是给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体。
列表标签的分类
无序列表(企业用得最多 英文单词 unordered list)
作用:
给一堆数据添加列表语义,并且一堆数据里所有的数据无先后之分
附注:先后之分例如下面数据:
格式:
<ul>
<li>需要写的条目</li>
</ul>
list item其实是列表(list) item代表是条目,组合起来就是意思如下图所示:
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li><a href="http://news.163.com/" class="fontb">新闻</a></li>
<li><a href="http://war.163.com/">军事</a></li>
<li><a href="http://news.163.com/photo/">图片</a></li>
<li><a href="http://news.163.com/air/">航空</a></li>
<li><a href="http://ent.163.com/" class="fontb">娱乐</a></li>
<li><a href="http://ent.163.com/movie/">电影</a></li>
<li><a href="http://music.ent.163.com/">音乐</a></li>
<li><a href="http://war.163.com/">军事</a></li>
<li><a href="http://war.163.com/">军事</a></li>
<li><a href="http://public.163.com" class="nav_jingdian_tongji">经典</a></li>
</ul>
</body>
</html>
运行结果如下:
注意点:
1.ul标签是用来给一堆数据添加列表语义的,不是用来给他们添加小圆点的。
2.ul标签与li标签都是一起出现,不会单个出现。这有点像孙红雷演《潜伏》,你不能说与那个特工是以同事关系出现,只能做为一个家庭成员出现。
应用场景:
1.新闻列表:
2.商品列表
3.淘宝导航条
有序列表(企业用得最少 英文单词 ordered list)
定义列表(企业用得中庸 英文单词definition list)