<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body bgcolor=""> <h3>注册步骤</h3>--> <ol start="3"type="A";> <!--ol有序列表 1:修饰符是数字,它会随着项目的增加,自动增加 2:可嵌套 补充: start:指定列表的开始索引 reversed:列表索引的倒叙显示 type:指定列表索引的类型--> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </olstart> <h3>新人上路指南</h3> <ul> <!--ul无序列表 1:修饰符是默认的原点,可以嵌套 2:可以嵌套,嵌套的修饰符会与外层产生区别,以示区分--> <li>如何激活會員名</li> <li>如何註冊貴美會員</li> <li>註冊時密碼設置有什麼要求</li> <li>貴美認證</li> </ul> <hr> <dl> <!--定义列表: 1:子列表分两个dt dd 2可以在dt列表放图片:--> <dt><img src="../../img/咖啡.jpg" width="200px" height="200px" alt=""></dt> <dd>一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这种原料</dd> <dd>可以提神刺激神经</dd> </dl> <hr> <figure> <img src="../../img/咖啡.jpg" width="200" height="200" alt=""> <figcaption> 一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这种原料 </figcaption> </figure> <!--div分区标签,可以对页面进行分区--> <div> <div style="height: 80px"></div> <img src="../../img/1.png" alt=""> <img src="../../img/3.png" alt=""> <img src="../../img/2.jpg" alt=""> <div style="height: 50px;background-color:yellow">菜单区域</div> <p>woaini</p> <div style="height: 500px;background-color:green">详情区域</div> </div> </body> </html>
无序列表
(使用最多)(
u
nodered
l
ist)
格式:
<ul><!--快捷按键ul>li*3-->
<li></li>
<li></li>
<li></li>
</ul>
有序列表
(使用最少)(
o
rdered
l
ist)
格式:
<ol>
<!--快捷按键ol>li*3-->
<li></li>
<li></li>
<li></li>
</ol>
定义列表
(使用数量一般)(
d
efinition
l
ist)
格式:
<dl>
<!--快捷按键dl>(dt+dd)*3-->
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd>家乡</dd>
</dl>
<dt> 标签定义了定义列表中的项目(即术语部分)。<dd> 在定义列表中定义条目的定义部分。
定义列表主要用于做网站尾部的相关信息或者是做图文混排
ul,ol,dt/dd都是成套出现,推荐一个dt对应一个dd