Web前端---表格和表单

1.表格概述

表格标记:<table></table>

表格标题标记:<caption></caption>

表头:<th></th>------heading

行标记:<tr></tr>-----r是row

列标记:<td></td>-----d是data

2.表格的属性设置

align:表格相对于周围的元素的对齐方式

bgcolor:背景颜色

cellpadding:单元格的边缘和其周围内容的空白,单位是像素或者百分比;

cellspacing:单元格之间的空白;

frame:外侧的边框那个部分可见,取值是hsides就会让外侧边框的左右两边不显示;

                vsides:显示左右边框

                lhs:显示左边框

                rhs:显示右边框

rules:内侧的边框那个部分可见,取值是rows就会使的每一行没有分割线;

3.单元格的属性

rowspan  colspan分别表示跨行,跨列,包含在<td>标签里面;

align:单元格的内容水平对齐;

valign:单元格的内容垂直对齐;

4.表格的嵌套

一般选择在单元格里面嵌套表格

5.定义域和域标题

fieldset可以用来定义域;该标记没有属性,成对存在;

legend标记用来定义域标题,在fieldset标记的内部,具有align属性,属性值是left right center

6.表单信息的输入

表单里面输入信息的标记是input标记;

该标记是单个的标记,该标记的属性有name,type

type包括以下类型:

7.下拉列表

通常是使用select  optgroup  option3个标记实现下拉菜单和网页内容的分组展示;

select里面的size属性用来规定下拉列表里面可见选项的数目;

checked属性可以把复选框里面的单选按钮设置为默认预选状态;

selected属性可以把下拉列表里面的某一个选项设置为默认预选的状态。

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

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

相关文章

HQL,SQL刷题,尚硅谷

目录 相关表数据&#xff1a; ​编辑 题目及思路解析&#xff1a; 复杂查询&#xff0c;子查询 1、查询所有课程成绩均小于60分的学生的学号、姓名 2、查询没有学全所有课的学生的学号、姓名 3、查询出只选修了三门课程的全部学生的学号和姓名 总结归纳&#xff1a; 知识补充&a…

JavaWeb Tomcat启动、部署、配置、集成IDEA

web服务器软件 服务器是安装了服务器软件的计算机&#xff0c;在web服务器软件中&#xff0c;可以部署web项目&#xff0c;让用户通过浏览器来访问这些项目。 Web服务器是一个应用程序&#xff08;软件&#xff09;&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序…

【C语言】Leetcode 876. 链表的中间节点

主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《Leetcode》 题目 通过题目的要求可以判断出有两种示例要解决&#xff0c;一种是偶数节点的链表&#xff0c;一种是奇数节点的链表&#xff0c;应对这两种情况我们需要使程序对二者都可以兼容。 解决思路 struct ListNode…

吴恩达机器学习笔记:第5周-9 神经网络的学习2(Neural Networks: Learning)

目录 9.4 实现注意&#xff1a;展开参数9.5 梯度检验9.6 随机初始化9.7 综合起来9.8 自主驾驶 9.4 实现注意&#xff1a;展开参数 在上一段视频中&#xff0c;我们谈到了怎样使用反向传播算法计算代价函数的导数。在这段视频中&#xff0c;我想快速地向你介绍一个细节的实现过…

java八股文复习-----2024/03/03

1.接口和抽象类的区别 相似点&#xff1a; &#xff08;1&#xff09;接口和抽象类都不能被实例化 &#xff08;2&#xff09;实现接口或继承抽象类的普通子类都必须实现这些抽象方法 不同点&#xff1a; &#xff08;1&#xff09;抽象类可以包含普通方法和代码块&#x…

Socket网络编程(四)——点对点传输场景方案

目录 场景如何去获取到TCP的IP和Port&#xff1f;UDP的搜索IP地址、端口号方案UDP搜索取消实现相关的流程&#xff1a;代码实现逻辑服务端实现客户端实现UDP搜索代码执行结果 TCP点对点传输实现代码实现步骤点对点传输测试结果 源码下载 场景 在一个局域网当中&#xff0c;不知…

LabVIEW齿轮传动健康状态静电在线监测

LabVIEW齿轮传动健康状态静电在线监测 随着工业自动化的不断发展&#xff0c;齿轮传动作为最常见的机械传动方式之一&#xff0c;在各种机械设备中发挥着至关重要的作用。然而&#xff0c;齿轮在长期运行过程中易受到磨损、变形等因素影响&#xff0c;进而影响整个机械系统的稳…

BUUCTF------[HCTF 2018]WarmUp

