web前端第一次作业

一、用户注册界面作业要求:
1.用户名为文本框,名称为 UserName,长度为 15,最大字符数为 20
2.密码为密码框,名称为 UserPass,长度为 15,最大字符数为 20
3.性别为两个单选按钮,名称为 sex,值分别为男和女,男默认选中
4.爱好是三个多选按钮,名称为 like,值分别为写作、听音乐、体育
5.省份为下拉框,名称为 province,选项的键-值对为 Key:陕西省,value:shaanxi ;Key:山西省5.
value:shanx;陕西省默认选中
6.自我介绍为多行文本框,名称为 intro,宽 25,高5,默认值为“这个家伙什么也没留下”
7.提交按钮,名称为“send”,标签为“提交”
8.重置按钮,名称为“reset”,标签为“重置”8 
9.参照图使用表格定位表单

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title>
</head>
<body><!--使用8*3表格-->   <table border="1px" width="300px" height="350px" align="center"><tr><td bgcolor="grey" colspan="3" align="center"><b>用户注册</b></td></tr><!--1.用户名为文本框,名称为 UserName,长度为 15,最大字符数为 20--><tr><td bgcolor="lightgrey" align="right">用户名</td><td bgcolor="lightgrey" colspan="2"><input type="text" name="UserName" width="15px" maxlength="20"></td></tr><!--2.密码为密码框,名称为 UserPass,长度为 15,最大字符数为 20--><tr><td bgcolor="lightgrey" align="right" >密码</td><td bgcolor="lightgrey" colspan="2"><input type="password" name="UserPass width="15px" maxlength="20"></td></tr><!--3.性别为两个单选按钮,名称为 sex,值分别为男和女,男默认选中--><tr><td bgcolor="lightgrey" align="right" >性别</td><td bgcolor="lightgrey" colspan="2">男:<input type="radio" name="sex" value="0">女:<input type="radio" name="sex" value="1"><br></td></tr><!--4.爱好是三个多选按钮,名称为 like,值分别为写作、听音乐、体育--><tr><td bgcolor="lightgrey" align="right" >爱好</td><td bgcolor="lightgrey" colspan="2"><input type="checkbox" name="like" value="xz">写作<input type="checkbox" name="like" value="tyy">听音乐<input type="checkbox" name="like" value="ty">体育<br>   </td></tr><!--5.省份为下拉框,名称为 province,选项的键-值对为 Key:陕西省,value:shaanxi ;Key:山西省;value:shanx;陕西省默认选中--><tr><td bgcolor="lightgrey" align="right" >省份</td><td bgcolor="lightgrey" colspan="2"><select name="location"><option value="shanxi" checked>陕西省</option><option value="sx">山西省</option></select></td></tr><!--6.自我介绍为多行文本框,名称为 intro,宽 25,高5,默认值为“这个家伙什么也没留下”--><tr><td bgcolor="lightgrey" align="right" >自我介绍</td><td bgcolor="lightgrey" colspan="3"><textarea name="intro" id="" cols="25" rows="5" placeholder="这个家伙什么也没留下"></textarea></td></tr><!--7.提交按钮,名称为“send”,标签为“提交”--><tr><td bgcolor="lightgrey" colspan="3" align="center" ><button type="submit" name="send"><b>提交</b></button><!--8.重置按钮,名称为“reset”,标签为“重置”8 --><button type="reset" name="reset"><b>重置</b></button> </td></tr></table>
</body>
</html>

结果如下

