【第二章】HTML2——表格、表单标签

神明不懂浪漫2026-06-10 9:07

HTML2

上一篇文章介绍了HTML语言的基本内容，但是本篇我们就从表格与表单入手，继续讲解HTML。

表格标签

表格标签也是我们基本经常使用的一种标签，而且表格标签的基本标签也有以下几种：

基本标签

  • table：表示整个表格
  • tr：表示表格的一行
  • td：表示行内的一个单元格，与tr搭配表示
  • th：表示表头单元格，会居中加粗
  • thead：表格的头部区域(注意和 th 区分, 范围是比 th 要大的)，存储表格的表头信息，所得到的内容会居中加粗
  • tbody: 表格得到主体区域，表格内容的主要内容放在这里面
    table 包含 tr , tr 包含 td 或者 th。
html 复制代码 
<!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>
    <table border="1" cellspacing="2" cellpadding="500px" cellspacing="400px">
        <tr>
            <td>春天来了</td>
            <td>花开了</td>
            <td>虫子</td>
            <td>鸟</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

但是除了上述标签，还有一些标签是VScode所不能展示出来的，这是在历史上早已经遗弃的属性。就是类似于boarding，padding之类的标签，我们通常会在CSS当中使用，在后面CSS章节中还会提到。

对于一些需要进行列和行的合并的操作，我们会使用到span这个关键字。

如果需要进行行合并的话，就是需要使用到rowsapn

反之，对应列合并的就会使用的到colspan。

html 复制代码 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单元格合并和表格嵌套</title>
</head>
<!--
      1.演示跨列合并
      2.演示跨行合并
      3.演示单元格里再嵌套表格
-->

<body>
  <table  border="3" align="center" width="600">
    <caption>课程表</caption>
    <thead>
      <tr >
        <th>节次</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
      </tr>
    </thead>
    <tbody >
      <!-- 第一行 -->
      <tr >
        <td>1-2节</td>
        <td rowspan="2">语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td rowspan="2" colspan="2">
          <!-- 表格嵌套 -->
          <table border="1" width="100">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td>3-4节</td>
        <!-- <td >语文</td>  被上一行跨行合并的列不再需要td标记 -->
        <td>音乐</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
      </tr>
      
      <!-- 第三行 -->
      <tr>
        <td height="30" colspan="8" align="center">午休</td>
      </tr>
      <tr>
        <td>5-6节</td>
        <!--<td >语文</td>-->
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <!--<td></td>
        <td></td>  -->
      </tr>
      <!-- 第四行 -->
      <tr>
        <td>7-8节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    <!-- 第五行 -->
    <tfoot>
      <tr>
        <td colspan="8">晚自习</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

一些其他的标签：

border-collapse：这个标签通常会使用在进行边框合并的场景当中，这个需要注意。

capation：这个是表格的题目。

html 复制代码 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title >表格标签</title>
</head>

<body>
  <!-- 表格基础标签 table、tr、td -->
  <!-- 表格的标题标签caption -->
  <!--表格的表头标签th，该标记中的内容默认加粗且居中-->
  <!--1. thead标记 -->
  <!--2. tbody标记 -->
  <!--3. tfoot标记 -->
  <!-- <table border="1" width="600" height="300" cellspacing="0" cellpadding="10"> -->
  <!-- <table border="1" width="600" height="300"> -->
  <table>
    <!-- 表格标题  -->
    <caption><h2>课程表</h2></caption>
    <thead>
      <tr >
        <th>节次</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1-2节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>3-4节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>5-6节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>7-8节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>9-10节</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>底部</td>
        <td>底部</td>
        <td>底部</td>
        <td>底部</td>
        <td>底部</td>
        <td>底部</td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

上面就是所说的列表的标签，大致就是

列表标签

对于表格我们介绍完以后，还有列表标签。

对于列表而言 ，分为无序列表，有序列表

无序列表

无序列表的标签是<ul>和<li>

