前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签

🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍
    

文章目录

        1.0 表格标签概述

        1.1 表格标签定义

        2.0 表单标签概述

        2.1 表单标签定义

        3.0 表单项标签概述

        3.1 表单项标签定义


        1.0 表格标签概述

        顾名思义,就是用来定义表格用的标签。在网页中以表格(行、列)形式整齐展示数据,如:班级表。

        1.1 表格标签定义

        <table>:定义表格整体,可以包裹多个 <tr> 

                        border:规定表格边框的宽度(如果没有这个属性,整体表格是不会显示边框)

                        width:规定表格的宽度(整体表格的宽度)

                        cellspacing:规定单元之间的空间(如果没有这个属性,默认单元之间是有空隙的)

        <tr>:表格的行,可以包裹多个 <td> 

        <td>:表格单元格(普通),可以包裹内容,如果是表头单元格,可以替换为 <th> 具有加粗居中的效果

代码如下:

<!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><table border="1px" cellspacing="0px" width="300px"><tr><th>学号</th><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>01</td><td>张三</td><td>男</td><td>计科</td></tr><tr><td>02</td><td>李四</td><td>男</td><td>美术</td></tr><tr><td>03</td><td>王五</td><td>女</td><td>体育</td></tr></table>
</body>
</html>

运行结果为:

        需要注意的是:若表格中的属性没有 border 时,整体表格都不会有边框,如:

        若表格中的属性没有 cellspacing 时,单元表之间默认是有间隙的,如:

        2.0 表单标签概述

        表单标签可能我们每天都会接触到,比如账号密码的登录。在网页中主要负责数据采集功能。

表单的结构形式:

        2.1 表单标签定义

        <form>:定义表单的整体

        action:规定当提交表单时向何处发送表单数据,URL 。如果不指定,默认提交到当前页面。

        method:规定用于发送表单数据的方式,GET、POST:

                get:在 url 后面拼接表单数据,url 长度有限制,默认值。

                post:在消息体(请求体)中传递的,参数大小无限制。

代码如下:

    <form action="" method="get">表单项1表单项2...</form>

        3.0 表单项标签概述

        表单项是组成表单的基本元素

表单项的结构:

        比如性别这项,是由表单项定义而来。

        3.1 表单项标签定义

        <input>:表单项,通过 type 属性控制输入形式

type 属性:

        <select>:定义下拉列表,<option> 定义列表项

        <textarea>:文本域,cols:指定一行多少个字符;rows:指定一共多少行。

代码如下:

<!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="post">姓名: <input type="text" name="username"><br><br>密码: <input type="password" name="pass"><br><br>性别: <label><input type="radio" name="gender" value="1">男</label><label><input type="radio" name="gender" value="2">女</label><br><br>爱好: <label><input type="checkbox" name="hobby" value="java">java</label><label><input type="checkbox" name="hobby" value="game">game</label><label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>图像: <input type="file" name="imag"><br><br>生日: <input type="date" name="birthday"><br><br>时间: <input type="time" name="t"><br><br>日期时间: <input type="datetime-local" name="localtime"><br><br>邮箱: <input type="email" name="email"><br><br>年龄: <input type="number" name="age"><br><br>学历: <select name="gender"><option value="0">--------请选择--------</option><option value="1">--------高中--------</option><br><option value="2">--------初中--------</option><br><option value="3">--------小学--------</option><br></select><br><br>描述: <textarea name="dis" cols="30" rows="10"></textarea><br><br><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body>
</html>

运行结果为:

        填完数据之后,查看数据提交的位置

所填写的数据:

由于 method = "post" ,那么数据会在消息体中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743022.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day38:安全开发-JavaEE应用SpringBoot框架MyBatis注入Thymeleaf模版注入

目录 SpringBoot-Web应用-路由响应 SpringBoot-数据库应用-Mybatis SpringBoot-模版引擎-Thymeleaf 思维导图 Java知识点 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方库使用等. 框架…

【JavaEE初阶 -- 多线程2】

这里写目录标题 1.线程安全1.1 什么是线程安全1.2 原子性1.3 线程不安全的原因1.4 通过synchronized进行加锁解决线程安全问题1.5 可重入锁1.6 死锁1.7 Java标准库中的线程安全类1.8 通过volatile关键字解决内存可见性引起的线程安全问题 2. wait 和notify2.1 wait() --使当前线…

【30天】Python从入门到精通详解版—第一天—Python 基础语法详细讲解-上

【30天】Python从入门到精通详解版—第一天—Python 基础语法详细讲解-上 Python变量Python数据类型数字类型&#xff08;Number&#xff09;字符串类型&#xff08;String&#xff09;列表类型&#xff08;List&#xff09;元组类型&#xff08;Tuple&#xff09;字典类型&…

数字华容道项目总结

目录 项目名称&#xff1a; 项目背景&#xff1a; 项目目标&#xff1a; 项目成果&#xff1a; 经验教训及学习&#xff1a; 未来优化&#xff1a; 项目名称&#xff1a; 数字华容道小游戏 项目背景&#xff1a; 在学习编程过程中&#xff0c;为了加强特性技术和对概念…

Text-to-SQL 工具Vanna进阶|数据库对话机器人的多轮对话

跟数据库对话机器人对话,我可不止一个问题。 可能基于第一句问话,还有第二句、第三句问话。。。第N句对话。所以本文测试了多轮对话功能。 单轮对话的环境搭建参考博客 Text-to-SQL 工具Vanna + MySQL本地部署 | 数据库对话机器人 我的数据是这样 1. 基础配置 import vann…

