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

<!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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值