HTML定义及标签简单理解2(超链接锚点,表格标签)

it2024-04-11  44

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>

运行图

最新回复(0)