web前端12--表单和表格

embedded/2025/2/3 15:43:31/

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">//语法:
```css<td rowspan="2">坤坤</td>
```

3、表单

应用情景:

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

语法:

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

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

4、input

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

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

5、标签

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

6、实例--登陆界面

 

 


http://www.ppmy.cn/embedded/159212.html

相关文章

Flutter子页面向父组件传递数据方法

在 Flutter 中&#xff0c;如果父组件需要调用子组件的方法&#xff0c;可以通过以下几种方式实现。以下是常见的几种方法&#xff1a; 方法 1&#xff1a;使用 GlobalKey 和 State 调用子组件方法 这是最直接的方式&#xff0c;通过 GlobalKey 获取子组件的 State&#xff0c…

DeepSeek-R1 论文解读 —— 强化学习大语言模型新时代来临?

近年来&#xff0c;人工智能&#xff08;AI&#xff09;领域发展迅猛&#xff0c;大语言模型&#xff08;LLMs&#xff09;为通用人工智能&#xff08;AGI&#xff09;的发展开辟了道路。OpenAI 的 o1 模型表现非凡&#xff0c;它引入的创新性推理时缩放技术显著提升了推理能力…

(undone) MIT6.S081 2023 学习笔记 (Day7: LAB6 Multithreading)

网页&#xff1a;https://pdos.csail.mit.edu/6.S081/2023/labs/thread.html 任务1&#xff1a;Uthread: switching between threads (moderate) (doing) 在这个练习中&#xff0c;你将设计一个用户级线程系统中的上下文切换机制&#xff0c;并实现它。为了帮助你开始&#xf…

蓝桥杯之c++入门(四)【循环】

目录 前言6. while循环6.1 while语法形式6.2 执行流程6.3 实践6.4 练习练习1&#xff1a;反向输出每一位练习2&#xff1a;数位之和练习3&#xff1a;求和1练习4&#xff1a;含 k 个 3 的数练习5&#xff1a;角谷猜想练习6&#xff1a;计算多项式的值 7. for循环7.1 for循环语法…

mysql重学(一)mysql语句执行流程

思考 一条查询语句如何执行&#xff1f;mysql语句中若列不存在&#xff0c;则在哪个阶段报错一条更新语句如何执行&#xff1f;redolog和binlog的区别&#xff1f;为什么要引入WAL什么是Changbuf&#xff1f;如何工作写缓冲一定好吗&#xff1f;什么情况会引发刷脏页删除语句会…

Ubuntu下的Doxygen+VScode实现C/C++接口文档自动生成

Ubuntu下的DoxygenVScode实现C/C接口文档自动生成 Chapter1 Ubuntu下的DoxygenVScode实现C/C接口文档自动生成1、 Doxygen简介1. 安装Doxygen1&#xff09;方法一&#xff1a;2&#xff09;方法二&#xff1a;2. doxygen注释自动生成插件3. doxygen注释基本语法4. doxygen的生成…

飞桨PaddleNLP套件中使用DeepSeek r1大模型

安装飞桨PaddleNLP 首先安装最新的PaddleNLP3.0版本&#xff1a; pip install paddlenlp3.0.0b3 依赖库比较多&#xff0c;可能需要较长时间安装。 安装好后&#xff0c;看看版本&#xff1a; import paddlenlp paddlenlp.__version__ 输出&#xff1a; 3.0.0b3.post2025…

群晖NAS安卓Calibre 个人图书馆

docker 下载镜像johngong/calibre-web&#xff0c;安装之 我是本地的/docker/xxx/metadata目录 映射到 /usr/local/calibre-web/app/cps/metadata_provider CALIBREDB_OTHER_OPTION 删除 CALIBRE_SERVER_USER calibre_server_user 缺省用户名口令 admin admin123 另外有个N…