javaweb实验1和2---H5C3
2024-07-01 22:59:16
文章目录
- 1.第一题
- 2.第二题
- 3.第三题
- 4.利用css对网页文件1.html做如下设置
- 5.Javascript做如下题目
1.第一题
用H5C3完成下列表格
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title>
</head><h1 align="center" style="background-color: #0099ff" font-size="32px">第一题</h1><body style="background-color: #FFE4C4 "><table border="1" cellspacing="0" width="800" align="center"><!-- align的意思是：规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：`style="text-align: center;"` 设置） --><!-- (基本信息) --><tr height="50"><td colspan="3" width="100" style="color:#0000FF">(基本信息)</td><td width="250" style="color:#FF0000"><i>简历更新日期：2009-04-30</i></td></tr><tr height="40"><td width="150" align="right"><strong>姓名：</strong></td><td colspan="2">张三</td><td width="200" rowspan="4"><div align="center"><img src="https://img-blog.csdnimg.cn/5b9e905ca17e42ef899b7e6d15c32721.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aW977yM5ZG15ZG1,size_20,color_FFFFFF,t_70,g_se,x_16 , width=" 300px " , height="160px " /></div></td></tr><tr height="40 "><td align="right "><strong>身份证号码:</strong></td><td colspan="2 ">320235432543x</td></tr><tr height="40 "><td align="right "><strong>性别:</strong></td><td colspan="2 ">男</td></tr><tr height="40 "><td align="right "><strong>出生年月:</strong></td><td colspan="2 ">19780506</td></tr><tr height="40 "><td width="200px " align="right "><strong>民族:</strong></td><td width="200px ">汉族</td><td width="200px " align="right "><strong>政治面貌:</strong></td><td width="200px ">共青团员</td></tr><tr height="40 "><td align="right "><strong>婚姻状况：</strong></td><td>未婚</td><td align="right "><strong>视力：</strong></td><td width="200 "></td></tr><tr height="40 "><td align="right "><strong>户籍所在地：</strong></td><td>南京市秦淮区</td><td align="right "><strong>身高：</strong></td><td>0(cm)</td></tr><tr height="40 "><td align="right "><strong>现居住地：</strong></td><td colspan="3 "></td></tr><!-- (目前从事工作情况) --><tr height="40 "><td colspan="4 " style="color:#0000FF ">(目前从事工作情况)</td></tr><tr height="40 "><td align="right "><strong>现工作单位：</strong></td><td>***</td><td align="right "><strong>参加工作年度：</strong></td><td>1998年</td></tr><tr height="40 "><td align="right "><strong>目前从事岗位：</strong></td><td>信息工程</td><td align="right "><strong>从事现岗位时间：</strong></td><td>8年</td></tr><tr height="40 "><td align="right "><strong>现职称级别：</strong></td><td colspan="3 "></td></tr><!-- 受教育情况 --><tr height="40 "><td colspan="4 " style="color:#0000FF ">(受教育情况)</td></tr><tr height="40 "><td align="right "><strong>学历：</strong></td><td>本科</td><td align="right "><strong>毕业年度：</strong></td><td>1998</td></tr><tr height="40 "><td align="right "><strong>所学专业：</strong></td><td colspan="3 ">涉外会计</td></tr><tr height="40 "><td align="right "><strong>毕业院校：</strong></td><td colspan="3 ">金陵科技学院</td></tr><tr height="40 "><td align="right "><strong>外语及水平：</strong></td><td colspan="3 ">英语，普通英语六级；法语，一般</td></tr><tr height="40 "><td align="right "><strong>学习简历：</strong></td><td colspan="3 ">1995/1--1998/9金陵科技学院金融学</td></tr><tr height="40 "><td align="right "><strong>继续教育情况：</strong></td><td colspan="3 "></td></tr><tr height="400 "><td align="right "><strong>工作简历：</strong></td><td colspan="3 ">2000/3--2008：南京嘉腾科技有限公司<br />所属行业：计算机软件<br />EximbillsEnterprise项目经理<br />1.负责产品国际市场发展环境的分析,包括区域电信发展环境，重点运营商经营发展战略、投资方向和客户需求的分析；侧重海外高端运营商的市场培育、机会挖掘；<br /><br />2.负责海外片区市场投资空间的中长期预测以及进行所辖区域市场竞争格局的分析.参与市场规划，定期输出所辖区域的市场策略（市场目标选择，市场竞争策略，产品策略以及合作策略等）；为产品的市场规划和重大市场营销活动提供支持<br /><br />3.在IBMWebsphere平台上用Java设计并开发国际结算系统EximBills企业级版本，参与系统设计过程，并撰写英文系统文档。用MSProject编写项目计划，沟通各项目经理，海外市场销售团队与公司管理层，控制项目目标与公司整体战略之间的平衡。<br /><br />4.协调渣塔银行StandardCharteredBankMegellan项目，协助项目经理沟通银行客户，保持中东公司实施团队与南京研发中心系统开发版本的一致。为银行提供系统技术咨询服务并分五个阶段将整个项目<br /></td></tr><tr height="250 "><td align="right "><strong>个人技能及特长：</strong></td><td colspan="3 ">1.金融业务理论2.Java软件开发3.精通SQLServer开发3.英语,法语流利4.有较强的国际视野和跨文化沟通能力。</td></tr><tr height="40 "><td align="right "><strong>成果及获奖情况：</strong></td><td colspan="3 "></td></tr><!-- 求职意向 --><tr height="40 "><td colspan="4 " style="color:#0000FF ">(求职意向)</td></tr><tr height="40 "><td align="right "><strong>求职意向：</strong></td><td colspan="3 ">信息技术经理/主管，科研人员，科研管理人员</td></tr><tr height="40 "><td align="right "><strong>期望工作地点：</strong></td><td colspan="3 ">南京市</td></tr><tr height="40 "><td align="right "><strong>薪酬要求：</strong></td><td>面议</td><td align="right "><strong>工作方式：</strong></td><td>全/兼职</td></tr><tr height="40 "><td align="right "><strong>对新工作的期望：</strong></td><td colspan="3 "></td></tr><!-- 其他资料 --><tr height="40 "><td colspan="4 " style="color:#0000FF ">(其它资料)</td></tr><tr height="40 "><td align="right "><strong>兴趣爱好：</strong></td><td colspan="3 "></td></tr><tr height="40 "><td align="right "><strong>自我评价：</strong></td><td colspan="3 ">多年Java软件开发经验，英语，法语流利，有较强的国际视野和跨文化沟通能力.MCSE，MCDBA，MCSD</td></tr><!-- 联系方式 --><tr height="40 "><td colspan="4 " style="color:#0000FF ">(联系方式)</td></tr><tr height="40 "><td align="right "><strong>联系电话：</strong></td><td >025-84589702</td><td align="right "><strong>住宅电话：</strong></td><td >025-84589702</td></tr><tr height="40 "><td align="right "><strong>移动电话：</strong></td><td >13951725880</td><td align="right "><strong>联系人：</strong></td><td ></td></tr><tr height="40 "><td align="right "><strong>E-MAIL：</strong></td><td >xxxxxx@hotnai1. com</td><td align="right "><strong>个人主页：</strong></td><td ></td></tr><tr height="40 "><td align="right "> <strong>聊天帐号：</strong></td><td colspan="3 "></td></tr><tr height="40 "><td align="right "><strong>通讯地址：</strong></td><td colspan="3 ">（）</td></tr>
</table>
</body>
</html>
2.第二题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<h1 align="center" style="background-color: #0099ff" font-size="32px" >第二题</h1><body style="background-color: #FFE4C4 "><style>label:before {content: '* ';color: red;}.span1{font-weight: 100;font-size:8px;}.span2{font-weight: 700;font-size:8px;}</style><form><table border="1"cellspacing="0"width="800" style="background-color:#F2F2F2;" align="center"><tr height="60"><td align="right" width="200"><label >姓名 : </label></td><td><input name = "username" type="text" size="5"> <label >出生日期:</label><select name = "year" ><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option></select>年<select name = "month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select>月<select name = "day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select>日</td></tr><tr height="60"><td align="right"><label>身份证号码：</label></td><td><input name = "username" type="text" size="18"> <span class="span1">长度15位或18位，必须和出生日期、性别相对应</span></td><!-- size代表可见的字符数。 --></tr><tr height="60"><td align="right"><label>性别：</label></td><td ><select name = "sex" ><option value="男" >男</option><option value="女" >女</option></select>  民族：<select name = "minzu" ><option value="汉" >汉</option><option value="其他" >其他</option></select></td></tr><tr height="60"><td align="right">婚姻状况：</td><td><select name = "select" ><option value="未婚" size="5">未婚</option><option value="已婚" size="5">已婚</option></select>  政治面貌：<select name = "a" ><option value="共青团员" >共青团员</option><option value="中共党员" >中共党员</option></select></td></tr><tr height="60"><td align="right">户口所在地：</td><td><select name = "address" ><option value="南京市秦淮" >南京市秦淮</option><option value="南京市秦淮" >南京市秦淮</option></select>  现居住地：<select name = "address" ><option value="南京市秦淮" >南京市秦淮</option><option value="其他" >其他</option></select></td></tr><tr height="60"><td align="right">身高：</td><td><input type="text" size=5 /> <span class="span1">单位：厘米</span></td></tr><tr height="60"><td align="right">视力状况：</td><td><input type="text" size=5 /> <span class="span1">请用文字描述你的情况</span></td></tr><tr height="80"><td align="right">现工作单位名称：</td><td><input type="text" /><br /><br /><input type="checkbox" /> <span>申请职位（发送简历）时发送现工作单位名称（不推荐选择）</span> </td></tr><tr height="60"><td align="right"><label>现从事工作职位名称：</label></td><td><input name = "username" type="text" size="5"> <span class="span1">如：公司部门经理</span></td>
</tr><tr height="60"><td align="right">现职称级别：</td><td><select name="" id=""><option value="">--请选择--</option></select></td></tr><tr height="60"><td align="right">现从事工作级别：</td><td><select name="" id=""><option value="">高级职位（非管理类）</option></select><span style=" color:red" class="span2">N</span><span style="color:orange" class="span2">E</span><span style="color:orange" class="span2">W</span><span style="color:green" class="span2">!</span></td></tr> <tr height="60"><td align="right"><label>现从事职位类别：</label></td><td><select name="" id=""><option value="">IT-管理</option></select><select name="" id="" ><option value="" >IT-管理 </option></select><input type="text" value="0100,计算机软件"/><input type="text" value="0700" /><input type="text" /></td></tr><tr height="60"><td align="right">从事现职位年限：</td><td><select name="" id=""><option value=""> 8年 </option></select></td></tr><tr height="100"><td colspan="2" align="center"><input type="submit" name="" id="" value="保存以上修改"/></td></tr></table>
</form>
</body>
</html>
3.第三题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{border: 1px dashed;
}
td{border: 1px dashed;
}/*设置单元格边框纵向虚线*/
tr{border: 1px dashed;
}/*设置单元格边框横向虚线*/label::before{content: '*';color:red;
}
.font1{font-weight: 100;
}
</style>
</head><h1 align="center" style="background-color: #0099ff" font-size="32px" >第三题</h1>
<body style="background-color: #FFE4C4 "><form>
<table cellspacing="1"width="800" height="300" align="center"><!-- ·····························个人基本信息························ --><tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 个人基本信息</td></tr><tr><td align="right"><label>姓 名</label></td><td><input type="text" /></td><td align="right"><label>性 别</label></td><td><input type="radio"/>男<input type="radio"/>女</td></tr><tr><td align="right"><label>籍 贯</label></td><td><input type="text" /></td><td align="right">出生日期</td><td><select name="" id=""><option value="">--选择--</option></select>年<select name="" id=""><option value="">--选择--</option></select>月<select name="" id=""><option value="">--选择--</option></select>日</td></tr><tr ><td rowspan="2" align="align">个人照片</td><td colspan="3"><input type="text" size="50"/></td></tr><tr ><td colspan="3">注：照片大小请控制在200K以内。</td></tr><tr><td align="right">身份证号码</td><td><input type="text" /></td><td align="right"><label>毕业院校</label></td><td><input type="text" /></td></tr><tr><td align="right"><label>最后学历</label></td><td><input type="text" /></td><td align="right"><label>专 业</label></td><td><input type="text" /></td></tr><tr><td align="right"><label>毕业时间</label></td><td><input type="text" /></td><td align="right">学位证书</td><td><input type="text" /></td></tr><!-- ·····························个人能力························ --><tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 个人能力</td></tr><tr><td rowspan="3" align="center">语言能力</td><td align="right"><label>英语能力水平</label></td><td colspan="2"><input name = "select0" type="radio" value="四级">四级<input name = "select0" type="radio" >六级<input name = "select0" type="radio">其他</td></tr><tr><td align="right">日语能力水平</td><td colspan="2"><input name = "select" type="radio" value="1">1<input name = "select" type="radio" >2<input name = "select" type="radio">3<input name = "select" type="radio">4<input name = "select" type="radio" >5<input name = "select" type="radio">其他</td></tr><tr><td align="right">其他语言能力水平</td><td colspan="2"><input name = "lever" type="text"></td></tr><tr><td rowspan="3" align="center">专业技能</td><td align="right">计算机语言</td><td colspan="2"><input name = "select1" type="checkbox" value="java">java<input name = "select1" type="checkbox" >.NET<input name = "select1" type="checkbox">c/c++<input name = "select1" type="checkbox">其他</td></tr><tr><td align="right">使用平台</td><td colspan="2"><input name = "select2" type="checkbox" value="win">WINDOWS系列<input name = "select2" type="checkbox" >UNIX系列<input name = "select2" type="checkbox">其他 </td></tr><tr><td align="right">使用数据库</td><td colspan="2"><input name = "select3" type="checkbox" value="ORACLE">ORACLE<input name = "select3" type="checkbox" >DB2<input name = "select3" type="checkbox">SYBASE/SQL-SEVER<input name = "select3" type="checkbox">其他</td></tr><tr><td colspan="2" align="center" >所获证书（国家标准考试）</td><td colspan="2"><input type="checkbox" /> 系统分析员 <input type="checkbox" /> 高级程序员 <input type="checkbox" /> 程序员 <input type="checkbox" /> 其它 </td></tr><tr><td align="center">工作经验</td><td colspan="3"><p style="color:#D7D4D2;">格式：工作单位（或项目名称），担任职位，时间，工作内容描述</p><textarea rows="4" cols="40" style="overflow:scroll" wrap="off"></textarea></td><tr><td align="center">备注</td><td colspan="3"><p style="color:#D7D4D2;">格式：工作单位（或项目名称），担任职位，时间，工作内容描述</p><textarea rows="4" cols="40" style="overflow:scroll" wrap="off"></textarea></td></tr><!-- ·····························联系方法························ --><tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 联系方法</td></tr><tr><td align="right"><label>电 话</label></td><td><input type="text" /></td><td align="right"><label>手 机</label></td><td><input type="text" /></td></tr><tr><td align="right"><label>E-mail</label></td><td colspan="3"><input type="text" /></td> </tr><tr><td align="right">通讯地址</td><td colspan="3"><input type="text" /></td> </tr><tr><td align="right">邮 编</td><td colspan="3"><input type="text" /></td> </tr><!-- ·····························其他························ --><tr><td colspan="4" align="center" style="background-color:#F2F2F2;">其他</td></tr><tr height="80"><td align="right"><label>调 查</label></td><td colspan="3"><p class="font1">你是如何理解本站的：</p><input type="checkbox" />海报<input type="checkbox" />报纸<input type="checkbox" />电视<input type="checkbox" />朋友介绍<input type="checkbox" />搜索引擎</td></tr><tr><td colspan="4" align="center"><input name = "re" type="reset" value="提交报名信息"><input name = "sub" type="submit" value="取消重新填写"></td></tr>
</table>
</form>
</body>
</html>
4.利用css对网页文件1.html做如下设置
(1)h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px
(2)使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px
(3)段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px
(4)消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff
(5)给两个段落加不同颜色的右边线：3px double red和3px double orange
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">/* (4)消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff */body {margin: 0;background-color: #ccccff;}/* （1）h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px */.p1 {text-align: center;}.p1>.h1 {color: #fff;background-color: blue;padding: 15px;display: inline-block;}/* (2)使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px */.p2>img {border: 1px dashed #9999cc;margin: 5px;float: left;}/* (3)段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px *//* (5)给两个段落加不同颜色的右边线：3px double red和3px double orange */.p2>p {border-right: 3px double red;}.p3>p {font-size: 12px;text-indent: 20px;line-height: 150%;padding: 5px;border-right: 3px double orange;}</style>
</head><body><div class="p1"><h1 class="h1">标题1</h1></div><div class="p2"><img src="img/002.jpg" alt=""><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx</p></div><div class="p3" style="clear: both;"> <p>标题1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx</p></div>
</body></html>
5.Javascript做如下题目
设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为 XXXX-XXXX-XXXX-XXXX位数字 ，要求在用户单击提交按钮 “ 发送 ” 之前验证这两个输入数据的有效性。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action=""><input type="text" name="name"><input type="text" name="cardId"><button id="btn" type="button">发送</button></form><script type="text/javascript">var btn = document.querySelector("#btn");btn.addEventListener("click", function() {//添加点击事件，鼠标一点击就触发var name = document.querySelector("[name=name]");var nameVal = name.value;if (nameVal.length > 6 && nameVal.length < 12) {//合法} else {alert("不合法的用户名");return;}var cardId = document.querySelector("[name=cardId]");var cardIdVal = cardId.value;/* var pattern = /^\w{4}-\w{4}-\w{4}-\w{4}$/;var pass = pattern.test(cardIdVal);console.log(pass); */var array = cardIdVal.split("-");if (array.length != 4) {//不合法return;}if (array[0].length != 4 || array[1].length != 4 || array[2].length != 4 || array[3].length != 4) {//不合法}});</script></body>
</html>
javaweb实验1和2---H5C3相关推荐
- Javaweb实验：静态网页制作
Javaweb实验: 1.静态网页制作 目录 Javaweb实验: 前言 一.实验目的 二.实验原理 三.实验内容 四.实验步骤 五.实验结果 六.实验内容 七.实验步骤 八.实验结果 九.思考 1. ...
- Javaweb 实验二 JSP应用开发基础
PDF版本 实验目的: 掌握JSP基本语法. 脚本元素(SCRIPTING) (1)隐藏注释(Hidden Comment)<%-- 这是客户端不可见的注释 --%> (2)声明(De ...
- JavaWeb 实验 Servlet用户登录验证
实验2.2 Servlet用户登录验证 实验内容: 编写JSP程序,实现用户提交登录表单给Servlet,由Servlet 查询数据库(模拟查询,不用真的连接数据库查询),对用户是否存在进行验证. 实 ...
- 【JavaWeb实验】图书管理系统
第一次写文,做一次小尝试.把一年前学校里面的小作业放上来,供参考 代码将于文末以百度网盘的形式分享出来 一.实验背景: 熟悉并掌握如何编写编写各个页面的参数传递以及jsp基本知识. 1.实验目的 通过 ...
- Javaweb实验： JSP与Servlet综合案例（含完整代码）
1 实验目的 1.了解项目开发的基本流程和开发步骤知识 2．掌握项目分析和软件设计的主要步骤 3．回顾掌握JDBC编程的技术和方法 4．掌握JSP·Servlet综合知识和编程方法 2 实验环境 ...
- 2021-03-14 JavaWeb实验课
1- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...
- java web实验_javaweb实验报告
javaweb实验报告 甘肃政法学院本科生实验报告(一)姓名:学院:计算机科学学院专业: 计算机科学与技术班级实验课程名称:实验日期:2012 年 04 月 9 日指导教师及职称实验成绩:开课时间:2 ...
- javaee实验报告心得_java,web实验报告心得.doc
java,web实验报告心得 java,web实验报告心得 JavaWeb实验报告 实验一 开发环境配置及Servlet程序设计 一.实验目的 1.了解并熟悉编程环境.编程工具,包括Tomcat.My ...
- 【Leetcode】刷题题单记录
程序=算法+数据结构,不管干哪一行,只要涉及到编程算法始终是最重要的!!! 算法基础差,变做题巩固!!! LeetCode刷题,搞起来! 由于我只会C++和Python, 所以题解只有C++ 和 Py ...
最新文章
- PyTorch入门学习（二）：Autogard之自动求梯度
- linux sftp 重命名,linux下ssh/sftp配置和权限设置
- 无法启动MySQL数据库
- 【iOS数据持久化】偏好设置（UserDefaults）
- android boot.img 结构
- 多线程编程之四——线程的同步
- 02.pipeline常用processor
- 手动为 SAP Spartacus 添加 SSR 支持的步骤
- android关于okhttp中对于onFailure回调的异常捕获
- Leetcode 448. Find All Numbers Disappeared in an Array
- eclipse字体大小怎么设置
- Linux 内核 颜色,Linux操作系统内核版的表示方法是（ ）
- 计算机切换用户快捷键,电脑操作中如何快速切换用户？
- mcdf项目验证总结-SV
- 2021年前端关注的8个技术趋势
- 设计模式(十三) 代理模式和Java动态代理
- 创建视图时--ora-01731:出现循环的视图定义
- TVS管防护电路的典型应用原理，这些你必须了解
- 国标GB28181-2022主要技术变化
- 全球三效催化剂回收行业调研及趋势分析报告