认识HTML一一无序列表(重点)

无序列表

首先我们观察几个大型网站的一些案例:

网易新闻:


我们观察一下搜狐新闻:


我们再观察一下凤凰新闻


看一下腾讯新闻


什么是列表标签?

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

列表标签的分类

无序列表(企业用得最多 英文单词 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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容