Java学习的第二天（前端：链接标签+表格标签）

1.链接标签

//当href链接的是一个网站时   _self(在本身的页面打开)   _blank(在一个新的页面打开)
<a href="http://www.baidu.com" target="_self"><a>
//当href链接到一个网页时同样会使用到相对路径
<a href="网页的相对路径"
//当href链接到一张图片时
<a href="图片的路径"
//当把图片作为一个超链接时，例如点击一张图片会跳转至一个网站
<a href="www.51zxw.net">
    <img src="图片的相对路径"/>
</a>
//当链接的是一个空链接时（作用：用于置顶）
<a href="#">空链接</a>
//当链接的是一个邮箱时，表示是对该邮箱发送一个邮件
<a href="mailto:xxxxx@qq.com"></a>

2.表格标签

/作用：用于存储数据和页面布局（目前已经淘汰了近5年 现在主流的是使用div+css）
//table的属性有border（表格边框）bordercolor(边框颜色)  width(宽度)  heigh(高度)  align(左/中/右)  cellspacing="0px"(去掉单元格之间的宽度)  bgcolor(背景颜色)  background(背景图片)  cellpadding(设置单元格内容和边框之间的距离)
//实例一
<table border="1px" bordercolor="red" width="200px" height="200px" align="center"  cellspacing="0px">
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table>
//tr的属性 bgcolor(背景颜色) align(单元格内容位置)
//表格的跨行和跨列 colspan="2"(跨两列) rowspan="2"(跨两行)
//自定义表格 
//实例二
<table border="1px" cellspacing="0px" width="400px" height="400px" align="center">
//标题
        <caption>103班</caption>
//表头
        <thead>
            <tr>
//注意：这里使用<th>代替了<td>,作用是因为<th>有居中加粗效果
                <th>成绩</th>
                <th>年龄</th>
            </tr>
        </thead>
//表体
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>100</td>
            </tr>
        </tbody>
//表尾
        <tfoot>
            <tr>
                <td>李四</td>
                <td>100</td>
            </tr>
        </tfoot>
</table>

1.png

2.png

实例练习1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>编易商场</title>
    </head>
    <body>
        <table border="0px" cellspacing="0px" align="center" width="90%">
            <tr>
                <td>
                    <table border="0px" cellspacing="0px" width="100%" height="125px">
                        <tr align="center">
                            <td width="33%">
                                <img src="../img/logo4.png"/>
                            </td>
                            <td width="33%">
                                <img src="../img/header.jpg" />
                            </td>
                            <td width="33%">
                                <a href="#">登录</a>&nbsp;&nbsp;&nbsp;
                                <a href="#">注册</a>&nbsp;&nbsp;&nbsp;
                                <a href="#">购物车</a>&nbsp;&nbsp;&nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="0px" cellspacing="0px" width="100%" height="50px">
                        <tr bgcolor="dimgray">
                            <td>
                                &nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">首页</font></a>&nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">手机数码</font></a>&nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">电脑办公</font></a>&nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">烟酒糖茶</font></a>&nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
                                <a href="#"><font color="black" size="4">玉石翡翠</font></a>&nbsp;&nbsp;&nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="0px" cellspacing="0px" width="100%" height="500px">
                        <tr>
                            <td>
                                <img src="../img/3.jpg" width="100%"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="0px" cellspacing="0px" width="100%" height="60px">
                        <tr>
                            <td>
                                &nbsp;&nbsp;
                                <font size="5"><b>热门商品</b></font>
                                <img src="../../img/title2.jpg" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="1px" cellspacing="0px" width="100%" height="400px">
                        <tr>
                            <td rowspan="2" width="20%">
                                <img src="../img/big01.jpg" width="100%"/>
                            </td>
                            <td colspan="3" width="40%" height="50%">
                                <img src="../img/middle01.jpg" width="100%" height="120%"/>
                            </td>
                            <td width="13%">
                                <img src="../img/small01.jpg" width="100%"/>
                            </td>
                            <td width="13%">
                                <img src="../img/small02.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small03.jpg" width="100%" />
                            </td>
                        </tr>
                        <tr>
                            <td width="13%">
                                <img src="../img/small04.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small05.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small06.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small07.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small08.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small09.jpg" width="100%" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="0px" cellspacing="0px" width="100%" height="60px">
                        <tr>
                            <td>
                                &nbsp;&nbsp;
                                <font size="5"><b>最新商品</b></font>
                                <img src="../../img/title2.jpg" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table border="1px" cellspacing="0px" width="100%" height="400px">
                        <tr>
                            <td rowspan="2" width="20%">
                                <img src="../img/big01.jpg" width="100%"/>
                            </td>
                            <td colspan="3" width="40%" height="50%">
                                <img src="../img/middle01.jpg" width="100%" height="120%"/>
                            </td>
                            <td width="13%">
                                <img src="../img/small01.jpg" width="100%"/>
                            </td>
                            <td width="13%">
                                <img src="../img/small02.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small03.jpg" width="100%" />
                            </td>
                        </tr>
                        <tr>
                            <td width="13%">
                                <img src="../img/small04.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small05.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small06.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small07.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small08.jpg" width="100%" />
                            </td>
                            <td width="13%">
                                <img src="../img/small09.jpg" width="100%" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table border="0px" cellspacing="0px" width="90%" height="200px" align="center">
            <tr bgcolor="#1C1537">
                <td align="center">
                    <img src="../img/footer.png" width="650px"/>
                </td>
            </tr>
        </table>
        <table border="1px" cellspacing="0px" width="90%" height="80px" align="center">
            <tr>
                <td align="center">
                    <font>copyright@2018 Times Education Mercury All rights reserved.</font>
                </td>
            </tr>
        </table>
    </body>
</html>

3.png

4.png

5.png

实例练习2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table bordercolor="red" border="1px" cellspacing="0px" align="center" width="250px" height="250px">
            <tr align="center">
                <td rowspan="4">肖渊</td>
                <td rowspan="2">高帆</td>
                <td>春燕</td>
            </tr>
            <tr align="center">
                <td>亮亮</td>
            </tr>
            <tr align="center">
                <td>君子</td>
                <td>秀英</td>
            </tr>
            <tr align="center">
                <td>豆子</td>
                <td>妹子</td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <table border="1px" bordercolor="red" cellspacing="0px" width="250px" height="250px" align="center">
                <td colspan="4">1</td>
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td colspan="3">1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td colspan="3">1</td>
                <td>1</td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <table border="0px" bordercolor="red" cellspacing="4px" width="750px" height="150px" align="center">
            <tr>
                <td colspan="4">
                    <img src="../img/q1.PNG" width="100%" height="88%"/>
                </td>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#EBEFFF" align="center"><font>阿里巴巴旗下网站</font></td>
                <td bgcolor="#EBEFFF" align="center"><font>我要买</font></td>
                <td bgcolor="#EBEFFF" align="center"><font>我要买</font></td>
                <td bgcolor="#EBEFFF" align="center"><font>我要买</font></td>
            </tr>
            <tr>
                <td bgcolor="#EBEFFF" colspan="3" align="center"><font>您好，欢迎来到淘宝！</font></td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <table border="0px" bordercolor="red" cellspacing="0px" width="450px" height="250px" align="center">
            <tr>
                <td height="20%">
                    <table border="0px" bordercolor="red" cellspacing="0px" width="100%" height="100%" align="center">
                        <tr>
                            <td>
                                <img src="../img/q4.PNG" width="100%"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="80%">
                    <table border="0px" bordercolor="red" cellspacing="0px" width="100%" height="100%" align="center">
                        <tr>
                            <td width="50%">
                                <img src="../img/q3.PNG" width="100%"/>
                            </td>
                            <td width="50%" align="left"> 
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">超值变形金刚2.5折！</font></a><br /><br />
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">人们为啥对电视吼叫</font></a><br /><br />
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">淘宝们首届happy会</font></a><br /><br />
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">比基尼美女激情沙滩</font></a><br /><br />
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">想做最闪亮的star吗？</font></a><br /><br />
                                &nbsp;&nbsp;&nbsp;<a href="#"><font size="3">千种中奖机会有你吗？</font></a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <table border="1px" bordercolor="red" cellspacing="2px" width="250px" height="250px" align="center">
            <tr>
                <td colspan="2"></td>
                <td rowspan="2"></td>
            </tr>   
            <tr>
                <td rowspan="2"></td>
                <td></td>
            </tr>   
            <tr>
                <td colspan="2"></td>
            </tr>   
        </table>
        <br />
        <br />
        <br />
        <table border="1px" bordercolor="red" cellspacing="2px" width="250px" height="250px" align="center">
            <tr>
                <td rowspan="2"></td>
                <td colspan="2"></td>
            </tr>   
            <tr>
                <td></td>
                <td rowspan="2"></td>
            </tr>   
            <tr>
                <td colspan="2"></td>
            </tr>   
        </table>
        <br />
        <br />
        <br />
        <table border="1px" bordercolor="black" cellspacing="2px" width="450px" height="450px" align="center">
            <tr>
                <td rowspan="2" bgcolor="#FFFF00"></td>
                <td bgcolor="#E3CF57"></td>
            </tr>       
            <tr>
                <td bgcolor="#FF9912"></td>
            </tr>       
            <tr>
                <td bgcolor="#EB8E55" colspan="2"></td>
            </tr>           
            <tr>
                <td bgcolor="#FFE384"></td>
                <td rowspan="2" bgcolor="#DAA569"></td>
            </tr>       
            <tr>
                <td bgcolor="#FFD700"></td>
            </tr>       
        </table>
    </body>
</html>

6.png

7.png

8.png

9.png

最后编辑于：2019.10.27 19:20:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,711评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,932评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,770评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,799评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,697评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,069评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,535评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,200评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,353评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,290评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,331评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,020评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,610评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,694评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,927评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,330评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,904评论 2赞 341

Java学习的第二天（前端：链接标签+表格标签）

推荐阅读更多精彩内容