html之表格与锚点

最新推荐文章于 2024-09-14 16:58:58 发布

原创最新推荐文章于 2024-09-14 16:58:58 发布 · 770 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html之表格与锚点

html 专栏收录该内容

3 篇文章

订阅专栏

锚点

*作用:

点击之后到指定地方
一般用于跳到指定地方，或者返回顶部
<div id="DB">顶部</div>
<a href="#GRJL">个人经历</a>
<div id="GRJL">个人经历</div>
<a href="#DB">回到顶部</a>

点击个人经历和返回顶部回到相应的地方

相对路径：

所谓相对路径，就是相对于自己的目标文件位置。

绝对路径：

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第 2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句：

<body backround="E:\book\网页布局\代码\第2章\bg.jpg" >

表格

表格的作用和特性

表格用于构造简历、课表及其他与需要比较多的行和列的网页

表格的各个小属性之间的联系脑图

`<td colspan="4" rowspan="4" valign="top">4行4列文字置顶`

示例1

 `<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
	td{
		width :150px;
	}
</style>
</head>
<body>
<table border="1" width="600px" height="600px" cellspacing="0" align="center">
	<thead>
<tr rowspan="2">
	<td align="center" colspan="4">个人简历</td>
</tr>

	</thead>
<tbody>
<tr>
	<td colspan="4">基本信息</td>
	
</tr>
<tr>
	<td >姓名</td>
	<td colspan="2">江</td>
	
	<td rowspan="4"><img src="./images/01.jpg"></a></td>
</tr>
<tr>
	<td>毕业院校</td>
	<td colspan="2">理工大学</td>
	
</tr>
<tr>
	<td>性别</td>
	<td colspan="2">女 </td>
	
</tr>
<tr><td>生日</td>
	<td colspan="2">12.24</td></tr>
<tr>
	<td>学历</td>
	<td>本科</td>
	<td>专业</td>
	<td>软件工程</td>
</tr>
<tr>
	<td>外语水平</td>
	<td>四级</td>
	<td>联系方式</td>
	<td>112</td>
</tr>
<tr>

	<td >籍贯</td>
	<td colspan="3">陕西</td>
	
</tr>
<tr>
	<td colspan="4">职业技能</td>
	
</tr>
<tr>
	<td colspan="4" rowspan="4" valign="top">1.<br>
	2.</td>
	
</tr>
<tr>
	
</tr>
<tr>
	
	
</tr>
<tr>
	
	
<tr>
	<td colspan="4">项目经验</td>
	
</tr>
<tr>
	<td colspan="2">智慧校园选课系统</td>

	<td colspan="2">2019年1月~2019年6月</td>
	
</tr>
<tr>
	<td rowspan="2" colspan="4" valign="top"> 项目描述：</td>
	
</tr>
<tr>
	
</tr>
	
<tr>
	<td>预览地址</td>
	<td colspan="3">www.baidu.com</td>
	
</tr>
<tr>
	<td>github</td>
	<td colspan="3">biajiang11</td>
</tr>

</tbody>

</table>
</body>
</html>`

示例结果

在这里插入图片描述