表格内容写temple函数_第2章表格、表单和框架

最新推荐文章于 2022-08-17 15:15:00 发布
最新推荐文章于 2022-08-17 15:15:00 发布
阅读量239 收藏
点赞数
文章标签： 表格内容写temple函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35275073/article/details/112659244
版权

一、表格

一个完整的表格由一对<table>标签来定义。

每个表格均有若干个单元行（由一对<tr>标签定义）组成。

每个单元行由若干个单元格（由一对<td>标签定义）组成。

定义格式：

<table>
 <tr>
 <td>单元格内容</td>
 <td>单元格内容</td>
 …
 </tr>
 …
</table>

41b27354ab05b92a8b8278ca7a0c8153.png

表格任务1：补全代码，table1.html的显示结果如下图所示

table1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格使用示例1-规则表格</title>
</head>
<body>
<table border="1" align="center">
	<caption>学生信息表</caption>
	<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3" align="center">这里是表尾</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>0001</td>
			<td>王明明</td>
			<td>男</td>
		</tr>
		…
	</tbody>
</table>
</body>
</html>

e021a8be54927913385360cdf13f53b4.png

colspan指当前单元格水平方向跨越的单元格数，值为一正整数，代表此单元格水平延伸的单元格数，或跨越的列数。

rowspan指的是当前单元格垂直方向跨越的单元格，值为一正整数，代表此单元格垂直延伸的单元格数，或跨行数。

表格例题：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格使用示例3-不规则表格</title>
</head>
<body>
<table border="2" width="300" bordercolorlight="#FF9600"
	bordercolordark="#FF00EE" cellpadding="0" cellspacing="0">
	<tr>
		<td>1</td>
		<td rowspan="3">此单元格跨三行</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td colspan="2">此单元格跨两列</td>
	</tr>
</table>
</body>
</html>

table3.html的显示结果如图所示。

af9fdd35f7c26bb22c5e1c8daaf79947.png
  1. 二.表单

表单是一个容器，用来收集客户端要提交到服务器端的信息。

客户端将信息填写在表单中的控件中。当单击表单中的提交按钮时，表单中包含的控件的信息就会被提交给表单的action属性所指定的处理程序。

表单的使用非常广泛，是网页上用于输入信息的区域，例如向文本框中输入文字，在选项框里进行选择等。

在HTML中使用一对<form>标签来设计表单，其格式如下：

<form name=“…” action=“…” method=“post/get” target=“…” enctype=“…” onsubmit=“…” onreset=“…” accept=“…” accept-charset=“…”>

其中：

  • name 指的是表单的名字。
  • action 指的是处理表单或者接收表单信息的url。
  • method 指的是表单提交的方法，默认值为get。
  • target 指的是目标窗口。
  • enctype 属性可选，指的是提交数据的格式，可以指定客户端提交到服务器端的数据的编码类型。
  • onsubmit 指的是表单提交时调用的脚本语句或函数。
  • onreset 指的是表单重置时调用的脚本语句或函数。

（1）单行文本框

单行文本框指的是表单中可以输入一行文本的输入框，通过设置<input>标签的type属性为text来指定。其格式如下：

<input type=“text” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>

（2）密码框

密码框通过指定<input>标签的type属性值为password来实现。在密码框中输入字符时，显示的都是*或者实心圆点，密码框的用法和单行文本框的用法基本相同，其格式如下：

<input type=“password” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>

（3）提交按钮

提交按钮通过指定<input>标签的type属性值为submit来实现。单击了提交按钮后，提交按钮所在的表单的内容会被提交到表单标签中action属性所指的处理程序。提交按钮的使用格式如下：

<input type=“submit” value=“…”/>

其中，value指的是提交按钮上显示的提示文字，一般为“Submit”或者“提交”。

（4）重置按钮

重置按钮通过指定<input>标签的type属性值为reset来实现。当单击重置按钮时，重置按钮所在的表单中的所有控件的内容将会被清除，回到控件的默认的初始值，可以重新在控件中输入数据。重置按钮的使用格式如下：

<input type=“reset” value=“…”/>

其中，value指的是重置按钮上显示的提示文字，一般为“reset”或者“重置”。

（5）普通按钮

除了以上提交按钮和重置按钮之外，还可以使用普通按钮。通过设置<input>标签的type属性值为button来实现。在表单中使用普通按钮，必须使用onclick调用处理脚本或脚本函数，使用格式如下：

