因为想要学爬虫，所以需要了解一下网页的格式，所以跟着网上的教程简单的做了一个网页，主要实现了HTML的部分，CSS的部分我就直接套用了别人的，因为CSS我不会，做这个的目的主要也是为了了解一下HTML。
主要代码如下：
1 <!DOCTYPE html> ??<!--网页文档类型，这里是html5的写法--> 2 <html lang="en"> ?<!--表示文档的开始--> 3 <head> ???????????<!--这里面的内容不会在浏览器内显示出来--> 4 ????<meta charset="UTF-8"> 5 ????<title>狐妖小红娘</title> ?<!--网页标题，只能放在head之间--> 6 ????<link rel="stylesheet" type = "text/css" href="main.css"> 7 </head> 8 <body> 9 ????<div class="header"> ?<!--div是分区-->10 ????????<img src="images/title.png">11 ????????<ul class="nav"> ??<!--ul是无序列表-->12 ????????????<li><a href="http://www.cnblogs.com/zyb993963526/">王权富贵篇</a></li>13 ????????????<li><a href="#">月红篇</a></li>14 ????????????<li><a href="#">南国篇</a></li>15 ????????</ul>16 ????</div>17 18 ??<div class="main-content"> ?<!--h1,2,3,4,5,6是标题,h1是最大号-->19 ????<h2>人物介绍</h2>20 ????<ul class="article">21 ??????<li>22 ????????<img src="images/0001.jpg" width="100" height="90">23 ????????<h3><a href="#">涂山苏苏</a></h3>24 ????????<p>呆萌迷糊小狐狸一只，涂山三小姐，法力低微。</p> ??<!--p是插入文字-->25 ??????</li>26 ??????<li>27 ????????<img src="images/0002.jpg" width="100" height="90">28 ????????<h3><a href="#">白月初</a></h3>29 ????????<p>史上最无节操的正太道士。</p>30 ??????</li>31 ??????<li>32 ????????<img src="images/0003.jpg" width="100" height="90">33 ????????<h3><a href="#">涂山红红</a></h3>34 ????????<p>原妖盟盟主，涂山法力第一人。 </p>35 ??????</li>36 ??????<li>37 ????????<img src="images/0004.jpg" width="100" height="90">38 ????????<h3><a href="#">东方月初</a></h3>39 ????????<p>白月初前世，一气道盟中的后起之秀，后成盟主。</p>40 ??????</li>41 ????</ul>42 ??</div>43 44 ????<div class="footer">45 ????????<p>©狐妖小红娘 design by zyb</p>46 ????</div>47 </body>48 </html>
CSS部分（直接套用了网上的教程，自己完全不会写，羞）：
?1 body { ?2 ????padding: 0 0 0 0; ?3 ????background-color: #ffffff; ?4 ????background-image: url(images/background.jpg); ?5 ????background-position: top left; ?6 ????background-repeat: no-repeat; ?7 ????background-size: cover; ?8 ????font-family: Helvetica, Arial, sans-serif; ?9 } 10 ?11 ?12 .main-content { 13 ????width: 500px; 14 ????padding: 20px 20px 20px 20px; 15 ????border: 1px solid #dddddd; 16 ????border-radius:25px; 17 ????margin: 30px auto 0 auto; 18 ????background: #f1f1f1; 19 ????-webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1); 20 ????-moz-box-shadow: ???0 0 22px 0 rgba(50, 50, 50, 1); 21 ????box-shadow: ????????0 0 22px 0 rgba(50, 50, 50, 1); 22 } 23 .main-content p { 24 ????line-height: 26px; 25 } 26 .main-content h2 { 27 ????color: dimgray; 28 } 29 ?30 .nav { 31 ????padding-left: 0; 32 ????margin: 5px 0 20px 0; 33 ????text-align: center; 34 } 35 .nav li { 36 ????display: inline; 37 ????padding-right: 10px; 38 } 39 .nav li:last-child { 40 ????padding-right: 0; 41 } 42 .header { 43 ????padding: 10px 10px 10px 10px; 44 ?45 } 46 ?47 .header a { 48 ????color: #ffffff; 49 } 50 .header img { 51 ????display: block; 52 ????margin: 0 auto 0 auto; 53 } 54 .header h1 { 55 ????text-align: center; 56 } 57 ?58 .article { 59 ????list-style-type: none; 60 ????padding: 0; 61 } 62 .article li { 63 ????border: 1px solid #f6f8f8; 64 ????background-color: #ffffff; 65 ????height: 90px; 66 } 67 .article h3 { 68 ????border-bottom: 0; 69 ????margin-bottom: 5px; 70 } 71 .article a { 72 ????color: #37a5f0; 73 ????text-decoration: none; 74 } 75 .article img { 76 ????float: left; 77 ????padding-right: 11px; 78 } 79 ?80 .footer { 81 ????margin-top: 20px; 82 } 83 .footer p { 84 ????color: #aaaaaa; 85 ????text-align: center; 86 ????font-weight: bold; 87 ????font-size: 12px; 88 ????font-style: italic; 89 ????text-transform: uppercase; 90 } 91 ?92 ?93 ?94 ?95 ?96 ?97 .post { 98 ????padding-bottom: 2em; 99 }100 .post-title {101 ????font-size: 2em;102 ????color: #222;103 ????margin-bottom: 0.2em;104 }105 .post-avatar {106 ????border-radius: 50px;107 ????float: right;108 ????margin-left: 1em;109 }110 .post-description {111 ????font-family: Georgia, "Cambria", serif;112 ????color: #444;113 ????line-height: 1.8em;114 }115 .post-meta {116 ????color: #999;117 ????font-size: 90%;118 ????margin: 0;119 }120 121 .post-category {122 ????margin: 0 0.1em;123 ????padding: 0.3em 1em;124 ????color: #fff;125 ????background: #999;126 ????font-size: 80%;127 }128 .post-category-design {129 ????background: #5aba59;130 }131 .post-category-pure {132 ????background: #4d85d1;133 }134 .post-category-yui {135 ????background: #8156a7;136 }137 .post-category-js {138 ????background: #df2d4f;139 }140 141 .post-images {142 ????margin: 1em 0;143 }144 .post-image-meta {145 ????margin-top: -3.5em;146 ????margin-left: 1em;147 ????color: #fff;148 ????text-shadow: 0 1px 1px #333;149 }最后效果图：
第一次写网页！
原文地址：http://www.cnblogs.com/zyb993963526/p/8051976.html