<!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>