<input type=“button” name=“…” value=“…” onclick=“…” onfocus=“…”/>

其中：

name指的是普通按钮的名字；

value指的是普通按钮上的提示文字；

onclick指的是当单击普通按钮时执行的脚本语句或函数；

onfocus指的是当普通按钮获得焦点时执行的脚本语句或函数；

（6）单选按钮

单选按钮通过指定<input>标签的type属性值为radio实现，其格式如下：

<input type=“radio” name=“…” value=“…” onclick=“…” onfocus=“…” checked />

其中：

name指的是单选按钮的名称，多个单选按钮属于同一个选项组，必须具有相同的name值；

value指的是单选按钮的值；

checked属性项可选，如果单选按钮的默认状态为被选中，则将checked写在其属性列内；如果不将checked写在其属性列内，则单选按钮的默认状态为未选中；

onclick指的是当单击单选按钮时执行的脚本语句或脚本函数；

onfocus指的是当单选按钮获得焦点时执行的脚本语句或脚本函数；

（7）复选按钮

复选按钮通过指定<input>标签的type属性值为checkbox来实现。其使用格式如下：

<input type=“checkbox” name=“…” value=“…” onclick=“…” onfocus=“…” checked/>

复选按钮默认的选中状态也通过checked指定，多个复选按钮是否处于同一个选项组也通过name属性指定。其属性可参照单选按钮的属性说明。

表单例题

form1.html中的表单提交给form1_ok.jsp处理，form1_ok.jsp显示用户填写的信息。

form1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单使用示例1</title>
</head>
<body>
<form name="form1" action="form1_ok.jsp" method="post">
<table border="1" width="300" cellpadding="0" cellspacing="0">
	<tr>
		<td align="left">姓名</td>
		<td align="left"><input type="text" name="name" size="10" /></td>
	</tr>
	<tr>
		<td align="left">密码</td>
		<td align="left"><input type="password" name="password" size="10" /></td>
	</tr>
	<tr>
		<td align="left">性别</td>
		<td align="left"><input type="radio" name="gender" value="male"
			checked />男<input type="radio" name="gender" value="female" />女</td>
	</tr>
	<tr>
		<td align="left">爱好</td>
		<td align="left"><input type="checkbox" name="hobby"
			value="swimming" />游泳<br />
		<input type="checkbox" name="hobby" value="reading" />读书<br />
		<input type="checkbox" name="hobby" value="music" />音乐</td>
	</tr>
	<tr>
		<td align="center" colspan="2"><input type="submit" value="提交"/>&nbsp;&nbsp;<input type="reset" value="重置" /></td>
	</tr>
</table>
</form>
</body>
</html>

form1_ok.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单使用示例1-显示表单内控件的值</title>
</head>
<body>
<%
	String name = request.getParameter("name");
	String password = request.getParameter("password");
	String gender = request.getParameter("gender");
	String[] hobby = request.getParameterValues("hobby");
	out.print("name:" + name + "<br/>");
	out.print("password:" + password + "<br/>");
	out.print("gender:" + gender + "<br/>");
	if (hobby != null) {
		out.print("hobby:");
		for (int i = 0; i < hobby.length; i++) {
			out.print(hobby[i] + " ");
		}
	}
%>
</body>
</html>

69795b7e5bca8b6de23815dde0507215.png

三 框架

  • 使用框架可以将一个浏览器窗口划分成多个区域，每个区域就是一个框架，每个框架可以单独引用一个源文件，这样可以实现在一个浏览器窗口显示多个源文件。
  • 源文件之间是相互独立的，互不影响。
  • 当其中一个源文件的内容发生变化时，其它的源文件不受影响。
  • 多个框架看成一个整体称为框架集。
  • 利用框架集可以实现网页的布局。

在HTML中使用一对<frameset>标签来确定框架的划分，<frameset>标签可以嵌套使用。

具体的包含引用页的框架使用一对<frame>标签来实现。

利用<frameset>的rows属性可以将页面进行垂直划分，利用cols属性可以将页面进行水平划分，利用<frameset>标签的嵌套可以实现混合划分。

  • 在HTML中使用一对<frameset>标签来确定框架的划分，<frameset>标签可以嵌套使用。
  • 具体的包含引用页的框架使用一对<frame>标签来实现。
  • 利用<frameset>的rows属性可以将页面进行垂直划分，利用cols属性可以将页面进行水平划分，利用<frameset>标签的嵌套可以实现混合划分。

