第二部分 第二十三章 综合案例-【职升课堂】中职计算机应用1同步训练（高教版）

第二十三章综合案例 学习目标 1.了解如何做一个具有基本功能的网页。 2.能在网页中运用CSS进行布局。 3.能够灵活运用JavaScript在网页内进行交互。 ■同步训练 <meta charset="UTF-8"> 程序设计题 <title>第二十三章HTML综合案 例程序设计<itle> 网页结果如下图，注册页面有阴影， JavaScript检查邮箱格式是否正确，用户名 <style> 不能超过5位，可以选择并上传个人头像， inputborder:;/体消除输入框 边框*/ 会检查密码是否符合规范并且两次密码输入 :lpx*下划线粗细为lpx* 必须一致，全部信息无误后方可提示注册成 solid rgb (10,10,10);width:300px;} 功。根据题意和后面的选项，请将备选项中 p{:left:/*文本左对齐*/ 对应的选项字母填入相应的横线上。 color:rgb 116,113,113 ;margin:15px;} .zc{:50px;/*注册页面距上 HTML综合案例-注册 部50px*/width:450px; 邮 text-align:center;height:400px; 用户名：用户名长度不肺招过5位 性 别男。女O :7px7px17 px rgb(52,56,66);/*设 头 像法押文件丰速择任何文件 置页面阴影*) 密 码：码长度至少为5位：且力数序和字马的烟合 .zc an{ :rgb(243,202, 确认密码：两次密西常一数 20):/*按钮背景颜色*/ _:white;/*字体颜色*/border- style:hidden;::I5px;/*设置外边框圆 角*width:190px;:31px;/岸设置按 程序如下： 钮高度为3lpx*/font-size:16px;margin-left: <!DOCTYPE html> 100px;margin-top:20px; <html><head> </style> 6 职升课堂·计算机应用1◆ </head><body><div="zc">"id="mm 2"></p> <1.-引用zC样式-> <p><input type=”"<!-按钮 <h3>HTML综合案例-注册<h3> 类型->class--"zcan"name-"zc"onclick= <p>&nbsp;&nbsp;&nbsp;&n "<!-执行JavaScript-->value="注册" bsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input ></input></p> type="text"id="yxdz"></p> </div> <p>用&nbsp;&nbsp;户 <>/*script开始标签*var &nbsp;&nbsp;名：<input type--"text" yx_zq=true,yhm_zq,mm_zq=true; "用户名长度不能超过5位"id="yhm"><! yxdz.onchange--function(){/∥判断 可描述输入字段预期值的提示信息-><p> 邮箱格式是否正确 <p>&nbsp;&nbsp;&nbs var yx=this.value; p:&nbsp:&nbsp;&nbsp:&nbsp:&nbsp: var yxzf=/[a-zA-Z0-9](1,10@ 别：<span>&nbsp;&nbsp;&nbsp;男</ [a-zA-Z0-9]{1,5}L.[a-zA-Z0-9]{1,5}$;∥邮箱 span><span><input style="width:auto; 正则表达式 ype-”_”<-单选框>name="xb" if )体判断邮箱是否正确 value=""id="xb nan"></span> */){alert("邮箱格式不对！")：yxzq-false;} <span></span><span><input else (yxzq=true;)) style="width:auto;type="radio"name= yhm.onchange-:function（){/∥判断 ””<-和上一个单选框为同一组> 用户名格式是否正确 value="id="xb nv"></span></p> var yhm sj=this.value; <p>&nbsp:&nbsp;&nbsp;&nbsp; var yhmzf=S{1,5;S/;∥用户名 &nbsp;&nbsp;&nbsp;&nbsp;像： 正则表达式 <input type-"_"<l-选择上传 if (!yhmzf.test yhm_sj))(alert 文件->id-"tp"><p> ("用户名格式不对，不能超过五个字符！”) <