---恢复内容开始---
最近在上海上学的一个高中同学让我帮忙，帮她做她们的计算机课程大作业。
由于关系不错我也不好意思拒绝就帮忙做了，因为这个学期刚刚开始接触HTML5和css，所以制作过程中有很多不懂的，而且由于HTML5是选修课，一星期只有一节，所以做这个花费了比较多的时间，这个网站是我制作的第一个网站，比较有纪念意义，所以发在博客上，作为纪念。
通过去做这个作业，我了解到很多课上学不到的东西。因为没有美工，从头到尾，都是我一个人在臆想，刚开始的时候，根本无从下手，我去参考别人做的家乡网站，去找各种各样的模板，我充分感受到这样做的痛苦，所以终于体会到为什吗前端跟美工是分开来做的。在采集图片的过程太痛苦，不想去回忆，去各个网站找图片，百度，搜狗，谷歌等等，可是每次都因为图片的分辨率不同，长宽比不同，让有强迫症的我感觉十分难受，于是我就动用各种各样的工具，其中Photoshop和QQ截图工具真是帮了大忙，可是到最后还是有部分情况影响美观。
还有不懂得标签，我上网上查，去问老师，推荐一个网站：http://www.w3school.com.cn/h.asp
这是一次难忘而美好的制作过程，第一次尝试着去做一个网站，第一次为了打代码去熬夜到天亮，这是我以前所不敢想的，而且当网页完全做成的那一刻，那种激动与成就感，让我睡了这么多天以来最踏实的一觉。
所以，我想说：你好:HTML!
Hello Word！
这个作业一共包含了6个页面，三个分级，其中有：
一、《简单介绍》
主页：
这是主页，插入了大量的图片与视频，对郑州进行了简单的介绍；视频使用的是<video>标签，这是源代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>我的家乡-郑州</title> 5 <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> 6 <!-- jQuery (necessary JavaScript plugins) --> 7 <script src="js/bootstrap.js"></script> 8 <!-- Custom Theme files --> 9 <link href="css/style.css" rel='stylesheet' type='text/css' /> 10 <!-- Custom Theme files --> 11 <!--//theme-style--> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 14 <meta name="keywords" content="Game Box Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 15 Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 16 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 17 18 <script src="js/jquery.min.js"></script> 19 <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 20 </head> 21 <body> 22 <div class="banner-info"> 23 <div class="container"> 24 <div class="logo"> 25 <h1><a href="我的家乡主页.html">MY HOMETOWN</a></h1> 26 </div> 27 <div class="top-menu"> 28 <span class="menu"></span> 29 <ul class="nav1"> 30 <li class="active"><a href="我的家乡主页.html">郑州简介</a></li> 31 <li><a href="历史沿革.html">历史沿革</a></li> 32 <li><a href="名胜古迹.html">名胜古迹</a></li> 33 <li><a href="郑州美景.html">郑州美景</a></li> 34 <li><a href="郑州美食.html">郑州美食</a></li> 35 </ul> 36 </div> 37 <!-- script-for-menu --> 38 <script> 39 $( "span.menu" ).click(function() { 40 $( "ul.nav1" ).slideToggle( 300, function() { 41 // Animation complete. 42 }); 43 }); 44 </script> 45 <!-- /script-for-menu --> 46 47 <div class="clearfix"></div> 48 </div> 49 </div> 50 </div> 51 <!-- banner --> 52 <!-- Slider-starts-Here --> 53 <script src="js/responsiveslides.min.js"></script> 54 <script> 55 $(function () { 56 $("#slider").responsiveSlides({ 57 auto:true, 58 nav: false, 59 speed: 500, 60 namespace: "callbacks", 61 pager:true, 62 }); 63 }); 64 65 </script> 66 <div class="slider"> 67 <div class="callbacks_container"> 68 <ul class="rslides" id="slider"> 69 70 <div class="slid banner1"> 71 <div class="caption"> 72 <h3>郑州市，简称“郑”，河南省省会。</h3> 73 <p>地处华北平原南部、黄河中下游、河南省中部偏北。 北临黄河，西依嵩山，东南为广阔的黄淮平原。</p> 74 </div> 75 </div> 76 77 78 <div class="slid banner2"> 79 <div class="caption"> 80 <h3>郑州地处中国地理中心。</h3> 81 <p>是全国重要的铁路、航空、高速公路、电力、邮政电信主枢纽城市，中国中部地区重要的工业城市。</p> 82 </div> 83 </div> 84 85 86 <div class="slid banner3"> 87 <div class="caption"> 88 <h3>郑州是历史上著名商埠。</h3> 89 <p>是中部地区重要的物资集散地，每年都会举办全国性、区域性大型商贸活动，郑州商品交易所是三大全国性商品交易所之一。</p> 90 </div> 91 </div> 92 93 </ul> 94 </div> 95 </div> 96 <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div> 97 <!-- content --> 98 <div class="content"> 99 <div class="container"> 100 <div class="top-games"> 101 <a href="#"><h3>行政区划</h3></a> 102 <span></span> 103 </div> 104 <div class="top-game-grids"> 105 <ul id="flexiselDemo1"> 106 <li> 107 <div class="game-grid"> 108 <h4>金水区</h4> 109 <p>Jinshui District</p> 110 <img src="images/t4.jpg" class="img-responsive" alt=""/> 111 </div> 112 </li> 113 <li> 114 <div class="game-grid"> 115 <h4>惠济区</h4> 116 <p>Huiji District</p> 117 <img src="images/t3.jpg" class="img-responsive" alt=""/> 118 </div> 119 </li> 120 <li> 121 <div class="game-grid"> 122 <h4>中原区</h4> 123 <p>Zhongyuan District</p> 124 <img src="images/t1.jpg" class="img-responsive" alt=""/> 125 </div> 126 </li> 127 <li> 128 <div class="game-grid"> 129 <h4>二七区</h4> 130 <p>Erqi District</p> 131 <img src="images/t2.jpg" class="img-responsive" alt=""/> 132 </div> 133 </li> 134 <li> 135 <div class="game-grid"> 136 <h4>管城区</h4> 137 <p>Guancheng District</p> 138 <img src="images/t5.jpg"class="img-responsive" alt=""/> 139 </div> 140 </li> 141 <li> 142 <div class="game-grid"> 143 <h4>上街区</h4> 144 <p>Shangjie District</p> 145 <img src="images/t6.jpg"class="img-responsive" alt=""/> 146 </div> 147 </li> 148 <li> 149 <div class="game-grid"> 150 <h4>巩义市</h4> 151 <p>Gongyi City</p> 152 <img src="images/t7.jpg"class="img-responsive" alt=""/> 153 </div> 154 </li> 155 <li> 156 <div class="game-grid"> 157 <h4>新郑市</h4> 158 <p>Xinzheng City</p> 159 <img src="images/t8.jpg"class="img-responsive" alt=""/> 160 </div> 161 </li> 162 <li> 163 <div class="game-grid"> 164 <h4>登封市</h4> 165 <p>Dengfeng City</p> 166 <img src="images/t9.jpg"class="img-responsive" alt=""/> 167 </div> 168 </li> 169 <li> 170 <div class="game-grid"> 171 <h4>新密市</h4> 172 <p>Xinmi City</p> 173 <img src="images/t10.jpg"class="img-responsive" alt=""/> 174 </div> 175 </li> 176 <li> 177 <div class="game-grid"> 178 <h4>荥阳市</h4> 179 <p>Rongyang City</p> 180 <img src="images/t11.jpg"class="img-responsive" alt=""/> 181 </div> 182 </li> 183 <li> 184 <div class="game-grid"> 185 <h4>中牟县</h4> 186 <p>Zhongmu County</p> 187 <img src="images/t12.jpg"class="img-responsive" alt=""/> 188 </div> 189 </li> 190 </ul> 191 192 193 <script type="text/javascript"> 194 $(window).load(function() { 195 $("#flexiselDemo1").flexisel({ 196 visibleItems: 4, 197 animationSpeed: 1000, 198 autoPlay: true, 199 autoPlaySpeed: 3000, 200 pauseOnHover:true, 201 enableResponsiveBreakpoints: true, 202 responsiveBreakpoints: { 203 portrait: { 204 changePoint:480, 205 visibleItems: 1 206 }, 207 landscape: { 208 changePoint:640, 209 visibleItems: 2 210 }, 211 tablet: { 212 changePoint:768, 213 visibleItems: 3 214 } 215 } 216 }); 217 }); 218 </script> 219 <script type="text/javascript" src="js/jquery.flexisel.js"></script> 220 </div> 221 </div> 222 </div> 223 <!-- latest --> 224 <div class="latest"> 225 <div class="container"> 226 <div class="latest-games"> 227 <h3>名胜古迹</h3> 228 <span></span> 229 </div> 230 <div class="latest-top"> 231 <div class="col-md-5 trailer-text"> 232 <div class="sub-trailer"> 233 <div class="col-md-4 sub-img"> 234 <img src="images/v1.jpg" alt="img07"/> 235 </div> 236 <div class="col-md-8 sub-text"> 237 <a href="#">少林寺</a> 238 <p>少林寺是世界著名的佛教寺院，被誉为“天下第一名刹”。</p> 239 </div> 240 <div class="clearfix"> </div> 241 </div> 242 <div class="sub-trailer"> 243 <div class="col-md-4 sub-img"> 244 <img src="images/v2.jpg" alt="img07"/> 245 </div> 246 <div class="col-md-8 sub-text"> 247 <a href="#">中岳嵩山</a> 248 <p>是中华文明的重要发源地，也是中国名胜风景区，为五岳中的中岳。</p> 249 </div> 250 <div class="clearfix"> </div> 251 </div> 252 <div class="sub-trailer"> 253 <div class="col-md-4 sub-img"> 254 <img src="images/v3.jpg" alt="img07"/> 255 </div> 256 <div class="col-md-8 sub-text"> 257 <a href="#">始祖山</a> 258 <p>据传此峰因黄帝臣风后封地而得名，是黄帝活动的中心地域。</p> <a class="hvr-bounce-to-top" href="名胜古迹.html">了解更多...</a> 259 </div> 260 <div class="clearfix"> </div> 261 </div> 262 </div> 263 <div class="col-md-7 trailer"> 264 <video src="media\少林英雄.mp4" controls poster="images\p1.jpg" height="380" wight="550">少林英雄</video> 265 </div> 266 <div class="clearfix"> </div> 267 </div> 268 </div> 269 </div> 270 <!-- poster --> 271 <div class="poster"> 272 <div class="container"> 273 <div class="poster-info"> 274 <h3><font color="#FF3399">郑州风光</font></h3> 275 <p><font color="#666666">郑州市是中国八大古都之一、世界历史都市联盟成员城市、国家历史文化名城、全国文明城市、全国科技进步示范城市、国家卫生城市、国家园林城市、国家双拥模范城市、全国绿化模范城市、中国优秀旅游城市、中国大陆旅游业最发达城市之一，2012中国特色魅力城市200强，全国最佳会展经营城市。</font></p> 276 <a class="hvr-bounce-to-bottom" href="郑州美景.html">更多美景</a> 277 </div> 278 </div> 279 </div> 280 <!-- x-box --> 281 <div class="x-box"> 282 <div class="container"> 283 <div class="x-box_sec"> 284 <div class="col-md-7 x-box-left"> 285 <h2>特有美食</h2> 286 <h3>烩面</h3> 287 <p>烩面，中国十大面条之一，有着1300多年的历史。是一种荤、素、汤、菜、饭兼而有之的河南传统美食，以味道鲜美，经济实惠，享誉中原，遍及全国。烩面是以优质高筋面粉为原料，辅以高汤及多种配菜，一种类似宽面条的面食。汤好面筋，营养高。有羊肉烩面、三鲜烩面、五鲜烩面等多种类型。 288 烩面的精华全在于汤，汤用上等嫩羊肉、羊骨(劈开，露出中间的骨髓)一起煮五个小时以上，先用大火猛滚再用小火煲，其中下七八味中药，骨头油都熬出来了，煲出来的汤白白亮亮，犹如牛乳一样，所以又有人叫白汤。下面时，锅内放原汁肉汤，将面拉成薄条入锅，辅料以海带丝、豆腐丝、粉条、香菜、鹌鹑蛋、海参、鱿鱼等，上桌时外带香菜、辣椒油、糖蒜等小碟。 </p> 289 <a class="hvr-bounce-to-top" href="郑州美食.html">更多美食</a> 290 </div> 291 <div class="col-md-5 x-box-right"> 292 <a href="烩面.html"> <img src="images/huimian.jpg" class="img-responsive" alt=""/></a> 293 </div> 294 <div class="clearfix"></div> 295 </div> 296 </div> 297 </div> 298 <!-- footer --> 299 <div class="footer"> 300 <div class="container"> 301 <div class="footer-grids"> 302 <div class="col-md-3 ftr-info"> 303 <h3>声明：</h3> 304 <p>本网页所使用到的所有图片、链接、资料等均为网上公共资料，如有他人使用，本人不承担任何法律责任。 305 </p> 306 </div> 307 <div class="col-md-3 ftr-grid"> 308 <h3>网页标签</h3> 309 <ul class="ftr-list"> 310 <li><a href="#">郑州</a></li> 311 <li><a href="#">天地之中</a></li> 312 <li><a href="#">中原经济区</a></li> 313 <li><a href="#">古都</a></li> 314 <li><a href="#">中原</a></li> 315 </ul> 316 </div> 317 <div class="col-md-3 ftr-grid"> 318 <h3>鸣谢</h3> 319 <ul class="ftr-list"> 320 <li><a href="#">百度百科</a></li> 321 <li><a href="#">百度图片</a></li> 322 <li><a href="#">腾讯QQ</a></li> 323 <li><a href="#">爱奇艺视频</a></li> 324 <li><a href="#">郑州网</a></li> 325 </ul> 326 </div> 327 <div class="col-md-3 ftr-grid"> 328 <h3>联系方式</h3> 329 <ul class="ftr-list"> 330 <li><a href="#">QQ：877922989</a></li> 331 <li><a href="#">邮箱：877922989@qq.com</a></li> 332 <li><a href="#">微博：鱼骨Eaco-@sina.com</a></li> 333 </ul> 334 </div> 335 <div class="clearfix"></div> 336 </div> 337 </div> 338 </div> 339 <!----> 340 <div class="copywrite"> 341 <div class="container"> 342 <a href="#"><p>作者：景怡柯<br>(点击上方白色字体返回顶部)</p></a> 343 </div> 344 </div> 345 </body> 346 </html>