web前端12--表单和表格

1、表格标签

使用`<table>`标签来定义表格

HTML 中的表格和Excel中的表格是类似的,都包括行、列、单元格、表头等元素。

区别:HTML表格在功能方面远没有Excel表格强大,HTML表格不支持排序、求和、方差等数学计算,主要用于布局和数据展示。

<table> 标记了表格的开始和接受 是所有表格相关元素的容器 
<tr> 表示表格中的单元格 每个tr代表表格中的一行
<td> 代表表格中的一个单元格 用来显示数据
<th> 表头单元格 加粗和居中 区别普通单元格
<thead> 用于组织表头内容 包含一个或多个tr 通常包含th
<tbody> 定义主体部分 包含多个tr
<tfoot> 定义表格的底部

语法:
border-spacing 相邻单元格的边框之间的距离
empty-cells 控制空的单元格的边框 hide隐藏 show显示
border-collapse 设置表格边框的折叠方式
- collapse 表格的边框表现出合并的单元格 相互融合 
减少边框的重复和叠加 让表格再视觉上显示更加的简洁

2、合并单元格 用于布局 

rowspan 合并行

colspan 合并列

//语法:
```css<td rowspan="2">坤坤</td>
```

3、表单

应用情景:

报考 网页收集信息 账号 密码
用到html表单 接收信息 发送到后端
后端 根据定义好的业务逻辑 处理表单

语法:

action 提交到哪个页面
method 什么方式进行提交 
- get  提交信息会被显示在页面的地址栏中 不安全
- post 敏感信息 建议post请求

<!-- 例如 登录 注册 数据库数据 进行匹配 -->
```html<form action=""></form>
```

4、input

1、 type
text 文本框
password 密码框
submit 提交
radio单选框
checkbox 多选框

2、 name 设置控件名字 
3、 value 设置控件的值
4、 checked 默认
5、 placeholder 设置输入框的提示文本 
6、 autofocus 开始就聚焦

5、标签

//文本域
<textarea name="" id=""></textarea>
//下拉列表    
<select name="" id=""><option value="">熏鸡</option><!--option下拉列表选项  --><option value="">青团</option><option value="">奶皮子</option>
</select>

6、实例--登陆界面

 

 

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

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

相关文章

为何 git 默认是 master分支,而github默认是main分支(DeepSeek问答)

为何 git 默认是 master分支&#xff0c;而github默认是main分支 Git 和 GitHub 在默认分支名称上的差异源于历史背景和社会因素的变化。 Git 的 master 分支 历史原因&#xff1a;Git 由 Linus Torvalds 于 2005 年创建&#xff0c;最初使用 master 作为默认分支名称&#x…

【AI】探索自然语言处理(NLP):从基础到前沿技术及代码实践

Hi &#xff01; 云边有个稻草人-CSDN博客 必须有为成功付出代价的决心&#xff0c;然后想办法付出这个代价。 目录 引言 1. 什么是自然语言处理&#xff08;NLP&#xff09;&#xff1f; 2. NLP的基础技术 2.1 词袋模型&#xff08;Bag-of-Words&#xff0c;BoW&#xff…

Java集合+并发(部分)

Java集合 Java集合类的继承结构和各自的适用情况 Collection ​ — List ​ — ArrayList&#xff1a;动态数组 ​ — LinkedList&#xff1a;底层是双向链表&#xff0c;应用于Queue接口可以用于实现队列&#xff0c;应用于Deque接口可以用于实现栈 ​ — Vector&#x…

第1章 量子暗网中的血色黎明

月球暗面的危机与阴谋 量子隧穿效应催生的幽蓝电弧&#xff0c;于环形山表面肆意跳跃&#xff0c;仿若无数奋力挣扎的机械蠕虫&#xff0c;将月球暗面的死寂打破&#xff0c;徒增几分诡异。艾丽伫立在被遗弃的“广寒宫”量子基站顶端&#xff0c;机械义眼之中&#xff0c;倒映着…

AI-ISP论文Learning to See in the Dark解读

论文地址&#xff1a;Learning to See in the Dark 图1. 利用卷积网络进行极微光成像。黑暗的室内环境。相机处的照度小于0.1勒克斯。索尼α7S II传感器曝光时间为1/30秒。(a) 相机在ISO 8000下拍摄的图像。(b) 相机在ISO 409600下拍摄的图像。该图像存在噪点和色彩偏差。©…

Python3 【高阶函数】项目实战:5 个学习案例

Python3 【高阶函数】项目实战&#xff1a;5 个学习案例 本文包含 5 个关于“高阶函数”的综合应用项目&#xff0c;每个项目都包含完整的程序代码、测试案例和执行结果。具体项目是&#xff1a; 成绩统计分析单词统计工具简易计算器工厂任务调度器数据管道处理 项目 1&#…

【Git】初识Git Git基本操作详解

文章目录 学习目标Ⅰ. 初始 Git&#x1f4a5;注意事项 Ⅱ. Git 安装Linux-centos安装Git Ⅲ. Git基本操作一、创建git本地仓库 -- git init二、配置 Git -- git config三、认识工作区、暂存区、版本库① 工作区② 暂存区③ 版本库④ 三者的关系 四、添加、提交更改、查看提交日…

RK3568使用QT操作LED灯

