失眠网 > Web前端开发技术期末试题与答案2

Web前端开发技术期末试题与答案2

时间：2021-05-29 06:07:11

相关推荐

Web前端开发技术期末试题与答案2

Web前端开发技术试卷（卷）年月考试

级专业

一、选择题（每题1分，共20分）

1．HTML文件的后缀名是。

（A）.tff （B）.html或.htm（C）.js （D）.css

2．下列不可以编辑CSS代码软件是。

（A）Edit Plus （B）Text Pad（C）NodePad （D）ColorImpact

3．<style>标记可以放在下列标记内。

（A）<caption>（B）<head>（C）<script>（D）<body>

4．外部JavaScript文件后缀名通常为。

（A）*.html或*.htm （B）*.txt （C）*.css（D）*.js

5．下列代码中设置5号标题字正确的语句是。

（A）<font size=5>HTML</font> （B）<h*> HTML </h*>

（C）<h5>HTML</h5> （D）<h size=5> HTML /h6>

6．下列属性中不属于<font>标记的属性是。

（A） width （B）size （C） color （D）face

7．以下关于文本格式标记描述正确的是。

（A）<sub>设置上标（B）<b>斜体显示文字（C）<ol>定义列表（D）<del>删除线标记

8. 下列哪一项是在新窗口中打开网页文档。

（A）_self（B）_blank （C）_top （D）_parent

9．以下创建FTP链接的方法，正确的是。

（A）<a href="ftp://ftp." >北京大学FTP</a>

（B）<a href="http://www.pku.." >北京大学FTP</a>

（C）<a href="www." >北京大学FTP</a>

（D）<a href="ftp." >北京大学FTP</a>

10．以下标记中用于定义表格标题的是。

（A）<td> </td>（B）<tr>…</tr>（C）<caption>…</caption>（D）<table> …</table>

11．以下HTML代码中链入外部样式表正确的是。

（A）<script type="text/css" src="layout.css" >

（B）@import url("layout.css");

（C）<link type="text/css" rel="stylesheet" href=”layout.css”>

（D）<link type="text/css" rel="stylesheet" src=”layout.css”>

12．利用框架______属性以实现水平分割框架。

（A）rows（B）cols （C）src（D）name

13．在DOM中通过对象Name访问对象正确方法是。

（A）document.getElementsById("id")（B）document.getElementsByTagName("tagname")

（C）document.getElementById("id") （D）document.getElementsByName("name")

14．通过属性可以设置段落缩进。

（A）word-spacing （B）text-indent （C）text-align （D）text-decoration

15．下列能向页面弹出告警消息框的JavaScript语句是。

（A）“信息正确吗？”（B）<h4>信息正确吗？ </h4><br/>

（C）document.write("信息正确吗？ ");（D）alert("信息正确吗？ ");

16．在JavaScript中，下列表示返回函数计算结果的语句是。

（A）document.write(number); （B） return;（C）return number ；（D）alert(number);

17．在样式表中通过的属性可以设置删除线效果。

（A）text-decoration （B）text-align（C）line-through （D）text-indent

18．无序列表的列表项前产生带圆形符号的type属性值是：。

（A）disc （B） square（C）A （D） circle

19．下面是相对路径的是。

（A）（B） ftp://219.153.40.150

（C）../a.html （D） /a.html

20．下列表达式结果为真的是。

（A）5>"5" （B）1=true （C）Math.round(10.5)>12 （D）NaN==NaN

二、填空题（每空1分，共20分）

1．HTML文档结构是由（1）和（2）两部分构成（用标记名）。

2．在CSS样式中通过（3）符号来添加注释。

3．水平分隔线宽度的取值可以用（4）、（5）为单位表示（用汉字表达）。

4．在<a>标记中指向超链接显示的文字的属性是（6）。

5．在HTML文件中，超链接可以分为内部链接和（7）。

6．表格的表头可以使用<td>设置，也可以使用（8）来设置。

