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 复制代码
//语法:
```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、实例--登陆界面

相关推荐
Yeats_Liao4 分钟前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术18 分钟前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
XiangrongZ36 分钟前
江协科技STM32课程笔记(五)— ADC模数转换器
笔记·科技·stm32
草莓熊Lotso1 小时前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
Olrookie1 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
请你喝好果汁6412 小时前
Conda_bashrc 初始化机制学习笔记
笔记·学习·conda
533_2 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6452 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
_李小白3 小时前
【Android Gradle学习笔记】第八天:NDK的使用
android·笔记·学习
莫的感情3 小时前
下载按钮点击一次却下载两个文件问题
前端