表格布局与表单交互的习题

伏飞而行

于 2024-09-30 23:45:53 发布

阅读量264

点赞数 6

分类专栏：网页设计文章标签：交互 html 前端

本文链接：https://blog.csdn.net/2303_81737387/article/details/142645004

版权

网页设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

题目一

设计“CASIO计算机” 外观，其效果如下

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算机布局</title>
		
	</head>
	<body>
		<table align="center" width="500" border="4" bordercolor="#000000">
			<tr>
				<td bgcolor="#808080"><img src="img/CASIO.bmp"/></td>
			</tr>
				<tr>
				<td height="100px" ></td>
				</tr>
					<table align="center" width="500" border="4" bordercolor="#000000" cellpadding="9px" cellspacing="24px" bgcolor="#808080" >
						<tr>
							<td align="center">1</td>
							<td align="center">2</td>
							<td align="center">3</td>
							<td align="center">+</td>
						</tr>
						<tr>
							<td align="center">4</td>
							<td align="center">5</td>
							<td align="center">6</td>
							<td align="center">-</td>
						</tr>
						<tr>
							<td align="center">7</td>
							<td align="center">8</td>
							<td align="center">9</td>
							<td align="center">*</td>
						</tr>
						<tr>
							<td align="center">0</td>
							<td align="center">=</td>
							<td align="center">CE</td>
							<td align="center">/</td>
						</tr>
					</table>
		</table>
	</body>
</html>

运用了表格布局相关知识

代码讲解

一、整体结构

1. <!DOCTYPE html> 声明这是一个 HTML5 文档。
2. <html> 标签是整个 HTML 文档的根元素。
3. <head> 标签包含了文档的元数据，如字符编码和标题。
- <title>计算机布局</title> 定义了文档的标题，在浏览器标签页上显示。

二、主体内容

1. 外层表格

- <table align="center" width="500" border="4" bordercolor="#000000">
创建了一个表格，通过 align="center" 属性使其在页面中居中显示， width="500" 设置表格宽度为 500 像素， border="4" 设置表格边框宽度为 4 像素， bordercolor="#000000" 设置边框颜色为黑色。
- 第一个表格行 <tr> 包含一个单元格 <td> ，背景颜色为灰色（ bgcolor="#808080" ），其中显示一个图片 <img src="img/CASIO.bmp"/> ，图片路径为相对路径下的“img”文件夹中的“CASIO.bmp”文件。
- 第二个表格行 <tr> 的单元格 <td height="100px"></td> 设置了高度为 100 像素，目前为空单元格，可用于间隔或其他布局目的。

2. 内层表格

<table align="center" width="500" border="4" bordercolor="#000000" cellpadding="9px" cellspacing="24px" bgcolor="#808080">
创建了另一个表格，同样居中显示，宽度为 500 像素，边框宽度为 4 像素，边框颜色为黑色，背景颜色为灰色， cellpadding="9px" 设置单元格内容与边框的内边距为 9 像素， cellspacing="24px" 设置单元格之间的间距为 24 像素。
- 这个表格包含了四个行，每行有四个单元格。
- 每个单元格 <td align="center"> 通过 align="center" 属性使内容居中显示，分别包含数字、运算符或特定功能键（如“1”“2”“3”“+”等）。

注意：这段代码创建了一个包含图片和计算器布局样式的表格结构的 HTML 页面。它并没有该计算机的实际功能

题目二

设计一个登录页面，效果如下

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<style type="text/css">
		fieldset{
			width:400px;
			}
		</style>
	</head>
	<body>
		<form  action="" method="post" enctype="multipart/form-data" name="forml" id="forml">
		<fieldset align="center">
				<legend align="center">登录页面</legend>
					用户名:<input type="text" name="user"/><br />
					密&emsp;码:<input type="password" name="password"/><br />
					类&emsp;型:<input type="radio" name="style" value="manage"/>管理员
					<input type="radio" name="style" value="people"/>普通用户 <br />
					<input type="checkbox" name="n1" value="RememberPassword"/>记住密码
					<input type="checkbox" name="n2" value="AutomaticLogin"/>自动登录 <br />
					<input type="submit" name="button1" id="button" value="提交"/>
					<input type="reset" name="button2" id="button2" value="重置"/>
	</fieldset>
	</form>
	</body>
</html>

代码讲解

1. `<head>`: 这个标签包含了文档的元数据，如字符集、标题和样式等。
2. `<title>登录页面</title>`: 这是窗口标题，会在浏览器窗口的顶部显示“登录页面”。
3. `<style type="text/css">`: 这是一个内联样式表，用于定义页面的样式。
4. `fieldset{width:400px;}`: 这段CSS代码设置了`<fieldset>`元素的宽度为400像素。
5. `<form action="" method="post" enctype="multipart/form-data" name="forml" id="forml">`: 这是一个表单元素，用于收集用户输入的数据。`action`属性指定了处理表单数据的服务器端脚本的URL（这里留空，表示尚未指定）。`method`属性指定了数据传输方式为POST。`enctype`属性指定了表单的MIME编码类型，用于上传文件。`name`和`id`属性用于标识表单。
6. `<fieldset align="center">`: 这个标签用于将表单中的元素分组，并使字段集的内容居中显示。
7. `<legend align="center">登录页面</legend>`: 这是字段集的标题，会在字段集上方显示“登录页面”。
8. `用户名:<input type="text" name="user" /><br />`: 这是一个文本输入框，用于输入用户名。`name`属性用于标识这个输入框。
9. `密&emsp;码:<input type="password" name="password" /><br />`: 这是一个密码输入框，用于输入密码。`name`属性用于标识这个输入框。
10. `类&emsp;型:<input type="radio" name="style" value="manage" />管理员
<input type="radio" name="style" value="people" />普通用户 <br />`: 这是一组单选按钮，用于选择用户类型（管理员或普通用户）。`name`属性用于标识这组单选按钮，`value`属性指定了每个选项的值。
11. `<input type="checkbox" name="n1" value="RememberPassword" />记住密码
<input type="checkbox" name="n2" value="AutomaticLogin" />自动登录 <br />`: 这是一组复选框，用于选择是否记住密码和自动登录。`name`属性用于标识每个复选框，`value`属性指定了每个选项的值。
12. `<input type="submit" name="button1" id="button" value="提交" />`: 这是一个提交按钮，用于将表单数据发送到服务器。`name`和`id`属性用于标识这个按钮，`value`属性指定了按钮上的文字。
13. `<input type="reset" name="button2" id="button2" value="重置" />`: 这是一个重置按钮，用于清除表单中的所有输入。`name`和`id`属性用于标识这个按钮，`value`属性指定了按钮上的文字。