HTML基础（三）

最新推荐文章于 2025-12-12 09:41:43 发布

原创最新推荐文章于 2025-12-12 09:41:43 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

本文详细介绍HTML中表格标签的应用，包括数据展示、页面布局，以及超链接标签的使用技巧，如页面跳转、数据传递和锚点定位，是前端开发的基础教程。

表格标签


<table></table>
<tr></tr>控制行
<td></td>控制列
<thead></thead>语义化表头
<tbody></tbody>语义化表的身体
<th></th>表头居中加粗
rowspan合并行
 colspan合并列

</head>
<body>
<table align="center" border="1" cellspacing="0" cellpadding="0" width="500" height="35">
	<!-- align="center"  居中 -->
	<h2 align="center">340宿舍信息</h2>
	<thead>
	<tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td colspan="2">张三</td>
        <td>12</td>
    </tr>
    <tr>
        <td >李四</td>
        <td rowspan="2">女</td>
        <td>18</td>
    </tr>
    <!-- rowspan合并行
         colspan合并列 -->
    <tr>
        <td>王五</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

表格标签除了进行数据的展示，还可以进行页面的布局。
表格的页面布局

<!DOCTYPE html>
<html>
<head>
	<title>西安文理学院</title>
	<meta charset="utf-8">
	<style type="text/css">
       *{
            margin: 0;
            padding: 0;
        }

</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
   <tr style="height:60px;background-color: blue">
   	<td>
       <table style="height: 60px;" border="1" width="100%" cellspacing="0" cellpadding="0">
           <tr>
               <td>左边</td>
               <td>中间</td>
               <td>右边</td>

           </tr>

       </table>
   	</td>
   </tr>
   <tr style="height: 130px">
   	<td>第二行</td>
   </tr>
   <tr style="height:710px">
   	<td>第三行</td>
   </tr>
   <tr style="height: 1500px">
   	<td>第四行</td>
   </tr>
   <tr style="height:330px">
   	<td>第五行</td>
   </tr>
</table>

</body>
</html>

在这里插入图片描述

超链接标签

<a href="网络地址或者本地地址">显示给用户点击的信息</a>

a 标签是超链接标签，主要用于页面之间的跳转和数据传递
href属性是用来指定跳转的地址，支持网络地址和本地地址
网络地址必须完整的url地址

		target属性用来指定页面的打开方式，
		默认使用_self，表示在当前选项卡打开
		当值为_blank，表示使用一个新的选项卡打开
		不想刷又不想让他跳加个#号

<!DOCTYPE html>
<html>
<head>
	<title>超文本标签></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- a 标签是超链接标签，主要用于页面之间的跳转和数据传递
			href属性是用来指定跳转的地址，支持网络地址和本地地址
			网络地址必须完整的url地址
			
			target属性用来指定页面的打开方式，
			默认使用_self，表示在当前选项卡打开
			当值为_blank，表示使用一个新的选项卡打开
			# -->
    <a href="https://hao.360.com" target="_self">360极速浏览器</a>
    <a href="./yinpin.html" target="_blank">音乐播放</a>
    <a href="#">不跳</a>
</body>
</html>

在这里插入图片描述

锚点定位

<!DOCTYPE html>
<html>
<head>
	<title>锚点定位</title>
    <meta charset="utf-8">
</head>
<body>
<header style="height: 800px;border: solid red;" id="top">
    <a href="#footer">到底部</a>
    <a href="#zhong">到中间</a>

</header>
<section style="height: 800px;border: solid red;" id="zhong">
    <a href="#top">到顶部</a>
    <a href="#footer">到底部</a>
</section>
<footer style="height: 800px;border: solid red;" id="footer">
    <a href="#top">到顶部</a>
    <a href="#zhong">到中间</a>
</footer>
</body>
</html>

在这里插入图片描述