HTML中的列表标签
列表标签主要是给一些数据添加列表语义，就是告诉浏览器哪些数据是一个整体。无序列表
给一堆数据添加列表语义，并且这一堆数据中所有的数据没有先后顺序。
<!--无序列表的格式-->
<ul> Unordered List 缩写
<li>需要显示的条目内容</li> List Item 缩写
<li>需要显示的条目内容</li>
<li>需要显示的条目内容</li>
</ul>案例01 :
<ul>
<li>太原</li>
<li>大同</li>
<li>吕梁</li>
<li>朔州</li>
<li>运城</li>
</ul>效果如下 :
- 太原
- 大同
- 吕梁
- 朔州
- 运城
注意点 :
- 无序列表标签只为一堆数据添加列表语义，并不改变样式
- ul标签和li标签是一个整体，所以它们都是一起出现的，不会单个出现，是结合在一起使用的
- 正是因为ul标签和li标签是一个组合，所以ul标签中不建议包含其他的标签，也就是说ul标签中一般只会见到li标签
- 虽然ul标签内尽量只包含li标签，但是对与复杂的界面来说，还可以在li标签内部再包含其他标签，如再包含个ul标签都是可以的
使用场景
- 新闻列表条目展示
- 商品列表
- 导航条
案例02 ：
<h4>全国的省份</h4>
<ul>
<li>
<h5>山西省</h5>
<ul>
<li>大同市</li>
<li>太原市</li>
</ul>
</li>
<li>
<h5>山东省</h5>
<ul>
<li>济南市</li>
<li>青岛市</li>
</ul>
</li>
</ul>效果如下 :
全国的省份
-
山西省
- 大同市
- 太原市
-
山东省
- 济南市
- 青岛市
在WebStrom中快速创建ul标签
快捷方式 : ul>li*N N代表生成几个li标签 然后按tab键
ul>li*N>h1+ul>li*N 这个也是同理 有序列表
有序列表标签是给一堆数据添加列表语义的，并且这一堆数据中的所有数据时有先后顺序的,而且注意事项和用法跟无序列表大致相同
<ol type="A">
<h3>成绩单</h3>
<li>小红98分</li>
<li>小明60分</li>
<li>小刚59分</li>
</ol>效果如下 :
成绩单
- 小红98分
- 小明60分
- 小刚59分
定义列表
定义列表标签是给一堆数据添加列表语义的，通过dt标签给所有的列表条目添加标题，dd标签来添加描述。其中dt（Definition Title）标签用来定义列表条目的标题；dd（Definition Description）标签用于定义列表条目的描述。
<dl>
<dt>潮服</dt>
<dd>韩国服装</dd>
<dd>巴黎时尚</dd>
<dt>家居</dt>
<dd>瑞士家居</dd>
<dd>哥特式家居</dd>
</dl>效果如下 :
-
潮服
- 韩国服装
- 巴黎时尚 家居
- 瑞士家居
- 哥特式家居
使用场景
01. 用来制作网页底部的相关信息
02. 用来做图文混排注意点 :
01. dl标签与dt标签和dd标签是组合标签，所以不能单独出现，都是一起出现的。
02. dt标签和dd标签建议是一对一的成对出现，虽然也可以1个dt对应多个dd或一个dt没有对应的dd标签。
03. 一般在一个dl标签内只会出现dt和dl标签，若页面复杂，可以在dt和dd标签内部再添加其他标签。 定义列表标签练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UnorderedList</title>
<style type="text/css">
*{ margin:0; padding:0; border: 0;}
</style>
</head>
<body>
<dl>
<dt><h4>购物指南</h4></dt>
<dd>
<p><a href="javascript:">购物流程</a></p>
<p><a href="javascript:">全员介绍</a></p>
<p><a href="javascript:">生活旅行/团购</a></p>
<p><a href="javascript:">常见问题</a></p>
<p><a href="javascript:">大家电</a></p>
<p><a href="javascript:">联系客服</a></p>
</dd>
</dl>
</body>
</html>效果如下 :
-
购物流程
全员介绍
生活旅行/团购
常见问题
大家电
联系客服
扫一扫
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