7．在<form>中设置一个普通按钮必须指定<input>标记的type属性取值为（9）。

8．在.td1{color:red;}中td1是（10）选择符，在a:hover{text-decoration:none;}中a:hover是（11）选择符。

9．定义一个变量today为Date对象的语句是（12）。

10．CSS中设置颜色的方法有四种，分别是直接用颜色的英文名称、十六进制数、RGB函数（整数）、GRB函数（（13））。

11．CSS中border属性用来同时设置边框（14）、（15）、（16）。

12．在字符串中str1中查找子字符串”a”的方法是str1. （17）（”a”，0）。

13．子框架必须放在<frameset>标记内，浮动框架必须放在（18）标志内。

14．将Array类型变量stu的数组元素用“-”串连起来用stu. （19）方法。

15．表达式10==”10”的值是（20）。

三、看图编程（每空2分，共36分）

1．右图显示效果，完善程序代码（4分）。

填充说明：（1）2号标题字显示“HTML基础”；（2）段落向右对齐。

<html>

<head>

<title>HTML基础</title>

</head>

<body>

___(1)___

<p ___(2)__>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词,HTML 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。</p>

</body>

</html>

2．按右图页面效果，完成代码填充（8分）。

填充说明：（3）实线边框；（4）图片向右浮动；（5）应用样式pic；（6）图片为"img1.gif"。

<title> 内容环绕图片 </title>

body{width:400px;height:400px;}

