7.17 HTML(表格、表单)

标签: html  前端  小程序  表格  表单

 

表格

<table> 表格       <tr>  行     <td>  单元格

基本语法与结构

表格操作:添加、删除行与列。

通过增加、删除<tr></tr>   <td></td>。每行保持td数一样,否则缺失,后面向前提一个单元格。

带表头的表格

<th></th>   <!--表格头,内容居中、加粗显示-->,放在tr标签内。

<td></td>    普通单元格,不加粗,默认左对齐。

带标题的表格

<caption></caption>   <!--表格标题,居中显示-->

每个表格只能定义一个标题,紧随table后。

在html中,表格作为整体被解析,在全部被解析后才会显示出来,如果表格很长,完全加载下来时间会长。

可以使用表格结构标签划分表格结构。

建议三个标签同时存在,无论出现顺序如何改变,总是按表头、主体、脚注的顺序显示。

table表格属性:

其中frame属性的值:

rules属性的值:

tr标签属性:

bgcolor属性的值:

td和thbiao标签属性:

thead、tbody、tfoot标签属性:

跨列属性colspan、注意删除单元格。

跨行属性rowspan、注意删除单元格。

跨行、跨列要在跨的第一个单元格中设置,跨行、跨列后单元格数改变。

表格嵌套:

在表格中qia嵌入另一个表格:

  1. 嵌入完整表格结构
  2. 放到<td>标签中。

一个网页的实现不是唯一的。

注意:

1、尽量少的使用表格嵌套。

2、尽量少的使用表格跨行跨列。

表单

表单工作原理:

访问一个包含表单的页面,输入数据后“提交”表单——>浏览器将用户在表单中输入的数据进行打包bing并发送给服务器

——>webfuwu服务器——>服务器接受数据并转由程序处理。

语法:

<form>
    表单元素
</form>

表单本身不可见。

表单元素:

input

<input type="类型属性" name="名称" ……/>

为单标签,后面要/。

name 属性规定 input 元素的名称。
①name 属性用于对提交到服务器后的表单数据进行标识
②或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

表格中放置表单,table标签放在form标签里。

text单行文本域,属性:

password密码框,输入用“......”显示。

file文件域,让用户在内部填写的时候访问本机相关文件路径,上传服务器进行相应处理。不同浏览器waigu外观显示不一样。

radio单选框,注意:同一组name值要相同。默认选择:checked。当设置只能选择一个时,name值要设置相同。如果有文字的,点击文字触发radio按钮需要加for属性。

(器通过value值来确定选择的是哪个)

checkbox复选框,name值仍然最好相同,方便服务器确定是哪一组值。

image图像域,图像提交按钮。

<input  type="image"  name="..."  src="imageurl"  />

hidden隐藏域,内容不希望用户看到,但需要传递给服务器。

下拉菜单和列表标签

select标签属性:

设置muliple时,可使用ctrl选择多个。

option标签属性:

下拉菜单和列表项目分组标签

optgroup

文字域标签

textarea多行文本域

属性:

form标签属性:

action 传送给后台处理文件。

提交方式方式:get、post。默认get。

 get方式把biaod表单数据附加在action文件?后面,数据间&隔开。保密性较差、用于查询相关内容。

post方式隐藏表单数据,整体打包发送,保密性好。

 

 

 

 

版权声明:本文为htgt_tuntuntun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/htgt_tuntuntun/article/details/81077647

智能推荐

【c++】模板和模板类

C++是一种“强类型”语言。也就是说,对于一个变量,编译器必须确切知道它是什么类型。但是,这种强类型函数在实现一些简单函数反而更麻烦。例如:求两大数的较大者,应以Max( )函数,我们需要对不同数据类型分别定义不同重载版本来实现: 我们看到,虽然我们可以通过函数重载去实现,但明显存在一些缺点: 1、所有的函数除返回类型外,函数体都相同,代码复用率低; 2、只要新类型出现,我...

[java][事务]tcc事务实战学习过程

学习项目:https://github.com/14251104246/spring-cloud-rest-tcc 下载源码,进入源码目录运行:mvn clean package Docker Compose运行 docker-compose -f infrastructure-compose.yml up -d docker-compose -f basic-ms-compose.yml up ...

[学习记录,]Mybatis入门

环境: Eclipse 2019 Tomcat 9.0 jdk1.8 开搞 首先创建工程 结构如下 导入Jar包 可在mybatis官网下载 http://www.mybatis.cn/82.html 配置文件mybatis-config.xml 事务管理有两种:JDBC和MANAGED JDBC: MANAGED 数据源类型:UNPOOLED、POOLED、JNDI 创建实体类文件User.ja...

运用for语句来判断数组中值得大小

总结: 1将if语句与数组联合起来判断输入中各组中的最大最小值; 2注意:定义的数组数量是躲多少就要输入多少组数据,少输入就无法输出;...

Bridging signals

Bridging signals Time Limit: 1000MSMemory Limit: 10000K Total Submissions: 10926Accepted: 5982 Description 'Oh no, they've done it again', cries the chief designer at the Waferland chip factory. Once ...

猜你喜欢

一天一大 leet

一天一大 leet 题目(难度:困难): 示例 抛砖引玉 官方答案 高手在民间 菜鸡的自白 20200606 题目(难度:困难): 给定一个未排序的整数数组,找出最长连续序列的长度。 要求算法的时间复杂度为 O(n)。 示例 示例 抛砖引玉 要求算法的时间复杂度为 O(n),即限制了只能循环一次; 先对数组排序 循环数组记录后一个元素等于前一个元素+1或者等于前一个元素的数量 满足条件++,不然重...

Tensorflow实现的CNN文本分类

https://blog.csdn.net/somtian/article/details/69359498 原博文, github 在这篇文章中,我们将实现一个类似于Kim Yoon的卷积神经网络语句分类的模型。 本文提出的模型在一系列文本分类任务(如情感分析)中实现了良好的分类性能,并已成为新的文本分类架构的标准基准。 本文假设你已经熟悉了应用于NLP的卷积神经网络的基础知识。 如果没有,建议...

JDBC新手入门教程

开发工具:idea 数据库:mysql jar包:junit-4.10 mysql-connector-java-8.0.18 junit-4.10下载 mysql-connector-java-8.0.18下载 注意1:jdbc的驱动因为使用的是mysql-connector-java-8.0.18,所以为(“com.mysql.cj.jdbc.Driver”),而不是(...

Lua 排序 table.sort

    正如C#中有Array.Sort(),lua中也有自己的排序方法即table.sort(table,function)。     lua中的排序默认是从大到小的排序;     传入一个方法参数,可以使排序从小到大; 打印结果:  ...

SURF算法简述及Python标记SURF特征检测实践

目录 一、SURF算法 1.算法简介 2.SURF与SIFT的具体差异 二、Python代码实践 1.测试环境 2.测试代码 3.核心函数 4.测试结果 一、SURF算法 1.算法简介 SURF(Speeded-Up Robust Features)加速稳健特征,是一种稳健的局部特征点检测和描述算法。 SURF是对SIFT算法的改进,该算子在保持 SIFT 算子优良性能特点的基础上,同时解决了 S...