web基础知识试题(web前台小测试题)
web基础知识试题(web前台小测试题)</tr> <td>年龄</td> <tr> <td width="100px">姓名</td> <td>性别</td>
一、选择题(1-18题各3分19-36题各2分,共92分)
1.在HTML的<TD>标签中,align 属性的取值是( C )
A. top ; B. middle ; C. center ; D. bottom
<table border="1">
<tr>
<td width="100px">姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20龄</td>
</tr>
</table>
2. CSS样式表根据所在网页的位置,可分为( B )
A.行内样式表、内嵌样式表、混合样式表; B.行内样式表、内嵌样式表、外部样式表;
C.外部样式表、内嵌样式表、导入样式表; D.外部样式表、混合样式表、导入样式表
行内样式:
<html>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
-----------------------------------------------------------------
内嵌样式:
<html>
<head>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
--------------------------------------------------------------
外部样式:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
---------------------
css文件
#div{width:100px;height:100px;background:red;}
#和.区别
.点是使用class引用的,多个控件可以同时使用一个class,一个控件上也可以使用多个class,比如
.tdRed{border:solid 1px red;}
.tdBKblue{background-color:blue;}
<td class="tdRed" />
<td class="tdRed tdBKBule"/>
而ID是在一个页面中唯一的
总得来说class表示泛性的,id表示个性的
比如你所有的按钮都是一个颜色的
.normalButton{background-color:blue;border:solid 0px black;}
对于提交按钮会要做的大一点
#submit{width:100px;height:100px;}
那么你的按钮就是
<input type="button" id="submit" class="normalButton" value="提交" />
普通的按钮就是
<input type="button" id="abcdefg" class="normalButton" value="普通按钮" />
3. 在插入图片标签中,对插入的图片进行文字说明使用的属性是( D )
A.name; B.id; C.src; D. alt
4. 对于<FORM action=″URL″ method=*>标签,其中*代表GET或( C )
A.SET; B. PUT; C. POST ; D. INPUT
Get和post区别
安全性:POST比GET安全;
编码方式:POST方式提交时可以通过HTML文档中的<META>元素设置实体部分的编码方式,而GET方式提交时URI默认的编码方式为ISO-8859-1,不可以在页面中设置;
传输文件大小:POST方式提交文件放在实体部分传输,大小无上限,而GET方式提交文件内容放在URI部分传输,最大为2KB;
请求速度:GET比POST快。
数据传输方式:GET:查询字符串(名称/值对)是在 GET 请求的 URL 中发送的,如:/test/demo_form.asp?name1=value1&name2=value2;POST:查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的。
5. 下列标签可以不成对出现的是( B )
A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉
<p>是段落标签。
在HTML4.01中某些标签(<p><br> <hr> <img> <input> <link>等)允许不成对出现,但是不推荐。在现在的浏览器里,都会“兼容”这些单标签。浏览器解释<p>标签后,碰到一个不对应的标签时,会自动填补</p>。所以<p>标签可以单标签使用,但不推荐。
在HTML5中规定了元素必须始终关闭,也就是标签必须成对出现。
6. 对于标签〈input type=*〉,如果希望实现密码框效果,*值是( C )
A. hidden; B.text ; C. password ; D. submit
7. HTML代码<select name=“name”></select>表示?( D )
A. 创建表格 ; <table>
B. 创建一个滚动菜单; <marquee>
C. 设置每个表单项的内容;
D.创建一个下拉菜单
8. BODY元素用于背景颜色的属性是( C )
A. alink ; B. vlink ; C. bgcolor; D. background
9. 在表单中包含性别选项,且默认状态为“男”被选中,下列正确的是( A )
A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>
C.<input type=checkbox name=sex checked>男;
D.nput type=checkbox name=sex enabled>男
性别(单选框):<input type="radio" value="1" name="sex" checked="checked"/>男
<input type="radio" value="2" name="sex"/>女
角色(下拉框):<select name="role">
<option value="1" selected="selected">教师</option>
<option value="2">学生</option>
</select>
10. 在CSS中下面哪种方法表示超链接文字在鼠标经过时,超链接文字无下划线?( B )
A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};
C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }
11. JavaScript代码: 'abcdefg'.indexOf('D') 结果是( B )
A:0 B:-1 C:3 D:4
Js常用方法
1.substr
substr(start length)表示从start位置开始,截取length长度的字符串。
var src="https://img.aigexing.comimages/off_1.png";
alert(src.substr(7 3));
弹出值为:off
2.substring
substring(start end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。
var src="https://img.aigexing.comimages/off_1.png";
alert(src.substring(7 10));
弹出值为:off
3.indexOF
indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置(从左向右)。没有匹配的则返回-1,否则返回首次出现位置的字符串的下标值。
var src="https://img.aigexing.comimages/off_1.png";
alert(src.indexOf('t'));
alert(src.indexOf('i'));
alert(src.indexOf('g'));
弹出值依次为:-1 0 3
4.lastIndexOf
lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值(与indexOf相反)
var src="https://img.aigexing.comimages/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
弹出值依次为:6 15
5.split
将一个字符串分割为子字符串,然后将结果作为字符串数组返回。
以空格分割返回一个子字符串返回
var s ss;
var s = "1 2 3 4";
ss = s.split(" ");
alert(ss[0]);
alert(ss[1]);
12. <img src="https://img.aigexing.comname">的意思是?( A )
A. 图像相对于周围的文本左对齐; B. 图像相对于周围的文本右对齐;
C. 图像相对于周围的文本底部对齐; D. 图像相对于周围的文本顶部对齐
13. 点击按钮,在ID为“Link”的DIV标签内显示东软实训超链接 下面对该按钮的onClick事件函数描述正确的是:C
A. Link.innerText='<a href="http://www.jb-aptech.com.cn">东软实训</a>';
B. Link.outerText='<a href="http://www.jb-ptech.com.cn">东软实训</a>';
C. Link.innerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>';
D. Link.outerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>'
innerHTML 设置或获取位于对象起始和结束标签内的
HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText和outerText在获取时是相同效果,但在设置时,innerText仅设置标签内的文本,而outerText设置包括标签在内的文本
14.(“24.7” 2.3 ) 的计算结果是( C )
A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7
15. ( B )事件处理程序可用于在用户单击按钮时执行函数
A. onSubmit; B. onClick; C. onChange; D. onExit
属性当以下情况发生时,出现此事件onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面
16. 用户更改表单元素 Select 中的值时,就会调用( D )事件处理程序
A. onClick; B. onFocus; C. onMouseOver; D. onChange
17.onMouseUp 事件处理程序表示( A )
A. 鼠标被释放; B. 鼠标按下; C. 鼠标离开某个区域; D. 鼠标单击
18. 下列哪一项表示的不是按钮( C )
A. type="submit"; B. type="reset"; C. type="image"; D. type="button"
<img src="https://img.aigexing.com/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
19.下面哪一项是换行符标签?( C )
A. <body>; B. <font>; C. <br>; D. <p>
font规定文本字体、大小和颜色:
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
20. 下列哪一项是在新窗口中打开网页文档。( B )
A. _self; B. _blank; C. _top; D. _parent
_blank在新窗口中打开被链接文档;
_self是指在本身这个网页窗口来打开新的网页链接;
_top表示在顶层窗口打开网页链接,即在整个窗口中打开被链接文档;
_parent表示在父窗口打开网页链接;
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>onclick="javascript:window.open('Default.aspx' '_blank');"21. 下面说法错误的是( D )
A. CSS样式表可以将格式和结构分离;
B. CSS样式表可以控制页面的布局;
C. CSS样式表可以使许多网页同时更新;
D. CSS样式表不能制作体积更小下载更快的网页
CSS样式表能为我们实现些什么样的功能?
1、你可以将格式和结构分离。
2、你可以以前所未有的能力控制页面布局。
3、你可以制作体积更小下载更快的网页。
4、你可以将许多网页同时更新,比以前更快更容易。
5、浏览器将成为你更友好的界面
将格式和结构分离
HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和各要素的功能,而让浏览器自己决定应该让各要素以何种模样显示。 但是网页设计者要求的更多。所以当 Netscape推出新的可以控制网页外观的HTML标签时,网页设计者无不欢呼雀跃。 我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都放入表格,用隐式GIF空格 产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪,要想将什么内容迅速加到网页中变得越来越难。 串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。
以前所未有的能力控制页面的布局
<FONT SIZE>能使我们调整字号,表格标签帮助我们生成边距,这都没错。但是,我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度,不可能控制行间距或字间距,我们不能在屏幕上精确定位图象的位置。但是现在,样式表使这一切都成为可能。
可以制作出体积更小下载更快的网页还有更好的消息:
样式表只是简单的文本,就象HTML那样。它不需要图象,不需要执行程序,不需要插件,不需要流式。它就象HTML指令那样快。有了CSS之后,以前必须求助于GIF的事情现在通过CSS就可以实现。还有,正如我先前提到的,使用串接样式表可以减 少表格标签及其它加大HTML体积的代码, 减少图象用量从而减少文件尺寸。
可以更快更容易地维护及更新大量的网页
没有样式表时,如果我想更新整个站点中所有主体文本的字体,我必须一页一页地修改每张网页。即便站点用数据库提供服务,我仍然需要更新所有的模板, 而且更新每一模板中每一个实例实例的 <FONT FACE>。样式表的主旨就是将格式和结构分离。 利于样式表,我可以将站点上所有的网 页都指向单一的一个CSS文件,我只要 修改CSS文件中某一行,那么整个站点 都会随之发生变动。
浏览器将成为你更友好的界面
不象其它的的网络技术,样式表的代码 有很好的兼容性,也就是说,如果用户 丢失了某个插件时不会发生中断,或者 使用老版本的浏览器时代码不会出现杂 乱无章的情况。 只要是可以识别串接样式表的浏览器就 可以应用它。
22. 要使表格的边框不显示,应设置border的值是( B )
A. 1; B. 0; C. 2; D. 3
23. 如果要在表单里创建一个普通文本框,以下写法中正确的是( A )
A. <INPUT>; B. <INPUT type="password">;
C. <INPUT type="checkbox">; D. <INPUT type="radio">
24. 以下有关按钮的说法中,错误的是( B )
A. 可以用图像作为提交按钮; B. 可以用图像作为重置按钮;
C. 可以控制提交按钮上的显示文字; D. 可以控制重置按钮上的显示文字。
<input type="image" src="https://img.aigexing.compic.jpg" onclick="fangfa();"/>
function fangfa(){
document.formname.submit();
document.formname.reset();
}
<input type="submit" value="提交1"/>
<input type="reset" value="重置1"/>
25. 对于代码:<input type="button" value="点一下" onclick="alert('你好')">分析正确的是( C )
A. Onclick表示鼠标移上去的事件; B. 这个代码运行时将报错;
C. 点击这个按扭时弹出提示框,并显示“你好”; D. 必须把alert改为window.alert才能正常运行
26. 对于代码:document.getElementById("div1").innerHTML 说法正确的是( C)
A. 语法错误; B. 这段代码是获得div1标签对象;
C. 这段代码是获得div1标签内的HTML文本; D. 这段代码是获得div1标签包含div1标签在内的HTML文本
27. 要实现层的隐藏 display( D )
A. false; B. hidden; C. ""; D. none
CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
技巧:设置宽高为0,设置透明度为0,设置z-index位置在-1000
28. 以下JavaScript语句弹出的对话框中显示的值是( A )
<script language=”JavaScript”>
var a=10;var b=5;var c=10/5;
if(c==0 || a>5) alert(c “很好”);
else if(c>0 && a<5) alert (c “一般”);
else alert (c ”很差”);
</script>
A. 2很好; B. 0很差; C. 2一般; D. 2很差
var c=10/5;var d=1/2;var e=4/3;
alert(c); alert(d);alert(e); 2/0.5/1.3333333^
29. 在JavaScript中,可以使用Date对象的( A )方法返回一个月中的每一天
A. getDate(); B. getYear(); C. getMonth(); D. getTime()
30. 在进行表单验证时,当填写的文本框信息有错误时,通常会在文本框后面用红色的
特殊字体显示错误信息,那么这种即时错误信息在文本框发生了什么事件后产生的?( B )
A. onFocus; B. onBlur; C. onChang; D. onClick
31. 关于JavaScript说法正确的是( C )
A. JavaScript与Java语法完全一样; B. JavaScript要运行必须安装Java运行环境;
C. JavaScript一般用于在网页上实现数据验证及特效等; D. JavaScript可用于开发Windows应用程序(windows应用程序理论上来讲就是所有能在windows平台上运行的程序 像扩展名为exe com等等)
32.能够返回键盘上的按键对应字符的事件是( B )
A. onKeyDown; B. onKeyPress; C. onKeyUp; D. onMouseOver
33.制作级联菜单功能时调用的是下拉列表框的( B )事件
A. onClick; B. onChange; C. onmouseout; D. onmousemove
34.Window对象的常用方法中哪一个是带有提示信息、确定和取消按钮的对话框( B )
A. open; B. confirm; C. alert; D. comfirm
35、Window对象的常用方法中哪一个是带有提示信息、确定和取消按钮的对话框( B )?
A:alert; B:prompt; C:open; D:confirm;
36、JavaScript是运行在( B )的脚本语言:
A:服务器端
B:客户端
C:在服务器运行后,把结果返回到客户端
D:在客户端运行后,把结果返回到服务器
37、对代码 setTimeout("show()" 100) 理解正确的是( A )。
A:表示100毫秒后调用一次show方法
B:表示每隔100毫秒调用一次show方法
C:有语法错误,要去掉双引号
D:以上说法都不准确
settimeout只执行一次,setInteval没有次数限制。
因为setTimeout(表达式 延时时间)在执行时 是在载入后延迟指定时间后 去执行一次表达式 记住 次数是一次
而setInterval(表达式 交互时间)则不一样 它从载入后 每隔指定的时间就执行一次表达式
所以 完全是不一样的
很多人习惯于将setTimeout包含于被执行函数中 然后在函数外再次使用setTimeout来达到定时执行的目的
这样 函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果
使用的时候各有各的优势,使用setInterval,需要手动的停止tick触发。而使用方法中嵌套setTimeout,可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。
其实两个东西完全可以相互模拟,具体使用那个,看当时的需要而定了。就像for可以模拟所有的循环包括分支,而还提供了do、while一样。
//每60秒执行myFunction()一次
setInterval("myFunction()" 60000);
funcition myFunction(){
alert(’myFunction()’);
}
//每60秒执行一次myFunction()
setTimeout("myFunction()" 60000); //需要函数触发
//如 放置在 body 的 onload事件里面
38、var a = 10; var b = 20; alert(a = b);的运行结果是:( D )。
A:true B:false C:10 D:20
39、html中有一文本框<input type=”text” id=”t1” value=”8”/>,
Javascript中 var a = document.getElementById(“t1”).value; alert(8 a);的结果是( C )
A:8 B:16 C:88 D:8 8
alert(8 parseInt(a)); //16
40、通过javascript控制id=“d1”的div隐藏,使用的代码是( D )
A:document.getElementById(“d1”).style.show = “false”;
B:document.getElementById(“d1”).style.show = “none”;
C:document.getElementById(“d1”).style.display = “false”;
D:document.getElementById(“d1”).style.display = “none”;
三、编程题(共2x15=30分)
1、(15分)在名为webapps的Web应用中某一静态页面代码如下:
<body>
<form action="/webapps/login" method="post"
onSubmit="return validateSub();">
用户名:<input type="text" id="username" name="username" value=""/><br>
密码:<input type="password" id="password" name="password" value=""/><br>
<input type="submit" value="登录"/>
</form></body>
要求:
(1)使用Javascript代码补全validateSub ()方法,用户密码为空时不准提交。(4分)
(2)/webapps/login的servlet对应的Java类是com.neusoft.test.servlet.Login,写出web.xml中/webapps/login对应servlet的相关配置。(6分)
(3)使用User.validate(username password)可以验证用户是否在数据库中存在,返回true是存在,false是不存在,请在servlet的doPost方法中完成用户登录验证的相关代码,
用户验证成功调用response.sendRedirect("main.jsp");失败调用response.sendRedirect("login.html")。(5分)
(1)function validateSub(){
var u = document.getElementById("username").value;
var p = document.getElementById("password").value;
if(u.length == 0 || p.length == 0){ ------------4分
alert("请输入用户名或密码");
return false;
}
return true;
}
没写return -1分或-2分
(2)
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>
com.neusoft.test.servlet.Login
</servlet-class>
</servlet>------------3分
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/servlet/login</url-pattern>
</servlet-mapping>------------3分
servlet-name任意,只要保持一致即可
(3)
String user = request.getParameter("username");------------1分
String pass = request.getParameter("password "); ;------------1分
if(User.validate(user pass)){ ------------1分
response.sendRedirect("main.jsp");------------1分
}else{
response.sendRedirect("login.html");------------1分
}
2、(15分)静态页面代码如下:
<body>
<input type="text" id="input">
<input type="button" value="输入" onClick="doSomething();">
<div id="output">welcome</div>
</body>
请使用Javascript代码补全doSomething ()方法,实现文本框输入内容,div根据输入内容调整的功能。
要求:
(1)当输入的内容是red,blue或black时,对应更改div中的字体颜色。(5分)
(2)当输入的内容是算数表达式时(如:2 3*5),在div中显示计算结果。(5分)
(3)当输入的内容是文字时,在div中显示这些文字。(5分)
function doSomething(){
var input = document.getElementById("input").value;
if(input == "red" || input == "blue" || input == "black"){
document.getElementById("output").style.color=input;
} ------------5分
else{
try{
var s = eval(input);
document.getElementById("output").innerText = s;
------------5分
}catch(e){
document.getElementById("output").innerText = input;
------------5分
}
}
}