目录
1.无序列表
没有顺序之分
作用定义一个没有顺序的列表结构
两个标签组成:ul ,li
ul:ulordered list(无序列表)(容器级标签)
li:list item(列表项)(容器级标签)列表项之间没有先后列表之分,列表项之前的前缀样式由css控制,只负责结构的搭建
ul内部嵌套li,父子关系,ul内部必须嵌套li标签,li内部可以嵌套任何标签,甚至是ul标签。
1.1实例
<body>
<h2>四大名著</h2>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
</body>
li标签拓展
<body>
<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>
</ul>
</li>
<li>
<h3>水浒传</h3>
<ul>
<li>宋江</li>
<li>武松</li>
<li>林冲</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<ul>
<li>曹操</li>
<li>刘备</li>
<li>关羽</li>
</ul>
</li>
</ul>
</body>
2.有序标签
作用:定义一个有序列表的结构
两个标签组成:ol ,li
ol:ordered list(有序列表) li:还是列表项(与无序列表一致)
ol内只能有li标签
2.1实例
<body>
<h2>年级排名情况</h2>
<ol>
<li>年级一班</li>
<li>年级三班</li>
<li>年级二班</li>
</ol>
</body>
2.2有序列表的嵌套
<body>
<h2>年级排名情况</h2>
<ol>
<li>
<h3>年级二班</h3>
<ol>
<li>张三1</li>
<li>李四1</li>
<li>王五1</li>
</ol>
</li>
<li>
<h3>年级一班</h3>
<ol>
<li>李四2</li>
<li>王五2</li>
<li>张三2</li>
</ol>
</li>
</ol>
</body>
3.定义列表
作用,定义一个标题和内容自定义的列表结构
三个标签组成: dl,dt,dd
dl:definition list 创建一个自定义列表
dt:definition term定义主题或定义术语,表示列表的主题
dd:definition description定义解释项,表示解释说明前面的主题内容
dl内部只能存放dt和dd;dt和dd是同级关系
3.1实例
<body>
<h2>文案</h2>
<dl>
<dt>emo文案</dt>
<dd>emo文案1,2,3</dd>
<dt>积极文案</dt>
<dd>积极文案1,2,3</dd>
<dt>鸡汤</dt>
<dd>鸡汤1,2,3</dd>
</dl>
</body>
3.2dd和dt标签
每个dt主题可以跟多个dd,每个dd解释的是上一个最近的dt
<body>
<h2>文案</h2>
<dl>
<dt>emo文案</dt>
<dd>emo文案1,2,3</dd>
<dd>哭哭文案1,2,3</dd>
<dt>积极文案</dt>
<dd>积极文案1,2,3</dd>
<dd>笑笑文案1,2,3</dd>
<dt>鸡汤</dt>
<dd>鸡汤1,2,3</dd>
<dd>无用鸡汤1,2,3</dd>
</dl>
</body>
dt和dd都是容器级标签,可以存放任何内容
<body>
<h2>文案</h2>
<dl>
<dt>emo文案</dt>
<dd>
<p>emo文案1,2,3</p>
<p>哭哭文案1,2,3</p>
</dd>
<dt>积极文案</dt>
<dd>
<p>积极文案1,2,3</p>
<p>笑笑文案1,2,3</p>
</dd>
<dt>鸡汤</dt>
<dd>
<p>鸡汤1,2,3</p>
<p>无用鸡汤1,2,3</p>
</dd>
</dl>
</body>
4.常用结构
<body>
<h2>文案</h2>
<dl>
<dt>emo文案</dt>
<dd>
<p>emo文案1,2,3</p>
<p>哭哭文案1,2,3</p>
</dd>
</dl>
<dl>
<dt>积极文案</dt>
<dd>
<p>积极文案1,2,3</p>
<p>笑笑文案1,2,3</p>
</dd>
</dl>
<dl>
<dt>鸡汤</dt>
<dd>
<p>鸡汤1,2,3</p>
<p>无用鸡汤1,2,3</p>
</dd>
</dl>
</body>