.div{padding:10px;border:1px __(3)__ #6600ff;}

.pic{____(4)_____;}

h1{font-weight:blod;}

p{font-size:20px; color:black;}

</style>

</div>

<p>    又遇到一些人说：“这儿子不孝，让老子走路他骑驴。”当老头骑上驴让儿子牵着走时，又遇到人说：“这老头身体也不错呀，让儿子在下面累着。”老头子只好让两人一起骑驴，… “看看两个懒骨头，把可怜的驴快压爬下了。 </p>

<p>    ”老头子…，坠落河中淹死了。</p>

3．按右图页面效果，完成代码填充（12分）。

填充说明：（7）行内容垂直居中；（8）字体粗细属性；（9）颜色为红色；（10）边框颜色属性；（11）跨5列居中；（12）应用样式red。

tr{text-align:center;

vertical-align:___(7)__;

height:18px;}

td{___(8)___:bold}

.red{__(9)__;}

<caption><font face="黑体" size="3" color="#000000">课程汇总表</font></caption>

</tr>

<tr>

<td>数据结构</td> <td>Java程序设计</td>

<td>Web前端开发技术</td>

</table>

4．按右图页面效果，完成代码填充（12分）。

填充说明：（13）通过pwd取表单密码文本框的值；（14）密码为null；（15）逻辑与；（16）类型为密码；（17）普通按钮；（18）事件句柄：单击事件。

function checkpwd(){

var pwd1=__(13)__;

if (pwd1=="" || __(14)__ ) //为空或不输入时

{ alert("密码不能空！");}

else

{ var firstchar=pwd1.charAt(0);

if (firstchar>="0" __(15)___ firstchar<="9") //首字符不能为数字

{

alert("密码必须以字母开关头！");

}else {if (pwd1.length<6 || pwd1.length>20)

{ alert("密码长度大于等于6且小于等于20！"); }

}}}

</script>

用户名：<input type="text" name="username" ><br>

密  码：<input type="__(16)__" id="pwd" name="pwd"><br>

</fieldset>

</form>

四、编程题（12分）

1．表单编程（6分）。

按照如下要求编程实现如图所示页面布局效果。

（1）页面标题为“教学信息反馈”；

（2）表单中添加2个文本框、1个列表框、1个文本区域、1个提交按钮、1个重置按钮，其中学号文本框最大长度为10、姓名文本框最大长度为8、文本区域为5行30列；列表框设3个列表项，分别为“Web前端开发技术”、“ 数据结构”、“ Java”，第1 个列表项为预选项。

（3）用3号标题设置页面上的“教学信息反馈”；

（4）使用域和域标题标记进行界面设计。

2．JavaScript编程（6分）

计算n个随机2位数的和，如下图所示。

（1）通过提示框输入数N；

（2）采用do while循环结构实现计算；

（3）用随机函数产生任一2位正整数，并逐个输出到屏幕上；

（4）编写computer_sum(num)函数，实现计算num个随机2位整数的和；

（5）将计算结果直到输出在页面上；

参考数学函数：round():四舍五入；floor():下舍入；ceil()：上舍入。

五、问答题（12分）

1．举例说明至少含有2个以上上层项目的定义列表的语法格式（5分）

2．按要求写出id为“div_top”的样式表。（4分）

上下边距：30px，左边距：40px，右边距50px；

宽度：200px，高度：150px。

3．写出JavaScript核心对象Number常用的两种方法分别是什么？（3分）

参考答案

选择题（每题1分,共20分）

（1） <head>（2） <body>

（3）/* [注释] */ （4）像素[px]

（5）百分比[%] （6） title

（7）外部链接（8） <th>

（9）button （10）类

（11）伪（12） var today=new Date();

（13）百分比[%] （14）[边框]宽度

（15）[边框]样式[线型]（16） [边框]颜色

（17）indexOf （18） <body>

（19）join(“-”) （20） true

看图填充程序（每空2分，共36分）（1） <h2> HTML基础</h2>（2） align="right"

（3）solid （4） float: right

（5）class="pic" （6） src="ico_7l.gif"

（7）middle （8） font-weight

（9）color:red （10） bordercolor

（11）colspan="5"（12） class="red"

（13）myform.pwd.value（14） pwd1==null

（15）&&（16） password

（17）button （18） onclick

四、编程题（每题6分，共12分）（超出页面转反面）<title> 教学信息反馈 </title> （0.5分）

<body>

<fieldset> （结构正确给0.5分）

<legend><h3>教学信息反馈 </h3></legend> （0.5分）

<form method="post" action=""> （0.5分）

学号：<input type="text" size=10 name=""> （0.5分）

姓名：<input type="text" name="" size=8><br> （0.5分）

课程：<select name="" >

<option value="1" selected>Web前端开发技术</option> （1分）

<option value="2">数据结构</option> （0.5分）

</select> <br>

教学反馈意见：<br><textarea name="" rows="5" cols="40">请输入意见</textarea><br>（0.5分）

</form> （每写对1个给0.5分，合计1分）

2．JavaScript编程

<title> 计算N个随机2位整数的和 </title>

<!--

function computer_sum(num){

var i=1,sum=0; （0.5分）

document.write("<br>"+num+"个随机2位整数：");

{

var num_2=Math.floor(Math.random()*90+10); （1分）

sum=sum+num_2;（0.5分）

i++;

document.write(num_2+" "); （0.5分）

}

while (i<=num); （结构正确给0.5分）

return sum;

//-->

<h4>计算N个随机2位整数的和</h4> （0.5分）

var n=prompt("输入数N：",10); （1分）

if (n!="" || n!=null && (n>=0 && n<=50)) （1分）

{ document.write("<br>"+n+"个随机2位整数的和="+computer_sum(n)); } （0.5分）

答： <dl> （1分）

<dt>教材</dt>（1分）

<dd>Java程序设计</dd> （1分）

<dd>Web程序设计</dd>

<dt>实验指导书</dt> （1分）

<dd>Java程序设计指导书</dd> （1分）

<dd>Web程序设计指导书</dd>

</dl>

上下边距：20px，左边距：30px，右边距40px；

答：#div_top{ (1分)

Margin:20px 40px 20px 30px; (1分)

Width:200px; (1分)

Height:150px; (1分)

}

答：Number常用的两方法分别是：

toString(radix); (1.5分)toFixed(小数点位数) 。 (1.5分)

如果觉得《Web前端开发技术期末试题与答案2》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。