html5无序列表，有序列表，定义列表，组合标签，div分区标签

最新推荐文章于 2024-03-05 21:39:00 发布

ztt0918

最新推荐文章于 2024-03-05 21:39:00 发布

阅读量4.2k

点赞数 3

分类专栏： html5无序列表，有序列表，定义列表，组合标签，div分区标签文章标签： html5无序列表有序列表定义列表组合标签 div分区标签

本文链接：https://blog.csdn.net/ztt0918/article/details/64444668

版权

html5无序列表，有序列表，定义列表，组合标签，div分区标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用于页面布局的块级标签练习</title>
</head>

<body>
<P style="font-size: x-large">商品信息</P>
<p STYLE="font-size: larger">产品类别</p>
<hr>
</hr>
<!--无序列表unorder list
    1：修饰符是默认的圆点
    2：可以嵌套，嵌套的修饰符会与外层进行区分，以示区别
列表项list item -->
<ul>
        <li type="circle">笔记本</li>
        <li type="circle">手机</li>
        <li type="circle">家电</li>
    </ul>
    <li>美容</li>
    <li>服装</li>
    </ul>

</ul>
<hr></hr>

<dl>
    <dt>（标题）咖啡</dt>

    <dd>（内容描述）咖啡是一种黑色的饮料，原料据说是咖啡店</dd>
    <dd>（内容描述）可以提神，刺激神经。</dd>

</dl>
<dl>
<dt>联想电脑</dt>
<dt> <img src="../img/Lenovo1.jpg" alt="" width="150px" height="150px"></dt>
<dd>产品型号：联想IdeaPad Y450A-TFU(NBA纪念版）</dd>
<dd>价格：4999元</dd>
<dd>所在地：北京</dd>
</dl>
<hr>
</hr>

<h STYLE="font-size: larger">购物流程</h>
<!-- 有序列表标签order list

  1：修饰符是数字，他随着项目的增多，自动添加

  2：有序列表也是可以嵌套的-->

<ol>

       <li>确认购买信息</li>

       <li>付款到贵美</li>

       <li>确认收货</li>

       <li>付款给商家</li>

       <li>双方评价</li></ol>

   <!--start:指定列表的开始索引    reversed:列表索引倒序显示    type：指定列表索引的类型-->

 <ol start="3" reversed type="2">

   <li>列表1</li>

   <li>列表2</li>

   <li>列表3</li>

   <li>列表4</li>

  <li>列表5</li>

</ol>


<!--组合标签
    特点：图片与文字对齐-->
<figure>
    <figcaption>
    <img src="../img/Lenovo.jpg" alt="">
    </figcaption>
           </figure>
<hr/>


<!--div分区标签（块状元素）-->
<div>
    <div style="height: 80px">
    <img src="../img/logo.png" alt="" style="margin-left: 20px">
    <img src="../img/kouhao.png" alt="">
    <img src="../img/tel.jpg" alt="" style="margin-left: 600px" >
    </div>
    <div style="height:40px ”;background-color: blue">菜单区域</div>
    <div style="height:500px;background-color: yellow">详情区域</div>
</div>


</body>
</html>