《Web开发技术试题参考答案(A)-评分标准(计算机及软件12级)》由会员分享，可在线阅读，更多相关《Web开发技术试题参考答案(A)-评分标准(计算机及软件12级)（7页珍藏版）》请在金锄头文库上搜索。
1、- 1 -吉林建筑大学2015/2016 学年一学期期末考试参考答案(A 卷)科目：Web 开发技术 考试班级:计算机 12、软件 12 考试方式：半开卷 命题人签字： 教研室主任签字： 教学院长签字：一、简答 (每题 4 分，计 24 分)1. 客户端技术主要包括哪几方面？ 【答】 【HTML、CSS、脚本语言 (如Javascript)、XML】2. 解读如下URL：http:/ 【其中http是超文本传输协议；是服务器名；newjliae/是文件夹；stylenew111.htm是文件名。 】3. 万维网Web架构的三处技术精华是什么？【答】 【用超文本技术（HTML）实现信息与信息的连
2、接；用统一资源定位技术（ URI）实现全球信息的精确定位；用新的应用层协议（HTTP ）实现分布式的信息共享。 】4. 这是XML文档的序言部分，请解释其中各部分含义？【答】【声明（如果有，就必须置于第一行） ，版本、编码、是否需要外部文件（no表示需要） 】【文档类型声明， “客户列表”是根元素；cml.dtd是外部文档的URL】【处理指令， “xml-stylesheet type=text/xsl”样式表类型；href=cml.xsl?，外部样式表文档URL 】5. 简述HTML和XML的异同？【答】 【同源SGML；同为置标语言；HTML 是实例，不可扩展，XML可自扩展； HTML作
3、用是表现，XML主要是数据；XML最终以HTML表现；】6. CSS中，代码“#allmargin: 0 auto; ”，起什么作用？其中“all”是某个DIV 的id。 【ID选择符；双属性（上下和左右） ；上下间距设为0，左右间距自动，将DIV水平居中， 】二、读程序回答问题之一(计 25 分)1. (每空 2分，计 4分)（1） this.value 代表哪个对象的值？ 【this ，当前对象，指名为“pwd2”的“input” 】（2） this.form.pwd1.value 如何解释？【当前的“form”的名为“pwd1 ”的对象的值】2. (每空 3分，计 3分)如下 CSS代码
4、，其中“logoLink ”是一个DIV 的ID，请解读最后3 行？【/*绝对定位，结合下面2条，固定相对于浏览器的位置*/】#logoLinkdisplay:block;width:320px;height:81px;background:url(./img/7-2.gif) no-repeat;position:absolute; /* */top:20px;left:0; 3. (每空 3分，计 9分)function getInnertext() alert(document.getElementById(td1).innerText);function setInnertext()
5、str1=document.getElementById(td1).innerText;- 2 -document.getElementById(td11).innerText=str1;第一格内容第二格内容FirstnameLastnamePeterGriffininerText内容（1）第一个按钮方法点击后，执行完的结果是？【获取上面表格第一格（id=td1 ）内容并通过Alert 显示】（2）第二个按钮方法执行完的结果是？【获取上面表格第一格（id=td1 ）的内容赋值给“str1 ”，并将内容写入第二个表格第一格（id=td11） ，内覆盖原内容】（3）超链接的作用是？【执行一段Jav
6、aScript 代码，相当于按钮；弹出警示框，其内容是第二个表格第一行的所有文本内容，即Firstname Lastname或第一格内容Lastname】4. (每空 3分，计 9分)Div+CSS的网页布局（ IE6不支持，请在火狐等演示）* margin:0px;padding:0px;#top,#nav,#mid,#footerwidth:500px;margin:0px auto;#topheight:80px;background-color:#DFDFDF;#navheight:25px;background-color:#FFFFCC;#midheight:300px;#left
7、width:98px;height:298px;border:1px solid #999;float:left;background-color:#CCCCCC;#rightheight:298px;background-color:#CCCCCC;.contentwidth:190px;height:198px;background-color:#FF0000;border:1px solid #999;float:left;#abackground-color:#f60;float:left;#bbackground-color:#FFCC99;float:right;#cwidth:3
8、98px;height:98px; background-color:#FFCCCC;- 3 -#footerheight:80px;background-color:#E4E4E4;顶部广告区 导航区 文章列表区内容A内容B内容C底部版权区（1） 本段代码实现效果如图，请解释一下，代码中哪部分？如何实现了“内容A”和“内容B”的这种并排显示的效果？【#a float:left;和#b float:right;；浮动属性消除了div的块状属性，可以并排了；在rightdiv中，分别向左向右浮动；或，也可答前一个向左浮动，下一个流到其并排】（2） 这种方法实现排版的好处是什么？【div布局，fl
9、oat属性可以实现并排等；div 并排对称均匀平行布局；或，若上问答第二种，则答，DIV并排的布局效果，而且这样做可以保证没有缝隙！】（3） 这句“#left border:1px solid #999; ”代码如何解释？【3属性，线宽、线型、颜色】三、读程序回答问题之二(计 21 分)1. （每空3分 计9 分）解读下面 xsl文档代码，在【】里对对应的代码行加注释使用xsl:node-name 输出标记名称 “ 】2. （每空4分，计 8分）代码如下，运行，显示左图；当鼠标移到“贡献度”标签上时，显示右图， ，请详细解读代码，回答- 4 -（1）找出哪些代码实现了这种“显示隐藏”效果？【第
10、一个(/ 显示tbody上面)循环遍历表格“id=labeltable”中所有单元，即表格中各个单元格“td” ；将其类名“.className”即“td”属性“class”的值都重新赋值为label-normal，也就是都统一了样式类为正常那个；循环后面的“labeltable.cellsn.className=label-select;”将实参传递过来的那个“n”对应的“td”的属性“class”的值赋值为label-select，即鼠标悬停的对象的样式类被改变】 （2）如何实现的？【在“id=labeltable”表格中，鼠标悬停在各个单元格文字上时，驱动不同参数的selCard(n)函
11、数，结合前一个空的问题，先通过for循环将所有单元格“td”样式类都设为label-normal，再将鼠标悬停对应的那个“n”所对应的单元格“td”样式类设为label-select。当然，这都是通过“id=labeltable”表格对象下的cells集合中的对象的“.className”属性的属性值的改变实现的 】交互式标签式表格.label-normalbackground-image:url(images/labelbgselect.gif);cursor:hand;font-size:13px;color:#000000;text-align:center.label-selectba
12、ckground-image:url(images/labelbgnormal.gif);cursor:hand;font-size:13px;color:#FF0000;font-weight:bold;text-align:centerfunction selCard(n)for(i=0;i排行榜贡献度其他教育部“十二五”本科教学工程table1（显示隐藏的那部分）有 2 个”tbody”，循环使所有 2 个的 .style.display=none（不显示） ；再将实参”n” （所选择的那个，值为0、1 、 2）对应的样式的 display 属性赋值为block （显示） ；第二个(/显
13、示 tbody 下面 )循环 2 行语句，以及循环后面的 ”table1.tBodiesn.style.display=block;”这上面这些，都是实现表头样式变化的（标签选中）！- 5 -全校核心通识课程建设项目公布GSL5.0系统上线预告GSL过程管理问题答疑3. (4分)下面是一个内部DTD的XML文档，请解释其中 “!ENTITY”及用法【实体，实际上起一种类似“宏” 的作用，一些常用的或者不便于直接书写的文字或数据，可以用一个标识定义下来，在数据中可以直接引用，这就是实体。实体的引用通过“&”来引用，末尾加“;” 。 】jane,四、编程题与计算(计 14 分)1. (7分)交换图
14、像。同级目录下有文件夹“images” ，里面有图片“tu.jpg” 、 “tu1.jpg”和“tu2.jpg” 。实现，表格居中，2列，左侧2 个格，右侧 1个格，右侧格内原有图片“tu.jpg” ，当鼠标在图片上时，图片变为“tu1.jpg” ，当鼠标离开时，图片变为“tu2.jpg ”。【答】【function over()document.aaa.src=images/tu1.JPG function out()document.aaa.src=images/tu2.JPG“”- 6 -】2. (7分)设计一个表单，简单前台验证。1个文本框，其中输入邮件地址，若输入的地址中不含 “”，
15、当输入结束离开文本框时，弹出警示框，说， “您的E-mail地址不合法，请重新输入！”若包含“” ，则弹出警示框“验证成功！”【答】【function CheckMail()var str=document.getElementById(mail).value; var n=str.indexOf(); if(n=-1) alert(您的E-mail地址不合法，请重新输入);return false;alert(验证成功！);邮箱校验】五、编程题与计算(计 16 分)3. (8分)设计一个课堂随机提问的页面：提示输入班级人数，一个文本框可输入人数；一个显示“随机提问”的按钮，点击按钮，弹出警示框，其上显示“请XX号同学回答问题！” ，其中“XX ”为随机生成的，范围在前面文本框中输入数字范围内的数字。【答】【function askStu()var x=document.getElementById(num).value;var n=Math.round(Math.random()*x)+1;alert(请+n+号同学回答问题！);请输入班级人数：进行提问：】4. （8分
