HTML的学习

①——效果：

代码如下：

 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中的图片，就不贴了）