开局一个表情&#xff0c;源代码发现source.php <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["source">"source.php","hint">"hint.php"];if (! isset($page) |…

Vue - 调用接口获取文件数据流并根据类型预览

Vue - 调用接口获取文件数据流并根据类型预览 一、接口返回的数据流格式二. 方法实现1. image 图片类型2. txt 文件类型3. pdf 文件类型 一、接口返回的数据流格式 二. 方法实现 1. image 图片类型 <img :src"imageUrl" alt"" srcset"" /&g…

uipath调用python代码获取网站验证码

用uipath自带的ocr读验证码不是很准确&#xff0c;选择调用python读验证码&#xff0c;需要导入ddddocr&#xff08;3.8以下版本支持ddddocr&#xff09; 用uipath程序将验证码图片保存到本地&#xff08;也可以直接用python处理图片&#xff0c;保存到本地比较简单&#xff0…

XUbuntu22.04之报错:No module named lsb_release(二百一十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

解决uni-app中使用webview键盘弹起遮挡input输入框问题

这个平平无奇的回答&#xff0c;可能是全网最靠谱的解决方案。 这里我用的是vue3 setup .vue文件的方式 <view> <web-view :fullscreen"false" :webview-styles"{top: statusBarHeight40,height:height,progress: {color: green,height:1px } }"…

VUE3项目学习系列--element-plus集成(三)

1、安装依赖 Element-plus官网&#xff1a;快速开始 | Element Plus (element-plus.org) pnpm i element-plus 在项目main.ts中引入element-plus: import { createApp } from "vue"; import App from "./App.vue"; // 从Element官网上参考&#xff0c;…

mTLS: openssl创建CA证书

证书可以通过openssl或者keytool创建&#xff0c;在本篇文章中&#xff0c;只介绍openssl。 openssl 生成证书 申请操作流程 生成ca证书私钥, 文件名&#xff1a;ca.key生成ca证书&#xff0c;文件名&#xff1a;ca.crt生成Server/Client 证书私钥&#xff0c;文件名&#x…

Windows Docker 部署 Redis

部署 Redis 打开 Docker Desktop&#xff0c;切换到 Linux 内核。然后在 PowerShell 执行下面命令&#xff0c;即可启动一个 redis 服务。这里安装的是 7.2.4 版本&#xff0c;如果需要安装其他或者最新版本&#xff0c;可以到 Docker Hub 中进行查找。 docker run -d --nam…

【深度学习】脑部MRI图像分割

案例4&#xff1a;脑部MRI图像分割 相关知识点&#xff1a;语义分割、医学图像处理&#xff08;skimage, medpy&#xff09;、可视化&#xff08;matplotlib&#xff09; 1 任务目标 1.1 任务简介 本次案例将使用深度学习技术来完成脑部MRI(磁共振)图像分割任务&#xff0c…

Vue3学习记录(三)--- 组合式API之生命周期和模板引用

一、生命周期 1、简介 ​ 生命周期&#xff0c;指的是一个 Vue 实例从创建到销毁的完整阶段&#xff0c;强调的是一个时间段。 ​ 生命周期钩子函数&#xff0c;指的是 Vue 实例提供的内置函数&#xff0c;函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定…

快速上手:在 Android 设备上运行 Pipy

Pipy 作为一个高性能、低资源消耗的可编程代理&#xff0c;通过支持多种计算架构和操作系统&#xff0c;Pipy 确保了它的通用性和灵活性&#xff0c;能够适应不同的部署环境&#xff0c;包括但不限于云环境、边缘计算以及物联网场景。它能够在 X86、ARM64、海光、龙芯、RISC-V …

VR 全景模式OpenGL原理

VR 全景模式OpenGL原理 VR 全景模式原理 VR 全景模式原理将画面渲染到球面上&#xff0c;相当于从球心去观察内部球面&#xff0c;观察到的画面 360 度无死角&#xff0c;与普通播平面渲染的本质区别在渲染图像部分&#xff0c;画面渲染到一个矩形平面上&#xff0c;而全景需…

【代码随想录算法训练营Day34】860.柠檬水找零;406.根据身高重建队列;452.用最少数量的箭引爆气球

❇️Day 34 第八章 贪心算法 part04 ✴️今日任务 860.柠檬水找零406.根据身高重建队列452.用最少数量的箭引爆气球 ❇️860.柠檬水找零 本题看上好像挺难&#xff0c;其实挺简单的&#xff0c;大家先尝试自己做一做。题目链接&#xff1a;https://leetcode.cn/problems/lem…