而<ul>是在<li>外面进行使用的，<li>标签里面就可以表示我们所使用的内容

接下来是一个示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试1</title>
</head>
<body>
        <ul>
            <li>苹果1</li>
            <li>桃子1</li>
            <li>猕猴桃</li>
        </ul>
</body>
</html>

打开后可以看见浏览器默认的展示方式是一个实心圆

我们可以通过在ul当中使用type标签指示，square是一个实心正方形，而circle是空心圆，disc就是默认的实心圆。

有序列表

有序列表和无序列表不同的地方在于它是有序号的

无序列表的标签是<ol>和<li>

接下来是一个示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
<p align="center">这是一个有序列表</p>
    <ol>
        <li>水杯</li>
        <li>台灯</li>
    </ol>
</body>
</html>

这里虽然p标签里面的align已经废弃，但是依然可以使用。

同理，我们也可以使用type属性改变其前面的序号来改变其所显示的内容，内容改变有以下几种规则：

A 表示大写英文字母的编号

i 表示小写罗马数字的编号

1 表示数字编号（默认）

序号会自动生成，不需要我们进行指定。

还有start标签，这可以指定序号开始的位置，常常使用罗马数字进行操作。可以指定开始位置，这里是展示示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
<p align="center">这是一个有序列表</p>
<ol type="1" start="3">
    <li>水杯</li>
    <li>台灯</li>
</ol>
</body>
</html>

自定义列表

自定义列表是一种

自定义列表的标签是<dl> <dt> <dd>三种类型

<dl>是作为开始的标题的，而且是整个列表的开始部分

<dt>就是列表的部分，里面嵌套<dd>作为列表的内容的，下面是一个示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是自定义列表</title>
</head>
<body>
        <p>
            这是自定义列表
        </p>
        <dl>自定义列表题目
        <dt>家具</dt>
        <dd>沙发</dd>
        <dd>台灯</dd>
        <dd>椅子</dd>
        </dl>
</body>
</html>

到这里，常用的列表的标签都已经介绍完毕，那么接下来介绍表单相关的知识

表单标签

表单是让用户输入信息的重要途径。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.

表单控件: 输入框, 提交按钮等. 重点是 input 标签

通常在from里面使用action标签可以指定服务器地址从而和服务器产生交互。这里由于没有部署服务器，我们使用'#'进行替代，默认是一个空链接。

表单控件常常是和表单域进行协调使用的，它涉及的标签很多，最常用的就是input标签。

input

这个标签是让用户进行输入的，在这个标签里面还可以指定输入的类型。

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.。

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等，默认就是单行输入

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。

value: input 中的默认值，就是在不输入时给的值。

html 复制代码 
<form action="test.html">
   ... [form 的内容]
</form>

checked: 默认被选中。(用于单选按钮和多选按钮)

maxlength: 设定最大长度。

type

