<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-无序列表</title>
<style type="text/css">
ul {
list-style: none;
}
li {
float: left;
background-color: yellow;
width: 150px;
height:50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<!--
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标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签
4.虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干
其它：
1.一定更要记住ul标签中最好只放li标签
2.但是li标签中还可以继续放其它的标签
无序列表中的li标签中除了可以添加其它标签来丰富我们的界面以外, 还可以添加ul标签来丰富我的界面
也就是说ul中有li, li中又可以有ul
在webstorm中如何快速编写一个ul的格式
ul>li
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签
ul>li*3
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签
无序列表应用场景:
1.新闻列表
2.商品列表
3.导航条
-->
<h2>中国的城市有哪些</h2>
<ul>
<li>广州</li>
<li>北京</li>
<li>上海</li>
<li>武汉</li>
</ul>
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h1>水果</h1>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>《三国演义》</h2>
<p>《三国演义》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
</li>
<li>
<h2>《水浒传》</h2>
<p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p>
</li>
<li>
<h2>《西游记》</h2>
<p>《西游记》前七回叙述孙悟空出世，有大闹天宫等故事。此后写孙悟空随唐僧西天取经，沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动，规模宏大，结构完整，并且《西游记》富有浓厚的佛教色彩，其隐含意义非常深远，众说纷纭，见仁见智。可以从佛、道、俗等多个角度欣赏，是中国古典小说中伟大的浪漫主义文学作品。</p>
</li>
<li>
<h2>《红楼梦》</h2>
<p>《红楼梦》讲述的是发生在一个虚构朝代的封建大家庭中的人事物，其中以贾宝玉、林黛玉、薛宝钗三个人之间的感情纠葛为主线通过对一些日常事件的描述体现了在贾府的大观园中以金陵十二钗为主体的众女子的爱恨情愁。而在这同时又从贾府由富贵堂皇走向没落衰败的次线反映了一个大家族的没落历程和这个看似华丽的家族的丑陋的内在。</p>
</li>
</ul>
</body>
</html>HTML的无序列表（有序列表类似）
猜你喜欢
转载自blog.csdn.net/Duke_Jiang/article/details/108618525
今日推荐
周排行