文章目录 一、QT中操作硬件设备思路Linux 中的设备文件操作硬件设备的思路1. 打开设备文件2. 写入数据到设备3. 从设备读取数据4. 设备控制5. 异常处理在 Qt 中操作设备的典型步骤实际应用中的例子:控制 LED总结二、QT实战操作LED灯设备1. `mainwindow.h` 头文件2. `mainwindo…

分布式微服务系统架构第90集:现代化金融核心系统

#1.1 深化数字化转型&#xff0c;核心面临新挑战 1、架构侧&#xff1a;无法敏捷协同数字金融经营模式转型。 2、需求侧&#xff1a;业务需求传导低效始终困扰金融机构。 3、开发侧&#xff1a;创新产品上市速度低于期望。 4、运维侧&#xff1a;传统面向资源型监控体系难以支撑…

使用 Spring JDBC 进行数据库操作:深入解析 JdbcTemplate

目录 1. Spring JDBC 简介 2. JdbcTemplate 介绍 3. 创建数据库和表 4. 配置 Spring JDBC 5. 创建实体类 6. 使用 JdbcTemplate 实现增、删、改、查操作 7. Spring JDBC 优点 8. 小结 1. Spring JDBC 简介 Spring JDBC 是 Spring 框架中的一个模块&#xff0c;旨在简化…

BUUCTF [Black Watch 入群题]PWN1 题解

1.下载文件 exeinfo checksec 32位 IDA32 看到关键函数 read两次 第一次read的变量s在bss段&#xff1b;第二次的buf到ebp距离为 24 但是第二次的read字节只能刚好填满返回地址 传不进去变量 所以想到栈迁移 将栈移动到变量s所在位置上来 同时 这题开了NX 无直接的binsh和s…

CentOS 上安装 Go (Golang)

1. 检查系统环境 确保系统为 CentOS 7 或 CentOS 8&#xff0c;或者其他兼容的 Linux 发行版。 cat /etc/os-release2. 安装依赖 安装一些必要的工具&#xff1a; sudo yum update -y sudo yum install -y wget tar3. 下载 Go 从 Go 官方下载页面获取适用于 Linux 的最新版…

chrome源码剖析—进程通信

Chrome 浏览器采用多进程架构&#xff08;multi-process architecture&#xff09;&#xff0c;这种架构使得每个浏览器标签、扩展、插件、GPU 渲染等都在独立的进程中运行。为了确保不同进程之间的高效通信&#xff0c;Chrome 使用 进程间通信&#xff08;IPC, Inter-Process …

Cubemx文件系统挂载多设备

cubumx版本&#xff1a;6.13.0 芯片&#xff1a;STM32F407VET6 在上一篇文章中介绍了Cubemx的FATFS和SD卡的配置&#xff0c;由于SD卡使用的是SDIO通讯&#xff0c;因此具体驱动不需要自己实现&#xff0c;Cubemx中就可以直接配置然后生成SDIO的驱动&#xff0c;并将SD卡驱动和…

java练习(2)

回文数&#xff08;题目来自力扣&#xff09; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整…

使用 Tauri 2 + Next.js 开发跨平台桌面应用实践:Singbox GUI 实践

Singbox GUI 实践 最近用 Tauri Next.js 做了个项目 - Singbox GUI&#xff0c;是个给 sing-box 用的图形界面工具。支持 Windows、Linux 和 macOS。作为第一次接触这两个框架的新手&#xff0c;感觉收获还蛮多的&#xff0c;今天来分享下开发过程中的一些经验~ 为啥要做这个…

ComfyUI安装调用DeepSeek——DeepSeek多模态之图形模型安装问题解决(ComfyUI-Janus-Pro)

ComfyUI 的 Janus-Pro 节点&#xff0c;一个统一的多模态理解和生成框架。 试用&#xff1a; https://huggingface.co/spaces/deepseek-ai/Janus-1.3B https://huggingface.co/spaces/deepseek-ai/Janus-Pro-7B https://huggingface.co/spaces/deepseek-ai/JanusFlow-1.3B 安装…

索引的底层数据结构、B+树的结构、为什么InnoDB使用B+树而不是B树呢

索引的底层数据结构 MySQL中常用的是Hash索引和B树索引 Hash索引&#xff1a;基于哈希表实现的&#xff0c;查找速度非常快&#xff0c;但是由于哈希表的特性&#xff0c;不支持范围查找和排序&#xff0c;在MySQL中支持的哈希索引是自适应的&#xff0c;不能手动创建 B树的…

RK3568中使用QT opencv(显示基础图像)

文章目录 一、查看对应的开发环境是否有opencv的库二、QT使用opencv一、查看对应的开发环境是否有opencv的库 在开发板中的/usr/lib目录下查看是否有opencv的库: 这里使用的是正点原子的ubuntu虚拟机,在他的虚拟机里面已经安装好了opencv的库。 二、QT使用opencv 在QT pr…

29.Word:公司本财年的年度报告【13】

目录 NO1.2.3.4 NO5.6.7​ NO8.9.10​ NO1.2.3.4 另存为F12&#xff1a;考生文件夹&#xff1a;Word.docx选中绿色标记的标题文本→样式对话框→单击右键→点击样式对话框→单击右键→修改→所有脚本→颜色/字体/名称→边框&#xff1a;0.5磅、黑色、单线条&#xff1a;点…