①——效果：
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>1</title> 6 <style type="text/css"> 7 p{ 8 text-indent:2em; 9 } 10 </style> 11 </head> 12 <h3>商品信息</h3> 13 <h5>产品类别</h5> 14 <hr/> 15 <ul type="disc"> 16 <li>数码</li> 17 <ul type="circle"> 18 <li>笔记本</li> 19 <li>手机</li> 20 <li>家电</li> 21 </ul> 22 <li>美容</li> 23 <li>服装</li> 24 </ul> 25 <hr/> 26 <h5>联想电脑</h5> 27 <p>产品型号：联想IdeaPad Y450A-TFU(NBA纪念版)</p> 28 <p>价格：4999元</p> 29 <p>所在地：北京</p> 30 <hr/> 31 <h5>购物流程</h5> 32 <ol type="1"> 33 <li>确认购买信息</li> 34 <li>付款到贵美</li> 35 <li>确认收货</li> 36 <li>付款给商家</li> 37 <li>双方评价</li> 38 </ol> 39 <body> 40 </body> 41 </html>
②——效果：
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>2</title> 6 <style type="text/css"> 7 p{ 8 text-indent:2em; 9 } 10 </style> 11 </head> 12 <h2>促销信息</h2> 13 <img src="image/2.png"> 14 <p> 拍卖Acer上网本</p> 15 <p> 奔腾双核，1G内存，200G硬盘</p> 16 <p> 跳楼疯抢价 17 <span style="color: red;font-weight:bold;font-size: 60px">1</span>元起</p> 18 <body> 19 </body> 20 </html>
（其中image/2.png为文件image/2中的图片，就不贴了）
③——效果：
代码如下：
3.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3</title> 6 </head> 7 <a href="Document.html">蒸气</a> 8 <body> 9 </body> 10 </html>
Document.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 text-indent:2em; 9 } 10 </style> 11 </head> 12 <img src="image/3.png"> 13 <p>商品名称:蒸气</p> 14 <p>商品价格:388元</p> 15 <p>商品简介:金钢低血超硬超顺滑,140mt透明大水箱设计</p> 16 <body> 17 </body> 18 </html>
（其中image/3.png为文件image中的图片，就不贴了）