ec3bdb93ce0f254afd92550be283c699.png

例题：下面的实例为一个混合框架，先垂直划分，然后水平划分，当单击左侧框架的超级链接时，在右侧框架中显示资源文件。

frame.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <frameset rows="20%,*">
    <frame name="top" src="top.html"/>
    <frameset cols="40%,*">
      <frame name="left" src="left.html"/>
      <frame name="right" src="ch1.html"/>
    </frameset>
 </frameset>
</html>

top.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>top</title>
</head>
<body bgcolor="#FFBFFF">
 <h3 align="center">这是TOP</h3>
</body>
</html>

left.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>left</title>
</head>
<body bgcolor="#A3D1D1">
   <ul>
     <li><a href="ch1.html" target="right">第1章</a></li>
     <li><a href="ch2.html" target="right">第2章</a></li>
     <li><a href="ch3.html" target="right">第3章</a></li>
   </ul>
</body>
</html>

ch1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ch1</title>
</head>
<body bgcolor="#FFDCB9">
   <h3>这是第1章的内容</h3>
</body>
</html>

4c5f472ec3d408ccb959acc14cbe80a0.png
Fei Ding
关注
conference_poster_1.zip_Temple # 1_latex_poster_poster template
07-14
Poster Temple using Latex
表格标签
m0_57823924的博客
04-24 326
1. 创建表格 总结： 表格的主要目的是用来显示特殊数据的 一个完整的表格有表格标签(table)，行标签(tr)，单元格标签(td）组成，没有列的标签 <tr></tr>中只能嵌套<td></td> 类的单元格 <td></td>标签，他就像一个容器，可以容纳所有的元素 2. 表格属性 3. 表头单元格标签th 4. 表格标题caption 5. 合并单元格 5.1 合并...
JSP表单处理
weixin_30653097的博客
05-31 346
表单是个容器，用来收集客户端要提交服务器端的信息。当客户端将信息填写在表单的控件中，当单击表单的提交按钮时，表单中包含的空间的信息就会被提交给表单的action 属性指定的处理程序。 表单标签：<form name="……" action="post/get" target="……" enctype="……" onsubmit="……" onreset="……"...
C++ 函数模板
HK_117的博客
08-07 379
函数模板： 所谓函数模板就是调用一个通用函数，其类型和参数类型不具体指定，用一个虚拟类型表述 样例表示： #include&lt;iostream&gt; using namespace std; template &lt;class T&gt;  //通用调用函数定义 或者 template&lt;typename T&gt; T max(T a,T b,T c) {     i...
表格标签介绍
dfkjds的博客
08-25 4667
表格标签 < table > < /table> （声明表格标签） < tr > < /tr > （声明行） < td > < /td > （声明单元格） < th > < /th> （表头标签） border （显示表格框线） height （表格的高度） width （表格的宽度） caption （表格标题） cellpadding（单元格内容与单元格边框之间
layui根据条件显示列_templet渲染layui表格数据的三种方式
weixin_39530557的博客
12-19 2613
layui前端框架是我一直在使用，也很好用。今天记录一下，templet渲染layui表格数据的三种方式。第一种：直接渲染(对于表格数据样式要求不高)直接在动态表格字段声明，添加templet属性，在其后面加上简单html代码。({{d.name}}这个是layui内置的模板输出){ field: 'name',width: 180,align:"center",title: '用户名',temp...
Temple_Name_Mobile
02-17
5. `scripts`或`vendor`目录：可能包含第三方库或框架，如jQuery、Bootstrap等。 6. `README.md`或`README`：提供项目简介、安装指南和使用说明的文件。 为了使"Temple_Name_Mobile"在移动设备上正常运行，开发者...
AC_stm32_temple_keil_protues.zip
07-24
手册通常包括以下内容：处理器和内存、系统时钟和电源管理、GPIO（通用输入/输出）、定时器、串行通信接口如UART、SPI、I2C、ADC（模拟数字转换器）、DMA（直接存储器访问）、USB、CAN等。 其次，`stm32固件库说明`...
temple_1.0.8_8.apk.1
11-09
temple_1.0.8_8.apk.1
Temple_Run_2 v1.0.1破解版.apk.$p4p$
02-06
Temple_Run_2 v1.0.1原版.apk.$p4p$是破解版本
layui 表格内容写temple函数_layui表格-template模板的三种用法
weixin_39756895的博客
12-20 1828
问题情境：layui中将数据库数据通过layui table渲染到前端表格，非常简单，但是如果数据库存储的信息不能被直接展示，项目中该页面有好几个这样的字段，会员类型，支付类型，会员时长还有平台类型；例如数据库有一个类型字段：1和2,1表示钻石会员，2表示至尊会员，前端显然不能直接显示1和2，而是应该根据后端返回的数字进行判断，展示相应的内容。layui table的自定义模板功能能非常方便地解决...
layui 表格内容写temple函数_layui 表格内容显示更改
weixin_39571179的博客
12-20 184
在cole 中使用temple 属性进行修改例：table.render({elem: '#messageTable',id: 'search_table_mId',height: 500,url: '/manage/article/getMessageByType',where: {type:${type}},page: true,limit: 10,limits : [10],cols: [[...
表格(table)笔记-基础知识
m0_55879104的博客
04-25 699
表格的作用：   存在即是合理的。表格在现在还是一种较为常见的一种标签，但不是用来布局的。常见显示，表示表格式数据。    因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理虽然div布局也可以做到，但是总没有表格来得方便。 创建表格的基本的三对html标签：   一个完整的表格有表格标签(table)、行标签(tr)、单元格标签(td)组成，没有列的标签。   行标签tr中只能嵌套td类的单元格；   t
Vue组件table里面加入tr组件、ul单面加入li组件问题
CongJiYong的博客
03-11 1959
<body> <!-- table/tr/和ul/li组件中的小bug 使用is别名解决 就不会在多出标签，组件在标签外面 --> <div id="app"> <table> <!-- is不加： --> <tr is="row"></tr> </table> </div> </body> <script&gt.
表格内容写temple函数_EXCL公式入门（九）HYPERLINK超链接函数
weixin_39841717的博客
01-13 191
因为知本人学EXCL是随机性的，就是遇到需要解决的问题才去学，所以文章可能没有那么系统性，大家看的人自己择标题吧。因为工作需要，要把所有的EXCL表建立个目录方便查找，所以今天来学习一下EXCL里的HYPERLINK()函数。首先看一下这个函数的介绍这是一个创建快捷方式的函数，我们做目录的目的也就是想把我们写的标题链接到另一个表，其实也就是给另一个表创建一个快捷方式。再来看看这个函数的参数：1、 ...
数据存在性查询优化
『程序员·小李』的博客
09-17 233
我们确定数据是否存在的需求很是常见，常常通过以下方式进行判断： SELECT count(*) FROM table WHERE a = 1 AND b = 2 这会导致全表扫描。 当然，当数据不存在时，全表扫描是必须的，但如果数据存在多条，这种查询方式查询到数据后继续扫描全表，因此可以进行优化。 SELECT 1 FROM table WHERE a = 1 AND b = 2 LIMIT 1 当我们只需要判断存在性时候，只需要在最后加上limit 1因此，数据查到后直接返回，优化了存在多条
HTML的元素7
m0_65504942的博客
08-17 96
当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。caption为表格添加表的名字,用来制定表格的标题或者说明，是table的子元素，必须放在table中使用，Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理。caption为表格添加标题，用来制定表格的标题或者说明，是table的子元素，必须放在table中使用Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理。......
template<class T>
qingyangliuyang的专栏
12-03 2148
模板 使用中注意的问题 templateT>   (2011-10-03 17:38:57) T>" title="templateT>" style="margin:0px; padding:0px; border:0px; list-style:none; position:absolute; left:11px; top:4px">转载▼ 标签：   模板
23种设计模式 之 Temple模式（模板模式）[C语言实现]
编程语言小筑
11-14 709
一、概念定义 Temple模式：对于某一个业务逻辑（算法实现）在不同的对象中有不同的细节实现，但是逻辑（算法）的框架是一致的。Temple提供了一个实现框架。 二、模式结构图 图1 Temple模式结构图 三、场景设计 假如新生刚刚入校，这时班主任让每一位同学依次：站起来-&gt;自我介绍-&gt;坐下。 四、C语言实现 分析：可以认为“站起来-&gt;自我介绍-&gt;...
<temple>标签vue框架中写在哪
最新发布
06-07
在单文件组件中，模板通常写在 `<template>` 标签中，如下所示： ``` <h1>{{ message }} <button @click="increment">+1 export default { data() { return { message: 'Hello, Vue!', count: 0 } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值