今天重新拿起了html,本来不想搞web前端,可能因为大一加入网站设计部做了太多的网页做吐了吧!哈哈哈~~
现在的心态和当初不一样了,走java这条路,前端和后端都要了解,还好html+css还没有忘干净,行了,话不多说,把这当作我的第一篇博客吧,挺有纪念意义的~~~~
HTML标签基础
- 基础标签用法
- <p></p> 段落
- <br/> 换行
-<font> </font> 设置字体
<table></table> 表格
<ol></ol> 有序列表
<ul></ul> 无序列表
还有一些乱七八糟的······
表格的嵌套来实现网站首页
<table border="1px" width="1300" align="center" cellspacing="0px" cellpadding="0px">
<!--logo部分-->
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="img/logo2.png" height="47px"/>
</td>
<td width="33.3%">
<img src="img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 导航栏-->
<tr height="50px">
<td bgcolor="black">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font size="5" color="white">手机数码</font></a>
<a href="#"><font size="5" color="white">电脑办公</font></a>
<a href="#"><font size="5" color="white">鞋靴箱包</font></a>
<a href="#"><font size="5" color="white">家用电器</font></a>
</td>
</tr>
<!-- 轮播图-->
<tr>
<td>
<img src="img/1.jpg" width="100%" />
</td>
</tr>
<!-- 最新商品-->
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td colspan="7">
<font size="5">最新商品</font>
<img src="img/title2.jpg" />
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="img/big01.jpg" width="100%" height="100%" />
</td>
<td colspan="3" width="555px" height="250px">
<a href="#"><img src="img/middle01.jpg" width="100%" height="100%" /></a>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 广告图片-->
<tr>
<td>
<img src="img/ad.jpg" width="100%" height="100%" />
</td>
</tr>
<!-- 热门商品-->
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td colspan="7">
<font size="5">热门商品</font>
<img src="img/title2.jpg" />
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="img/big01.jpg" width="100%" height="100%" />
</td>
<td colspan="3" width="555px" height="250px">
<a href="#"><img src="img/middle01.jpg" width="100%" height="100%" /></a>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
<td width="185px" height="250px" align="center">
<a href="#"><img src="img/small03.jpg" /></a><br />
<a href="#"><font color="gray">电饭锅</font></a><br /><br />
<font color="red">$499</font>
</td>
</tr>
</table>
</td>
</tr>
<!--广告图片-->
<tr>
<td>
<img src="img/footer.jpg" width="100%" height="100%"</td>
</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>
<p>
Copyright @ 2005-2016 传智商城 版权所有
</p>
</td>
</tr>
</table>
table标签生成整体一个大框架,通过用 tr td 标签的嵌套,划分整体的布局,rowspan和colspan用来合并单元格,这个是核心。
网站后台框架
《frameset》 用来分割页面,可以进行多次分割,但是要注意把body标签去掉
《frame src = “”》《 / frame》 用来链接各个网页
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right" />
</frameset>
</frameset>
第一篇博客就先写到这里吧,还不太会排版,自己先凑活着看吧,反正是写给自己看的,之前不愿意写博客,感觉写博客好麻烦的,太浪费时间了,但是我还是写了这第一篇博客,不可否认写博客确实是个好习惯,用来记录你的学习成长的过程,再说好记性不如烂笔头,学过的东西总会忘记的,反过头来看看也是蛮好的。既然开了头,那就坚定不移的走下去,开弓没有回头箭。希望CSDN的博客我能够坚持写下去,记录自己技术的进步,迈出第一步那就不能停止,更不能后退,因为你身后已经没有能够为你站出的人了啊!哎吆!有点跑题了~~~
记住:越努力,越幸运! 你说,是吧。