二、工商银行电子汇款单

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>工商银行电子汇款单</title>
</head>
<body><th><h2>工商银行电子汇款单</h2></th><table border="1px" width="780px" height="280px" cellspacing="0px"><!--第一行--><tr><!--跨两列--><td colspan="2"><b>回单类型</b></td><td>网上转账汇款</td><td colspan="2"><b>指令序号</b></td><td>HQH0000000000000013878172</td></tr><!--第二行--><tr><!--跨四行--><td rowspan="4"><b>收款人</b></td><td>户名</td><td>老牟</td><td rowspan="4"><b>付款人</b></td><td>户名</td><td>老刘</td></tr><tr><td>卡号</td><td>000000000001</td><td>卡号</td><td>000000000002</td></tr><tr><td>地区</td><td>南京</td><td>地区</td><td>杭州</td></tr><tr><td>网点</td><td>工商江苏南京业务处理中心</td><td>网点</td><td>江苏苏州业务中心</td></tr><tr><td colspan="2"><b>币种</b></td><td>人民币</td><td colspan="2"><b>钞汇标志</b></td><td>钞票</td></tr><tr><td colspan="2"><b>金额</b></td><td>1.00元</td><td colspan="2"><b>手续费</b></td><td>0.57元</td></tr><tr><td colspan="5"><b>合计</b></td><td>人民币(大写):壹元整</td></tr><tr><td colspan="2"><b>交易时间</b></td><td><i>2017年6月1日</i></td><td colspan="2"><b>时间截</b></td><td><i>2017-06-01-13.00.00.00000</i></td></tr></table><table><p>票据打印时间:2017-06-01 15:00:12</p><del>测试内容</del><p>操作员:大曾</p></table>
</body>
</html>

结果如下

 

三、 李白诗词

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>李白诗词</title></head>
<body><h1 align="left"><b>将进酒</b><small> 君不见黄河之水天上来</small></h1><table><tr><td><img src="3.png" width="400px" height="600px"><td>  <p>君不见,黄河之水天上来,奔流到海不复回。</p><p>君不见,高堂明镜悲白发,朝如青丝暮成雪!</p><p>人生得意须尽欢,莫使金樽空对月。</p><p>天生我材必有用,千金散尽还复来。</p><p>烹羊宰牛且为乐,会须一饮三百杯。</p><p>岑夫子,丹丘生,将进酒,杯莫停。</p><p>与君歌一曲,请君为我倾耳听。</p><p>钟鼓馔玉不足贵,但愿长醉不复醒。</p><p>古来圣贤皆寂寞,惟有饮者留其名。</p><p>陈王昔时宴平乐,斗酒十千恣欢谑。</p><p>主人何为言少钱,径须沽取对君酌。</p></td></tr></table></body>
</html>

结果如下

四、豆瓣电影

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣电影</title>
</head>
<body><th><h2>热门电影板块</h2></th><b>最近热门电影</b>
<hr>&nbsp;&nbsp;&nbsp;&nbsp;热门&nbsp;&nbsp;&nbsp;最新&nbsp;&nbsp;&nbsp;豆瓣高分&nbsp;&nbsp;&nbsp;冷门佳片&nbsp;&nbsp;&nbsp;华语&nbsp;&nbsp;&nbsp;欧美&nbsp;&nbsp;&nbsp;韩国&nbsp;&nbsp;&nbsp;日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>>
<hr><table><tr><td><img src="千与千寻.webp" width="150px" height="200px">  <p>千与千寻</p>      </td><td><img src="哪吒之魔童闹海webp.webp" width="150px" height="200px"><p>哪吒之魔童闹海</p></td><td><img src="唐人街探案3.jpg" width="150px" height="200px"><p>唐人街探案3</p></td><td><img src="巨齿鲨.jpg" width="150px" height="200px"><p>巨齿鲨</p></td></tr><tr><td><img src="无间道.webp" width="150px" height="200px"><p>无间道</p></td><td><img src="重启未来.jpg" width="150px" height="200px"><p>重启未来</p></td><td><img src="金刚.webp" width="150px" height="200px"><p>金刚</p></td><td><img src="飞驰人生2.jpg" width="150px" height="200px"><p>飞驰人生2</p></td></tr>   </table>
</body>
</html>

结果如下

 

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

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

相关文章

Jenkins 节点连接故障定位及解决方案总结 - PKIX path validation failed

