用了几天时间学完了HTML,于是乎,编写了个网上书城项目以对所学知识做个总结.常见标签我也会对其进行标注,若写的有什么不好之处也请大家勿怪.
好了,废话不多说,代码奉上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bookStore</title> </head> <body> <!-- 整个页面 --> <div id="page"> <!-- top --> <div id="top"> <!-- <div></div>为行级块标签 --> <table width="100%"> <tbody> <tr> <td width="70%"> <!-- <td></td>为列标签 --> <img alt="logo" src="images/logo.png"/> </td> <td> <img alt="cart" src="images/cart.gif"> <a href="#">购物车</a> <!-- 这里的"#"代表跳转本页 <a></a>为链接标签,用于超链接的跳转 --> | <a href="#">帮助中心</a> | <a href="#">我的账户</a> | <a href="#">新用户注册</a> </td> </tr> </tbody> </table> </div> </div> <!-- menu --> <div id="menu"> <table width="100%" bgcolor="#1C3F09"> <tbody> <tr align="center"> <td> <a herf="#"> <font color="#ffffff">文学</font> <!-- <font>为基本文字标签 --> </a> <a herf="#"> <font color="#ffffff">生活</font> </a> <a herf="#"> <font color="#ffffff">计算机</font> </a> <a herf="#"> <font color="#ffffff">外语</font> </a> <a herf="#"> <font color="#ffffff">经管</font> </a> <a herf="#"> <font color="#ffffff">励志</font> </a> <a herf="#"> <font color="#ffffff">社科</font> </a> <a herf="#"> <font color="#ffffff">学术</font> </a> <a herf="#"> <font color="#ffffff">少儿</font> </a> <a herf="#"> <font color="#ffffff">艺术</font> </a> <a herf="#"> <font color="#ffffff">原版</font> </a> <a herf="#"> <font color="#ffffff">科技</font> </a> <a herf="#"> <font color="#ffffff">考试</font> </a> <a herf="#"> <font color="#ffffff">生活百科</font> </a> <a herf="#"> <font color="#ffffff">全部商品目录</font> </a> </td> </tr> </tbody> </table> </div> <!-- search --> <div id="search"> <table width="100%" bgcolor="#B6B684"> <tbody> <tr align="right"> <td> <font>Search</font> <input type="text"> <input value="搜索" type="button"> </td> </tr> </tbody> </table> </div> <!-- content --> <div id="content"> <div align="right"> 首页 > 旅游 > 图书列表 </div> <h1>商品目录</h1> <hr> <!-- <hr>标签用于创建一条水平线 --> <h1>计算机类</h1> <span>共XXX种商品</span> <hr> <div> <img alt="productlist" src="images/productlist.gif" width="100%"> </div> <div> <table width="100%"> <tbody> <tr align="center"> <td> <div> <img alt="book" src="bookcover/101.jpg"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/102.jpg"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/103.jpg"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/104.jpg"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> </tr> <tr align="center"> <td> <div> <img alt="book" src="bookcover/105.jpg" width="102"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/106.jpg" width="102"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/107.jpg"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> <td> <div> <img alt="book" src="bookcover/108.jpg" width="102"> </div> <div> <span>书名:xxx</span> <br> <span>售价:xxx</span> </div> </td> </tr> </tbody> </table> </div> <!-- bottom --> <div id="bottom"> <table width="100%" bgcolor="#EFEEDC"> <tbody> <tr> <td rowspan="2" width="70%"> <img alt="logo" src="images/logo.png"> </td> <td>CONTACT US</td> </tr> <tr> <td> <span>copyright 2017 © striner all rights reserved</span> <!-- 这里的©是©版权符号的标签 --> </tr> </tbody> </table> </div> </div> </body> </html>
ok.接下来为效果展示,由于页面略长没我就分为两部分截取了.
这篇代码只是HTML基础标签的一个复习,要是做项目的话这些可是远远不够的,待学完了HTML,博主就要向CSS和JS进发了,就期待我的下一篇博客吧~
想了解相关代码请点击:https://github.com/striner/front-end-development/blob/master/bookStore.html
喜欢就请关注我,你们的关注是我最大的动力~~