type里面有非常多的标签，有必要拿出来好好说一下，接下来就说一下：

  • button在英文中的意思是"按钮"的意思，就是一个普通的按钮，需要value标签在按钮内进行提示，但是点击按钮没有什么效果，需要搭配js进行使用。
  • radio也是一种type标签，可以实现单选效果，但是单有radio不够，我们还可以使用相同的name标签，这样就可以实现单选效果了，还有checked标签可以实现默认的值，但是只能写一个，如果写多个需要浏览器自己确认。
  • checkbox代表复选框，也就是多选，但是记住，每一个选项都需要一个复选框，都需要写一次。
  • passord就是密码框，用来填写密码，默认密码屏蔽。
  • submit是提交按钮，用来将用户在前端填写的数据提交到服务器上验证，使用后就会有一个提交按钮
  • reset是清空按钮，用于清空框里面的内容
  • file就是提交文件的标签，用于提交文件
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--同一个页面上可以有多个表单，为了区分，可以给表单起名字，写在form标签的name属性值中-->
<form action="#" method="get"name="form1">
<!--text单行文本输入框-->
用户名：<input type="text"value="张三"name="username"maxlength="4"size="30"/><br/>
密码：
<input type="password" name="psd"minlength="6"size="20"/><br/><!--password密码输入框-->
性别：<input type="radio"value="男"/>男
<input type="radio"name="gender"value="女"/>女<br/>
<!--radio单选按钮，同一组单选按钮的input控件的name属性值必须相等-->
兴趣：
<input type="checkbox" name="aihao" checked="checked" value="唱歌"/>唱歌
<input type="checkbox"name="aihao"  value="跳舞"/>跳舞
<input type="checkbox" name="aihao"value="游泳" checked/>游泳<br/><!--checkbox复选框，同一组复选按钮的input控件的name属性值必须相等-->
上传头像：
<input type="file"/><br/><!--file文件域，用于上传文件-->
<input type="submit"value="提交"/><!--submit提交按钮，用于提交表单-->
<imput type="reset"value="重置"/><!--reset重置按钮，用于重置表单-->
<input type="button" value="普通按钮" />
<br>
<input type="image"src="images/login.gif"/><!--image图像域，使用图片做按钮-->
</form>
<!--此控件在form标签之外，但是它的form属性值是form1，所以它也属于form1表单-->
<input type="text"name="last_name"form="form1"/><br/>
请输入您的邮箱：<input type="email" name="formmail" /><br>
        请输入个人网址：<input type="url" name="userurl"/><br>
        请输入手机号码：<input type="tel" name="telephone" pattern="^[1][0-9]{10}$" /><br>
        请输入数值：<input type="number" name="number1" value="1" max="50" min="0" step="5" /><br>
        请选取一种颜色：<input type="color"name="color1"/><input type="color"name="color2"value="#FF3E96"/><br/>
        滑块：<input type="range"name="number1"value="1"min="1"max="20"step="5"/><br/>
        <input type="submit"value="提交"/>
</body>

</html>

lable标签

让选择时文字与按钮产生联系，使用一个for属性就可以把当前包裹的内容与元素产生关联，使用id就可以产生关联：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
<!--该表单中的input控件元素没有和label标签绑定，必须单击input控件，表单元素才能获取焦点-->
男：<input type="radio"name="sex"/>
女:<input type="radio"name="sex"/><br/>
</form>
<form>
<!--1abe1标签的作用，点击labe1标签时，相关的表单元素会自动获得焦点或被选中，使用户更容易理解和操作表单元素-->
<!--将标签提示文字包裹在label标签中，并设置label标签的for属性和绑定的input控件的id属性值相同即可-->
<label for="male">男</label>
<input type="radio"name="sex"id="male"/>
<label for="female">女</label>
<input type="radio"name="sex"id="female"/>
</form>

</body>
</html>

datalist标签

datalist的标签是在为输入栏中提供输入的选项，除了提供的输入选项，我们同样也可以自行输入，但是输入的datalist id是可以进行相同的属性进行绑定。只有被同一个属性进行绑定的数据才可以在同一个列表中显示。这不仅可以显示一些文字信息，也可以显示网址。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="get">
请输入用户名：<input type="text" list="namelist" name="username" autocomplete="off"/>
<datalist id="namelist">
<option>张三</option>
<option>李四</option>
<option>王好</option>
</datalist>
<input type="submit" value="提交"/>
</form>
<form action="#" method="get">
请输入网址：<input type="url" list="urllist" name="weburl"/>
<datalist id="urllist">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<option label="传智" value="http://www.itcast.cn/"></option>
</datalist>
<input type="submit" value="提交"/>
</form>

</body>
</html>

select标签

这里的select标签就可以产生选择，一般表示给出一些值供用户选择，通常与option标签进行一起的使用，可以避免用户输入非法的数据，也表示了众多的可选项。

selected属性是用来表示默认选中的选项，也可以防止用户忘记选择

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select控件</title>
</head>
<body>
    <form action="#"method="get">
