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>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0px" cellspacing="0px" width="100%" height="50px">
<tr bgcolor="dimgray">
<td>
<a href="#"><font color="black" size="4">首页</font></a>
<a href="#"><font color="black" size="4">手机数码</font></a>
<a href="#"><font color="black" size="4">电脑办公</font></a>
<a href="#"><font color="black" size="4">烟酒糖茶</font></a>
<a href="#"><font color="black" size="4">鞋靴箱包</font></a>
<a href="#"><font color="black" size="4">玉石翡翠</font></a>
</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>
<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>
<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">
<a href="#"><font size="3">超值变形金刚2.5折！</font></a><br /><br />
<a href="#"><font size="3">人们为啥对电视吼叫</font></a><br /><br />
<a href="#"><font size="3">淘宝们首届happy会</font></a><br /><br />
<a href="#"><font size="3">比基尼美女激情沙滩</font></a><br /><br />
<a href="#"><font size="3">想做最闪亮的star吗？</font></a><br /><br />
<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
网友评论