1.超链接锚点
我们在浏览网页时,为了提高信息的检索速度,会用到HTML语言中的一种特殊链接——锚点链接.通过创建锚点链接,用户可以快速定位到目标内容.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 返回顶部(反向使用锚点)
<a name="top"></a>
<a href="#top">返回顶部</a>-->
<a name="top"></a>
<!-- 超链接跳转转到指定锚点
<a href="#id名">链接文本</a>
定义锚点
<a name="id名"></a>
-->
<a href="#p1">颜色1</a>
<a href="#p2">颜色2</a>
<a href="#p3">颜色3<a name="tt"></a></a>
<a href="#p4">颜色4</a>
<a href="#p5">颜色5</a>
<hr />
<h3>红色<a name="p1"></a></h3>
<img src="img/nike/1.png" />
<h3>蓝色<a name="p2"></a></h3>
<img src="img/nike/2.png" />
<h3>紫色<a name="p3"><a href="#tt">返回</a></a></h3>
<img src="img/nike/3.png" />
<h3>绿色<a name="p4"></a></h3>
<img src="img/nike/4.png" />
<h3>棕色<a name="p5"></a></h3>
<img src="img/nike/5.png" />
<p align="right"><a href="#top">返回顶部</a></p>
</body>
</html>
2.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格标签
table 表格区域
width="" height=""设置表格整体宽高
background=""背景照片
tr 表格行
td 简单单元格
th 表头,也是单元格,内容会加粗居中
同时需明白表格内容必须写表格中
-->
<table border="1" cellspacing="0" height="100" cellpadding="20">
<!-- align="center" 控制水平对齐方式 left center right
valign="top" 控制垂直方向对齐方式 top middle bottom-->
<tr align="center">
<td background="img/baidu.ico">姓名</td>
<td>性别</td>
<td>年龄</td>
<td>班级</td>
<!-- 单元格跨列合并
从哪里开始合并就在哪里加colspan="合并数量" -->
<td colspan="2"></td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>计本1802</td>
<!-- 跨行合并 rowspan="" -->
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
<td>计本1803</td>
<td></td>
</tr>
</table>
</body>
</html>
3.简单的表格制作
1)简历表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3 align="center">个人简历</h3>
<table border="1" align="center" cellspacing="0">
<tr>
<td align="center" height="30" bgcolor="deepskyblue">姓名</td>
<td width="100"></td>
<td align="center" width="100"bgcolor="deepskyblue">性别</td>
<td></td>
<td rowspan="5" width="100" align="center">照片</td>
</tr>
<tr>
<td align="center" height="30"bgcolor="deepskyblue">出生年月</td>
<td></td>
<td align="center"bgcolor="deepskyblue">籍贯</td>
<td></td>
</tr>
<tr>
<td align="center" height="30"bgcolor="deepskyblue">政治面貌</td>
<td></td>
<td align="center"bgcolor="deepskyblue">民族</td>
<td></td>
</tr>
<tr>
<td align="center"height="30"bgcolor="deepskyblue">健康状况</td>
<td></td>
<td align="center"bgcolor="deepskyblue">婚姻状况</td>
<td></td>
</tr>
<tr>
<td align="center"height="30"bgcolor="deepskyblue">联系电话</td>
<td></td>
<td align="center" align="center"height="30"bgcolor="deepskyblue">电子邮箱</td>
<td width="100" align="center"><font size="1">www.jinjin.com</font></td>
</tr>
<tr>
<td align="center"height="30"bgcolor="deepskyblue">求职意向</td>
<td colspan="4"></td>
</tr>
<tr>
<td align="center" height="200"bgcolor="deepskyblue">工作经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td align="center" height="40"bgcolor="deepskyblue">教育经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td align="center" height="40"bgcolor="deepskyblue">英文水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td align="center" height="40"bgcolor="deepskyblue">计算机水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td align="center" height="40"bgcolor="deepskyblue">自我评价</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
简历图片
2)财务报表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
1.用HTML语言实现下列表格.可自己设定表格颜色
<p align="center">财务报表</p>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td>季度</td>
<td colspan="2">收入(元)</td>
<td colspan="2">支出(元)</td>
</tr>
<tr align="center">
<td></td>
<td>建筑</td>
<td>房地产</td>
<td>销售服务</td>
<td>办公</td>
</tr>
<tr align="center">
<td>第一季度</td>
<td>306000</td>
<td>282000</td>
<td>90000</td>
<td>10000</td>
</tr>
<tr align="center">
<td>第二季度</td>
<td>450000</td>
<td>364000</td>
<td>54000</td>
<td>20000</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
2.用HTML语言实现下列表格.可自己设定表格颜色
<p align="center">财务报表</p>
<table border="1" cellspacing="0" align="center">
<tr align="center">
<td colspan="2">品牌</td>
<td colspan="3" width="150">春装</td>
<td colspan="3" width="150">夏装</td>
</tr>
<tr align="center">
<td colspan="2"></td>
<td>男 装</td>
<td>女 装</td>
<td>童 装</td>
<td>男 装</td>
<td>女 装</td>
<td>童 装</td>
</tr>
<tr align="center">
<td rowspan="2">JC</td>
<td width="90">牛仔系列</td>
<td>116</td>
<td>98</td>
<td>68</td>
<td>88</td>
<td>86</td>
<td>46</td>
</tr>
<tr align="center">
<td>休闲系列</td>
<td>120</td>
<td>100</td>
<td>80</td>
<td>98</td>
<td>88</td>
<td>50</td>
</tr>
</table>
</body>
</html>
运行图示
3)水果表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3 align="center">水果展示</h3>
<hr color="red" />
<table align="center">
<tr>
<td><img src="img/nike/banana.jpg"></td>
<td>名称:香蕉<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:海南</td>
<td><img src="img/nike/pineapple.jpg"></td>
<td>名称:菠萝<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:广西</d>
<td><img src="img/nike/banana.jpg"></td>
<td>名称:香蕉<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:海南</td>
</tr>
<tr>
<td>名称:桃子<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:陕西</td>
<td><img src="img/nike/peach.jpg"></td>
<td>名称:梨<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:陕西</td>
<td><img src="img/nike/pear.jpg"></td>
<td>名称:葡萄<br>原价:<del>¥19.80</del><br>现价:9.80<br>产地:陕西</td>
<td><img src="img/nike/grape.jpg"></td>
</tr>
</table>
<br>
<hr color="red"/>
<p align="center"><font size="1">让公司地址:陕西省西安市<br>电话:029.98765432</font></p>
</body>
</html>
运行图