所在地区：（单选）<br/>
<!--最基本的下拉菜单-->
<select name="select1">
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>武汉</option>
<option>成都</option>
</select><br/><br/>
特长（单选）：<br/>
<select name="select2">
<option>唱歌</option>
<option selected>画画</option>
<!--设置默认选中项-->
<option>跳舞</option>
</select><br/><br/>
爱好（多选）：<br/>
<select multiple="multiple"size="6"name="select3">
<!--设置多选和可见选项数-->
<option>读书</option>
<option selected>写代码</option><!--设置默认选中项-->
<option>旅行</option>
<option selected>听音乐</option><!--设置默认选中项-->
<option>踢球</option>
<option>踢球</option>
<option>踢球</option>
</select><br/><br/>
<input type="submit"value="提交"/>
</form>

</body>
</html>

optgroup标签

这个标签的作用与上面的datalist标签有相似点，但是不同点在于这个属性可以对于选项进行分组操作，让使用者可以更加直观的看见所需要选取的属性。

可以用label标签进行选项的绑定。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#"method="get">
    城区：<br/>
    <select name="selectl">
    <optgroup label="北京">
    <option>东城区</option>
    <option>西城区</option>
    <opt1on>朝日区</option>
    <option>海定区</option>
    </optgroup>
    <optgroup label="上海">
    <option>浦东新区</option>
    <option>徐汇区</option>
    <option>虹口区</option>
    </optgroup>
    </select>
    <input type="submit">
    </form>

</body>
</html>

textarea标签

表示页面展示的可以进行多行输入的标签，常常用于个人简介，通过rows和cols来设置对应的文本标签的高度和宽度，在竖直超出后会有滚轮显示。但一般我们会在CSS当中使用到，这里不再过多阐述.

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea控件</title>
</head>
<body>
    <form action="#"method="get">
    评论：<br />
    <textarea name="pinglun">
    </textarea>
    <input type="submit">
    </form>

</body>
</html>

无语义标签

以前标题和段落等等可以通过一些标签来表示，但是无语义标签没有固定的用途。

我们可以使用这个标签进行一些页面的布局设计与操作。无语义标签有两种，一个是div，另一个是span

div标签独占一行，是一个大盒子。里面可以嵌套span这个小盒子，还可以嵌套自己。

span标签并不是独占一行的，是一个小盒子，下面是案例：

html 复制代码 
<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

好的，那么在这里HTML的基础介绍就已经基本结束了。我们介绍了常用的标签，而在下一章，我们会为大家介绍CSS3，从CSS开始就是正式进入了对于网页的装饰，也是前端开发的第二个工具。喜欢的朋友记得给个三连哟，我们下一章不见不散~

相关推荐
辰海Coding1 小时前
MiniSpring框架学习笔记-JDBC 访问框架：如何抽取 JDBC 模板并隔离数据库？
java·数据库·笔记·学习·spring
芯片智造1 小时前
设备卖进晶圆厂，只是商业模式的开始
经验分享
十月的皮皮1 小时前
C语言学习笔记20260609-字符串反转两种实现方法
c语言·笔记·学习
吴梓穆1 小时前
UE5 C++ 注册 开始重叠和结束重叠事件
开发语言·c++·ue5
雨翼轻尘1 小时前
01_HTML基本结构
前端·html·基本结构
AI玫瑰助手2 小时前
Python函数：内置函数（len/max/min/sorted等）详解
android·开发语言·python
时代文章2 小时前
GPT-SoVITS 模型测试笔记
笔记·gpt·语音识别
木头羊oll2 小时前
Uniapp 与 H5 在 App 端的交互
前端·javascript·html
咸鱼翻身小阿橙2 小时前
C# WinForms 控件学习项目
开发语言·学习·c#
热门推荐
01【AI】2026 年具身智能模型和世界模型总结02GitHub 镜像站点032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06AI科技热点日报 | 2026年6月1日07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08《置身钉内》原文-可播放阅读09CC-Switch 下载、安装与使用配置指南【2026.5.29】10Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试