一、故障现象 Jenkins 节点通过 Java Web 方式连接时&#xff0c;报错&#xff1a; java.io.IOException: Failed to connect to https://xxxx.zte.com.cn/yyyy/tcpSlaveAgentListener/: PKIX path validation failed: java.security.cert.CertPathValidatorException: validit…

c++ --- priority_queue的使用以及简单实现

C --- priority_queue前言一、priority_queue的使用二、priority_queue的简单实现1.整体结构2.主要方法pushpoptopemptysize三、构造迭代器区间构造默认构造四、仿函数前言 priority_queue是C容器之一&#xff0c;意为优先级队列&#xff0c;虽说叫做队列&#xff0c;但是其底…

MySQL梳理三:查询与优化

MySQL查询优化完整指南&#xff1a;从理论到实践 本文从MySQL查询的基础机制出发&#xff0c;深入探讨单表查询访问方法、联表查询策略、成本计算原理、基于规则的优化技术&#xff0c;最后通过实际案例展示慢SQL的诊断和优化过程。 目录 一、单表查询的访问方法二、联表查询机…

从零开始的python学习(九)P129+P130+P131+P132+P133

本文章记录观看B站python教程学习笔记和实践感悟&#xff0c;视频链接&#xff1a;【花了2万多买的Python教程全套&#xff0c;现在分享给大家&#xff0c;入门到精通(Python全栈开发教程)】 https://www.bilibili.com/video/BV1wD4y1o7AS/?p6&share_sourcecopy_web&v…

LCL滤波器及其电容电流前馈有源阻尼设计软件【LCLAD_designer】

本文主要介绍针对阮新波著《LCL型并网逆变器的控制技术》书籍 第二章&#xff08;LCL滤波器设计&#xff09;及第五章&#xff08;LCL型并网逆变器的电容电流反馈有源阻尼设计&#xff09;开发的一款交互式软件【LCL&AD_designer】&#xff0c;开发平台MATLAB_R2022b/app d…

【Conda】配置Conda镜像源

Conda 镜像源配置指南 适用系统&#xff1a;Windows 10&#xff08;含 Miniconda / Anaconda&#xff09; & Linux&#xff08;Ubuntu / CentOS / Debian 等&#xff09;1. 为什么要设置镜像源 在中国大陆直接访问 repo.anaconda.com 经常遇到速度慢、连接超时、SSL 错误等…

八股取士--docker

基础概念类 1. 什么是Docker&#xff1f;它解决了什么问题&#xff1f; 解析&#xff1a; Docker是一个开源的容器化平台&#xff0c;用于开发、交付和运行应用程序。 主要解决的问题&#xff1a; 环境一致性&#xff1a;解决"在我机器上能跑"的问题资源利用率&#…

C++:STL中的栈和队列的适配器deque

学习完string类、容器vector和容器list&#xff0c;再去学习其他容器的学习成本就非常低&#xff0c;容器的使用方法都大差不差&#xff0c;而栈和队列的底层使用了适配器&#xff0c;去模拟实现就没有那么麻烦&#xff0c;适配器也是一种容器&#xff0c;但是这种容器兼备栈和…

9类主流数据库 - 帮你更好地进行数据库选型!

作者&#xff1a;唐叔在学习 专栏&#xff1a;数据库学习 标签&#xff1a;数据库选型、MySQL、Redis、MongoDB、大数据存储、NoSQL、数据库优化、数据架构、AI数据库 大家好&#xff0c;我是你们的老朋友唐叔&#xff01;今天咱们来聊聊程序员吃饭的家伙之一 —— 数据库。在这…

推送本地项目到Gitee远程仓库

文章目录前言前面已加学习了下载gitee软件&#xff0c;网址在上一篇文章。在gitee创建账号与仓库。现在来学习如何讲本地项目推送到Gitee远程仓库一、流程总结前言 前面已加学习了下载gitee软件&#xff0c;网址在上一篇文章。在gitee创建账号与仓库。现在来学习如何讲本地项目…

CMake 命令行参数完全指南(5)

