0313-列表标签应用实例与解释

来源:互联网 发布:淘宝茶叶店模板 编辑:程序博客网 时间:2024/06/04 21:33
<!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>

无序列表(使用最多)(unoderedlist)
格式:<ul><!--快捷按键ul>li*3-->
<li></li>
<li></li>
<li></li>
</ul>
有序列表(使用最少)(orderedlist)
格式:<ol><!--快捷按键ol>li*3-->
<li></li>
<li></li>
<li></li>
</ol>
定义列表(使用数量一般)(definitionlist)
格式:<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
0 0
原创粉丝点击