Hadoop基础架构及其特点解析

​一、Hadoop基础架构概述 Hadoop是一个由Apache基金会所开发的分布式系统基础架构&#xff0c;它利用集群的威力进行高速运算和存储。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。Hadoop不仅稳定可靠&#xff0c;而且具有强大的可伸缩性&#xff0c;…

Parade Series - WebRTC ( < 300 ms Low Latency )

Parade Series - FFMPEG (Stable X64) C:\Conda\parading-cam>ffmpeg -f dshow -i video"Surface Camera Front" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -an -rtsp_transport tcp -f rtsp://127.0.0.1:8554/cam0801

SCI 图像处理期刊

引用 一区 1. IEEE TRANSACTIONS ON PATTERN ANALYSIS AND MACHINE INTELLIGENCE 顶刊:是 出版商:IEEE 2. IEEE Transactions on Multimedia 顶刊:是 出版商:IEEE 3. Information Fusion 顶刊:是 出版商:ELSEVIER 4.IEEE TRANSACTIONS ON IMAGE PROCESSING 顶刊:是 出版商:I…

前端面试题 ===> 【Ajax、请求】

Ajax 面试题总结 1. 什么是Ajax&#xff0c;原理是什么&#xff1f; 定义&#xff1a; 在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式称为Ajax&#xff1b; XMLHttpRequest是Ajax的核心机制&#xff0c;他是IE5首先引入的&#xff0c;是一种支持异步请求的技术&…

ABB IORR2100-30拍合式接触器

ABB的IORR2100-30拍合式接触器是一款高性能的电气元件&#xff0c;主要用于控制和保护电路。这种接触器具有快速响应、高可靠性以及良好的耐久性等特点&#xff0c;广泛应用于工业自动化、电力系统和电机控制等领域。 拍合式接触器的设计使其能够在需要时迅速接通或断开电路。当…

45. 跳跃游戏 II(力扣LeetCode)

文章目录 45. 跳跃游戏 II贪心 45. 跳跃游戏 II 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j <…

《次神光之觉醒》游戏简单拆解

文章目录 一、 介绍二、 游戏拆解图三、 部分模块拆解1.主界面关卡制放置挂机2.养成升级战斗属性值角色养成装备养成技能养成天赋养成藏品养成契约养成宠物养成挖矿养成 3.副本4.任务5.pvppvp竞技场锦标赛黄金矿工锦标赛公会营地 6.社交游戏圈世界频道好友系统 一、 介绍 《次…

谈谈Darknet53为啥这么难训练

在我使用Imagenet2012对Darknet53进行预训练的时候&#xff0c;往往训练到一半&#xff0c;就会出现过拟合&#xff0c;导致无法继续向下训练&#xff0c;尝试了很多方法&#xff0c;最后发现问题出现在下图红框的部分。 得出这个结论是因为当我使用Resnet中&#xff0c;包含有…

Java集合基础知识总结(绝对经典)

List接口继承了Collection接口&#xff0c;定义一个允许重复项的有序集合。该接口不但能够对列表的一部分进行处理&#xff0c;还添加了面向位置的操作。 实际上有两种list&#xff1a;一种是基本的ArrayList&#xff0c;其优点在于随机访问元素&#xff0c;另一种是更强大的L…

利用HubSpot出海CRM和人工智能技术提升出海业务的效率和效果

在当今数字化时代&#xff0c;智能化营销已经成为企业获取客户和扩大市场份额的关键策略。特别是对于出海业务而言&#xff0c;利用智能化营销技术来应对不同文化、语言和市场的挑战&#xff0c;已经成为企业竞争的关键优势。今天运营坛将带领大家探讨如何利用HubSpot CRM和人工…

大模型在智能推荐系统中的应用与挑战

摘要&#xff1a; 本文将深入探讨大模型在智能推荐系统中的应用与挑战&#xff0c;并详细介绍实现智能推荐系统的关键步骤。文章结构将包括引言、基础知识回顾、核心组件、实现步骤、代码示例、技巧与实践、性能优化与测试、常见问题与解答、结论与展望以及附录。 引言&#…

技术方案|某工业集团PaaS容灾方案

在当今快速发展的数字化时代&#xff0c;业务的连续性和稳定性已成为企业核心竞争力的重要组成部分。然而&#xff0c;由于各种原因&#xff0c;企业常常面临着数据丢失、系统瘫痪等潜在风险。因此&#xff0c;制定一套科学、高效的容灾方案至关重要。本文将围绕某全球领先的工…

css实现梯形?

HTML: <div class"box"></div> CSS: .box{width:50px;height:0;border-bottom:50px solid pink;border-left:50px solid #fff;border-right:50px solid #fff; } 效果&#xff1a;

opencv dnn模块 示例(25) 目标检测 object_detection 之 yolov9

文章目录 1、YOLOv9 介绍2、测试2.1、官方Python测试2.1.1、正确的脚本2.2、Opencv dnn测试2.2.1、导出onnx模型2.2.2、c测试代码 2.3、测试统计 3、自定义数据及训练3.1、准备工作3.2、训练3.3、模型重参数化 1、YOLOv9 介绍 YOLOv9 是 YOLOv7 研究团队推出的最新目标检测网络…

22.4 docker

22.4 docker 1. docker简介2. docker架构3. 容器和仓库4. Docker安装:基于Linux5. docker容器生成与运行5.1 docker换源5.2 启动容器5.3 docker search6. docker基于redis演示6.1 run -i -t:终端运行redis容器(不推荐)6.2 访问docker正在运行容器6.3 -d:后台运行redis容器6.4 停…