​**40. --version**​ ​解释​&#xff1a;显示CMake版本 ​示例​&#xff1a; cmake --version # 输出&#xff1a;cmake version 3.25.2​**41. --warn-uninitialized**​ ​解释​&#xff1a;警告未初始化的变量 ​适用场景​&#xff1a;检测脚本错误 ​示例​&#xf…

基于Python实现生产者—消费者分布式消息队列:构建高可用异步通信系统

深入剖析分布式消息队列的核心原理与Python实现&#xff0c;附完整架构设计和代码实现引言&#xff1a;分布式系统的通信基石在微服务架构和云原生应用普及的今天&#xff0c;服务间的异步通信成为系统设计的核心挑战。当单体应用拆分为数十个微服务后&#xff0c;服务间通信呈…

【大模型核心技术】Agent 理论与实战

一、基本概念 LLM 特性&#xff1a;擅长理解和生成文本&#xff0c;但采用 “一次性” 响应模式&#xff0c;本质上是无记忆的生成模型。Agent 本质&#xff1a;包含 LLM 的系统应用&#xff0c;具备自主规划、工具调用和环境反馈能力&#xff0c;是将 LLM 从 “聊天机器人” 升…

Maven - 依赖的生命周期详解

作者&#xff1a;唐叔在学习 专栏&#xff1a;唐叔的Java实践 标签&#xff1a;Maven依赖管理、Java项目构建、依赖传递性、Spring Boot依赖、Maven最佳实践、项目构建工具、依赖冲突解决、POM文件详解 文章目录一、开篇二、Maven依赖生命周期2.1 依赖声明阶段&#xff1a;POM文…

从零打造大语言模型--处理文本数据

从零打造大语言模型 第 1 章&#xff1a;处理文本数据 章节导读 在把文本投喂进 Transformer 之前&#xff0c;需要两步&#xff1a;① 将字符流切分成离散 Token&#xff1b;② 把 Token 映射成连续向量。 1.1 理解词嵌入&#xff08;Word Embedding&#xff09; 嵌入向量 一…

【Spring】Bean的生命周期,部分源码解释

文章目录Bean 的生命周期执行流程代码演示执行结果源码阅读AbstractAutowireCapableBeanFactorydoCreateBeaninitializeBeanBean 的生命周期 生命周期指的是一个对象从诞生到销毁的整个生命过程&#xff0c;我们把这个过程就叫做一个对象的声明周期 Bean 的声明周期分为以下 …

[spring-cloud: 服务发现]-源码解析

DiscoveryClient DiscoveryClient 接口定义了常见的服务发现操作&#xff0c;如获取服务实例、获取所有服务ID、验证客户端可用性等&#xff0c;通常用于 Eureka 或 Consul 等服务发现框架。 public interface DiscoveryClient extends Ordered {/*** Default order of the dis…

QML 基础语法与对象模型

QML (Qt Meta-Object Language) 是一种声明式语言&#xff0c;专为创建流畅的用户界面和应用程序逻辑而设计。作为 Qt 框架的一部分&#xff0c;QML 提供了简洁、直观的语法来描述 UI 组件及其交互方式。本文将深入解析 QML 的基础语法和对象模型。 一、QML 基础语法 1. 基本对…

HTTPS的概念和工作过程

一.HTTPS是什么HTTPS也是一个应用层协议&#xff0c;是在HTTP协议的基础上引入了一个加密层&#xff08;SSL&#xff09;HTTP协议内容都是按照文本的方式明文传输的&#xff0c;这就导致传输过程中可能出现被篡改的情况最著名的就是十多年前网络刚发展的时期&#xff0c;出现“…

Unity —— Android 应用构建与发布​

文章目录1 ​Gradle模板​​&#xff1a;了解Gradle模板的作用及使用方法&#xff0c;以增强对构建流程的控制。​2 ​Gradle模板变量​​&#xff1a;参考文档——自定义Gradle模板文件中可用的变量列表。2.1 修改Unity应用的Gradle工程文件2.1.1 通过Gradle模板文件2.1.2 导出…