重生之我是前端小白（之路径与表格表单）-优快云博客

文章介绍了Web开发中的文件路径概念，包括绝对路径和相对路径的差异及其在HTML中的应用。同时，详细讲解了HTML表格的基本结构，如caption,thead,tbody,tfoot等标签，以及如何使用rowspan和colspan进行单元格合并。此外，还讨论了HTML表单的用途，列举了不同类型的表单控件，如text,password,checkbox,submit等，并展示了简单的登录表单示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一世，我的亲人离我而去，这一世，我要把我失去的都拿回来！学习完这个知识聆听我的复仇…

4.相对路径和绝对路径

绝对路径就像是门牌号一样，永远不会变的，不会因为你坐在的位置改变而进行改变。就像是一个找你家地址的例子，你可以通过户口本上面的户籍所在地查看你家的地址在哪个省，哪个市，哪个区…不论你现在在哪里，你的家永远在那里，并不会因为你的位置改变而改变。这就是绝对路径。

同理，在文件中可以这样理解在电脑中的文件的相对路径分两种：一种是从根目录开始写，一直写到文件所在的位置然后选中问价。另一种是在网上的文件的话（例如：图片的地址），就直接复制图片的链接就可以。这两种情况下，无论你写的网页储存在哪里，它里面的文件地址不会因为网页存放地址的改变而进行改变。

   <!-- 绝对路径 ，从根目录开始写，一直写到图片的位置 -->
    <img src=" D:\huashankeji\开课\html\images\01.jpg" alt="图片未加载"> 
     <!-- 绝对路径 ，直接写网站的图片的网址  企业中一般会用网路上的地址 -->
    <img src="https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">

相对路径就像是从你的位置去寻找家的位置，如果你和家庭地址没有在同一个省，首先要出这个省然后找到家庭地址所在省份，然后再往下面找。

就像是文件的位置，首先要跳出当前的文件夹，然后再去寻找目标文件的位置也就是代码中的…/意思为上级。

    <!-- 相对路径 ， html所在的文件夹与图片在同一文件夹内时 -->
    <img src="../01.jpg " alt=" ">

如果你的位置与家庭地址所在同一个省份，那么就直接从你所在的市直接寻找家庭住址即可。在文件中，就是直接写目标文件的名字即可。在代码中可以加一个./意思为当前。

<!-- 相对路径，html与图片在同一位置时 ./代表当前文件夹的位置 -->
    <img src="./01.jpg" alt="">

如果家庭住址跟你在同一个省同一个市，但你在市区，而家庭住址在市区下面的街道的话，就直接写街道名称然后寻找家庭住址。

在文件中，寻找目标文件所在的文件夹，然后寻找目标文件即可。

   <!-- 相对路径 ，html与图片所在文件夹在同一文件夹内时 -->
   <img src="images/01.jpg" alt=""> 
   #### 5.html表格标签

##### 1.表格结构

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：

除了标题标签，其余头部主体脚注标签可以省略不写

**`<caption>`**：用于定义表格标题。

**`<thead>`**：用于定义表格的头部。一般包含列名、行号等表头信息。

**`<tbody>`**：用于定义表格的主体。一般包含数据内容。

**`<tfoot>`**：用于定义表格的脚注。

定义行和列的标签：

**`<tr>`**：用于定义表格的一行。

**`<td>`**：用于定义表格的单元格。

**`<th>`**：用于定义表头单元格。

**重点**：合并单元格

跨行合并就是：rowspan   用法：rowspan:"2"就是合并两行后面的数字是几就是合并几行

跨列合并就是：colspan     用法：colspan:"2"就是合并两列后面的数字是几就是合并几列

实例：

```html
<table border="1px" cellpadding="5px" align="center" width="600px"  style="border-collapse: collapse;"> 
        <caption>
            <h2>商品信息表</h2>
            <p>制表日期：2023/07/13</p>
        </caption>
        <thead>
        <tr bgcolor="#92CDDB" >
            <th>ID</th>
            <th>品类</th>
            <th>品名</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td>1</td>
            <td rowspan="2">衣服</td>
            <td>冬装</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>夏装</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td rowspan="2">饮料</td>
            <td>可口可乐</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>4</td>
            <td>百事可乐</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td colspan="6" bgcolor="#FAEADB">以下为备用物品</td>
       </tr>
       <tr>
        <td>5</td>
        <td rowspan="2">数码</td>
        <td>相机</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>6</td>
        <td>镜头</td>
        <td>1</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="4">合计</td>
        <td bgcolor="#8FCADA">平均单价</td>
        <td bgcolor="#F8BF8A">金额合计</td>
    </tr>
    <tr>
        <td>100</td>
        <td>600</td>
    </tr>
    </tbody>
    </table>

显示效果如下：

在这里插入图片描述

这样，一个简单地表格就制作完成啦，快一起试一试吧！

2.表格属性

属性名	含义	常用属性值	默认值
border	表格的边框	px	0,默认是没有边框的
cellspacing	单元格与单元格之间的空白间距	px	2px
cellpadding	单元格内容与单元格边框之间的距离	px	1px
width	可以设置整个表格的宽度	px
height	可以设置整个表格的高度	px
align	可以设置表格里面照片或者文字的向左或者居中向右的效果	一般为center	left

6.html表单

1.表单的用途

HTML 表单用于收集用户的输入信息。

一个表单有三个基本组成部分：

表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。

表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框

和文件上传框等。

表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输

入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

简单的小案例：（我写的有点麻烦）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height:80px;
            font-size: 25px;
            overflow: hidden;
        }
        img{
            float: left;
        }
        span{
            float: left;
            margin-top: 38px;
        }
        .one{
            display: inline-block;
            height: 40px;
            width: 390px;
            margin-left: 35px;
            margin-top: 20px;
            padding-left: 10px;
            color: #DDDDDD;
            
        }
        .two{
            margin-left: 35px; 
            margin-top: 20px; 
        }
       .three{
            background-color: #3F89EC;
            color: white;
            height: 40px;
            width: 400px;
            border: 0;
            margin-left: 35px; 
            margin-top: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div >
    <img src="./baidu.png" alt="图片未加载" height="80px"  vertical-align="middle"> <span>·用户名密码登录</span> </div>
   
     <input type="text" placeholder="手机/邮箱/用户名" class="one"><br>
     <input type="password" placeholder="密码" class="one" ><br>
     <input type="checkbox" class="two" checked>下次自动登录<br>
     <input type="submit" value="登录"  class="three">


</body>
</html>

效果图如下：

在这里插入图片描述

控件名称	type属性值	描述
文本框	text(默认值)	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮。(性别等)
复选框（多选）	checkbox	定义复选框（爱好等）
提交按钮	submit	定义提交按钮。
重置按钮	reset	定义重置按钮（重置所有的表单值为默认值）。
图片提交按钮	image	定义图像作为提交按钮。
普通按钮	button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple”