在HTML中，超链接元素的标记是<a>标签；
| 编号 | 属性 | 描述 |
|---|---|---|
| 1 | href="url" |
跳转的目标地址 |
| 2 | href="tel:136****5566" |
点击后询问用户是否要拨打电话 |
| 3 | href="mailto:123456@qq.com" |
打开邮箱，发送邮件 |
| 4 | href="ce.md" |
浏览器不能解析的文档会直接下载 |
| 5 | href="#name" |
设置锚点实现当前页面的跳转 |
| 编号 | 属性 | 描述 |
|---|---|---|
| 1 | target="_self" |
默认在当前窗口打开 |
| 2 | target="_blank" |
在新窗口打开 |
| 3 | target="_parent" |
在父窗口中打开 |
| 4 | target="_top" |
在顶层窗口打开 |
| 5 | target="name" |
指定名称的窗口打开，与iframe元素配合 |
| 6 | target="#" |
跳转到设置了锚点元素的所在位置 |
锚点链接可实现当前页面的跳转；使用id属性规定锚的名称，但是需要注意id不能重复；
那么锚点链接如何应用呢？通俗的来讲就是，当文章很长时，我们可以创建锚点快速的跳转到某段内容，增强文章的可读性。
例如：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>锚点链接</title></head><body><div id="top">头部</div><div style="height: 1000px;"></div><a href="#top">返回顶部</a></body></html>
表格是数据格式化展示的重要工具，使用频率非常高；
| 序号 | 属性 | 适用元素 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 3 | cellspacing |
<table> |
设置单元格边框间隙 |
| 4 | align |
不限 | 设置单元格内容水平居中 |
| 5 | bgcolor |
不限 | 设置背景色 |
| 6 | width |
不限 | 设置宽度 |
| 7 | height |
不限 | 设置高度 |
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | colspan | 行合并 |
| 2 | rowspan | 列合并 |
ps:无论是行合并（colspan）还是列合并（rowspan），都必须写在单元格中。
个人信息表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="widtd=device-widtd, initial-scale=1.0"><title>个人信息表</title></head><body><style>td{width: 40px;}tr{ height: 29px;}</style><table border="1" cellspacing="0" cellpadding="5" width="580" align="center" ><caption style="padding: 12px; font-size: 16px; font-weight:bold;">个人信息表</caption><tbody><tr><td colspan="2">姓名</td><td></td><td>性别</td><td></td><td>民族</td><td colspan="2"></td><td>籍贯</td><td colspan="2"></td><td colspan="3" rowspan="3">一寸照片</td></tr><tr><td colspan="2">身份证号</td><td colspan="3"></td><td>出生日期</td><td colspan="2"></td><td>政治面貌</td><td colspan="2"></td></tr><tr><td colspan="2">毕业院校</td><td colspan="3"></td><td>学历学位</td><td colspan="2"></td><td>毕业时间</td><td colspan="2"></td></tr><tr><td colspan="2">所学专业</td><td colspan=""></td><td>工作时间</td><td colspan="2"></td><td>健康状况</td><td colspan="2"></td><td>户口性质</td><td colspan="2"></td></tr><tr><td colspan="3">手机</td><td colspan="5"></td><td>邮箱</td><td colspan="5"></td></tr><tr><td colspan="3">现住地址：</td><td colspan="11"></td></tr><tr><td colspan="2" rowspan="4">学习简历</td><td colspan="12" rowspan="4"></td></tr><tr></tr><tr></tr><tr></tr><tr><td colspan="2" rowspan="8">工作经历</td><td colspan="12" rowspan="8"></td></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></tbody></table></body></html>
效果图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
