版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/89609969
HTML是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
<html> </html>
<br/>
错误:<a><b></a></b>
正确:<a><b></b></a>
<html> <head> <title>这是标题</title> </head> <body> <FONT color='red'>Hello World</font> <br/> <font color='green'>Hello World</font> </body> </html>
<img src="image/listenerMe.jpg" align="right" alt="来听杨校老师授课" width="500" height="500"/>
<a href="http://www.baidu.com ">戳我</a> <br/> <a href="http://www. baidu.com " target="_self">戳我</a> <br/> <a href="http://www.baidu.com" target="_blank">戳我</a> <br/> <a href="./test.html">列表标签</a> <br/> <a href="mailto:mryang@javabs.cn">电邮我呀</a> <br/> <a href="http://www.javabs.cn"><img src="image/lookme.jpg"></a>
html5中为了提高程序的可读性,提供了一些标签,以下只是部分列举
利用所学知识制作完成“时装商城”首页。
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站首页</title> </head> <body> <table width="1400" border="0" align="center"> <tr> <td> <!-- LOGO部分 --> <table width="100%"> <tr height="40"> <td> <img src="img/logo.png"/> </td> <td> <img src="img/header.png"/> </td> <td> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--导航部分--> <tr height="30" bgcolor="#75AA24"> <td> <a href="#"><font color="white">首页</font></a> <a href="#"><font color="white">精品女装</font></a> <a href="#"><font color="white">酷帅男装</font></a> <a href="#"><font color="white">时尚鞋靴</font></a> <a href="#"><font color="white">真皮箱包</font></a> </td> </tr> <!--轮播图--> <tr> <td> <img src="products/1/banner1.jpg" width="100%"/> </td> </tr> <!--最新商品 展示模块--> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="7"><font size="5"><b>最新商品</b></font> <img src="img/title2.jpg"></td> </tr> <tr> <td rowspan="2" width="200" height="500"> <img src="products/hao/big02.jpg" width="100%" height="100%"/> </td> <td colspan="3" width="600" height="250"> <img src="products/hao/middle02.jpg" width="100%" height="250"/> </td> <td width="200" align="center"> <img src="products/1/cs20001.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs20002.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs20003.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> <tr> <td align="center"> <img src="products/1/cs20004.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20005.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20006.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20007.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20008.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20009.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> </table> </td> </tr> <!--广告--> <tr> <td> <a href="#"><img src="products/hao/ad.jpg" width="100%"></a> </td> </tr> <!--掌柜推荐 展示模块--> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="7"><font size="5"><b>掌柜推荐</b></font> <img src="img/title2.jpg"></td> </tr> <tr> <td rowspan="2" width="200" height="500"> <img src="products/hao/big02.jpg" width="100%" height="100%"/> </td> <td colspan="3" width="600" height="250"> <img src="products/hao/middle02.jpg" width="100%" height="250"/> </td> <td width="200" align="center"> <img src="products/1/cs10007.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs10008.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs10009.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> <tr> <td align="center"> <img src="products/1/cs10001.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10002.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10003.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10004.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10005.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10006.jpg" width="130px" height="130px" /><br/> <p><font color="gray">大衣</font></p> <p><font color="red">$499</font></p> </td> </tr> </table> </td> </tr> <!--尾部图片展示--> <tr> <td> <img src="img/footer.jpg" width="100%"/> </td> </tr> <!--网页连接--> <tr> <td align="center"> <a href="">关于我们</a> <a href="">联系我们</a> <a href="">招贤纳士</a> <a href="">法律声明</a> <a href="">友情链接</a> <a href="">支付方式</a> <a href="">配送方式</a> <a href="">服务声明</a> <a href="">广告声明</a> <br/> <p> Copyright © 2016-2019 杨校老师课堂 版权所有 </p> </td> </tr> </table> </body> </html>
作者: 杨校
出处: https://blog.csdn.net/kese7952
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句