列表标签
列表都不是单打独斗的,通常都是一组标签组成
1、无序列表
作用:定义一个没有顺序的列表结构
由两个标签组成,ul(容器级标签),li(容器级)
ul:英文ulordered list(无序列表)
li:英文list item(列表项)
无序列表的基本使用
<h2>古典四大名著</h2>
<ul>
<li>三国演义</li>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
</ul>
需要注意的是,ul内部嵌套li,它们是父子关系。
规定:ul标签的内部必须只能嵌套li,li标签的内部可以嵌套任何标签,甚至是ul
列表的拓展,li标签内部可以继续嵌套列表结构
<h2>四大名著</h2>
<ul>
<li>
<h3>西游记</h3>
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ul>
</li>
<li>
<h3>水浒传</h3>
<ul>
<li>宋江</li>
<li>武松</li>
<li>林冲</li>
<li>卢俊义</li>
</ul>
</li>
<li>
<h3>红楼梦</h3>
<ul>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>王熙凤</li>
<li>贾宝玉</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<ul>
<li>刘备</li>
<li>曹操</li>
<li>孙权</li>
<li>张飞</li>
</ul>
</li>
</ul>
无序列表项之间没有先后顺序之分的
列表项之前的前缀样式是有CSS去控制的
2、有序列表
作用:定义一个有序列表的列表结构
需要有两个标签组成ol,li
ol:英文ordered list(有序列表)
li:英文list item(列表项)
需要注意的是,ol内部嵌套li,它们是父子关系。
规定:ul标签的内部必须只能嵌套li,li标签的内部可以嵌套任何标签,甚至是ul
基本使用
<h2>三年级排名情况</h2>
<ol>
<li>三年级2班</li>
<li>三年级1班</li>
<li>三年级2班</li>
</ol>
ol标签的嵌套
<h2>三年级期末考试排名</h2>
<ol>
<li>
<h3>三年级2班</h3>
<ol>
<li>王同学</li>
<li>张同学</li>
<li>李同学</li>
</ol>
</li>
<li>
<h3>三年级1班</h3>
<ol>
<li>樊同学</li>
<li>周同学</li>
<li>孟同学</li>
</ol>
</li>
<li>
<h3>三年级3班</h3>
<ol>
<li>刘同学</li>
<li>赵同学</li>
<li>李同学</li>
</ol>
</li>
</ol>
3、定义列表
-
作用:定义一个标题和内容自定义的列表结构
-
由三个标签组成,dl,dt,dd
dl英文:definition list 表示创建一个自定义列表结构
dt英文:definition term定义主题或者定义术语,表示一个列表的主题
dd英文:definition description 定义解释项,表示解释和说明前面的主题内容
dl内部只能存放dt和dd,dt和dd是同级关系
基本使用:
<h2>国内女明星</h2>
<dl>
<dt>杨幂</dt>
<dd>作品:《三生三世》、《宫》、《仙剑奇侠传》等</dd>
<dt>赵丽颖</dt>
<dd>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</dd>
<dt>刘诗诗</dt>
<dd>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
</dl>
- 每个dt主题的后面可以跟0-多个解释的dd,每个dd解释的就是上一个最近的dt
<dl>
<dt>杨幂</dt>
<dd>作品:《三生三世》、《宫》、《仙剑奇侠传》等</dd>
<dd>家庭:小糯米</dd>
<dd>迪丽热巴</dd>
<dt>赵丽颖</dt>
<dd>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</dd>
<dd>家庭:冯绍峰</dd>
<dt>刘诗诗</dt>
<dd>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
<dd>家庭:吴奇隆</dd>
</dl>
- dt和dd都是容器级标签,内部可以存放任意内容
<dl>
<dt>杨幂</dt>
<dd>
<p>作品:《三生三世》、《宫》、《仙剑奇侠传》等</p>
<p>家庭:小糯米</p>
<p>工作室:迪丽热巴</p>
</dd>
<dt>赵丽颖</dt>
<dd>
<p>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</p>
<p>家庭:冯绍峰</p>
</dd>
<dt>刘诗诗</dt>
<dd>
<p>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p>
<p>家庭:冯绍峰</p>
</dd>
</dl>