Web前端测试题多套.docx

Web前端测试题多套.docx

《Web前端测试题多套.docx》由会员分享，可在线阅读，更多相关《Web前端测试题多套.docx（43页珍藏版）》请在冰豆网上搜索。

Web前端测试题多套

前端测试题

试题一

一．选择题

1. 要动态改变层中内容可以使用的方法有（AB ）

 a）innerHTML 

b）innerText 

c）通过设置层的隐藏和显示来实现

d）通过设置层的样式属性的display属性

 2. 当按键盘A时，使用onKeyDown事件打印event.keyCode的结果是（A ）

 a）65 

b）13 

c）97 

d）37 

 3. 在javascript里，下列选项中不属于数组方法的是（B）；

 a）sort（） 

b）length（） 

c）concat（） 

d）reverse（） 

4. 下列哪一个选项可以用来检索被选定的选项的索引号?

（B） 

a）disabled 

b）selectedIndex 

c）option 

d）multiple 

5.希望图片具有”提交”按钮同样的功能,该如何编写表单提交?

（A ） 

 a）在图片的onClick事件中手动提交

b）在图片上添加onSubmit事件

c）在图片的onSubmit事件中手动提交

d）在表单中自动提交

6.下列选项中,描述正确的是（选择两项） 。

（ AD ） 

 a）options.add（new Option（„a‟,'A‟））可以动态添加一个下拉列表选项

b）option.add（new Option（„a‟,'A‟））可以动态添加一个下拉列表选项

c）new Option（„a‟,'A‟）中‟a'表示列表选项的值,‟A'          用于在页面中显示

d）new Option（„a‟,'A‟）中‟A'表示列表选项的值‟a'用于在页面中显示

 7. var emp = new Array（3）; for（var i in emp） 以下答案中能与for循环代码互换的是:

 （选择一项）。

（D ） 

A for（var i =0; i

B for（var i =0; i

C for（var i =0; i

D for（var i =0; i

 8. 制作级联菜单功能时调用的是下拉列表框的（A ）事件。

 a）onChange 

b）onFocus 

c）selected 

d）onClick 

 9. 下列声明数组的语句中，错误的选项是（C ）。

a）Var arry= new Array（） 

b）Var arry=new Array（3） 

c）Var arry[]=new Array（3）（4） 

d）Var arry=new Array（„3‟,‟4‟）

 10. 下列属性哪一个能够实现层的隐藏?

（C ）

 a）display:

fals 

b）display:

hidden 

c）display:

none 

d）display:

” ”

 11. 下列哪一个选项不属于document对象的方法?

（D ）

 a）focus（） 

b）getElementById（） 

c）getElementsByName（） 

d）bgColor（） 

 12. 下列哪项是按下键盘事件（AB ） 

a）onKeyDown 

b）onKeyPress 

c）keyCode 

d）onMouseOver 

13. javascript进行表单验证的目的是（B ）

 a）把用户的正确信息提交给服务器

b）检查提交的数据必须符合实际

c）使得页面变得美观、大方

d）减轻服务器端的压力

 14.display属性值的常用取值不包括（C ） 

a）inline 

b）block 

c）hidden 

d）none 

15. 以下有关pixelTop属性与top属性的说法正确的是。

（D ） 

a）都是Location对象的属性

b）使用时返回值都是字符串

c）都是返回以像素为单位的数值

d）以上都不对

 16. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗口，下列选项正确的是__D__ 

a）open（"x.html","HI","toolbas=1,scrollbars=1,status=1"）; 

b）open（"HI","scrollbars=1,location=1,status=1"）; 

c）open（"x.html","status=yes,menubar=1,location=1"）; 

d）open（"x.html","HI","toolbas=yes,menubar=1,location=1"）; 

 17. 下面关闭名为mydiv的层的代码正确的是（C ） 

a）document.getElementById（mydiv）.style.display="none"; 

b）document.getElementById（"mydiv"）.style.display=none; 

c）document.getElementById（"mydiv"）.style.display="none"; 

d）document.getElementById（"mydiv"）.style.display=="none"; 

 18. javascript中表达式parseInt（“X8X8”）+paseFloat（„8‟）的结果是什么?

（ C） 

a）8+8 

b）88 

c）16 

d）“8”+‟8

19. String对象的方法不包括（C ） 

a）charAt（）；

b）substring（） 

c）length 

d）toUpperCase（） 

 20. 关于setTimeout（“check”,10）中说法正确的是（ D） 

a）程序循环执行10次

b）Check函数每10秒执行一次

c）10做为参数传给函数check 

d）Check函数每10毫秒执行一次

 21. 以下哪个单词不属于javascript关键字：

（C）

a）with 

b）parent 

c）class 

d）void 

二．简答题

1、html5为什么只需要写

doctypehtml>?

    答：

html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，

    否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

2、行内元素有哪些？

块级元素有哪些？

空（void）元素有哪些？

    行内元素有：

abspanimginputselectstrong（强调的语气）

    块级元素有：

divulollidldtddh1h2h3h4…p

  知名的空元素：

    鲜为人知的是：

 3、页面导入样式时，使用link和@import有什么区别？

    两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：

link支持使用Javascript控制DOM去改变样式；而@import不支持。

    补充：

@import最优写法

    @import的写法一般有下列几种：

    @import‘style.css’//WindowsIE4/NS4,MacOSXIE5,MacintoshIE4/IE5/NS4不识别

    @import“style.css”//WindowsIE4/NS4,MacintoshIE4/NS4不识别

    @importurl（style.css）//WindowsNS4,MacintoshNS4不识别

    @importurl（‘style.css’）//WindowsNS4,MacOSXIE5,MacintoshIE4/IE5/NS4不识别

    @importurl（“style.css”）//WindowsNS4,MacintoshNS4不识别

    由上分析知道，@importurl（style.css）和@importurl（“style.css”）是最优的选择，兼容的浏览器最多。

    从字节优化的角度来看@importurl（style.css）最值得推荐。

 4、常见的浏览器内核有哪些？

    使用Trident内核的浏览器：

IE、Maxthon、TT、TheWorld等；

    使用Gecko内核的浏览器：

Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

    使用Presto内核的浏览器：

Opera7及以上版本；

    使用Webkit内核的浏览器：

Safari、Chrome。

 5、html5有哪些新特性？

移除了哪些元素？

如何处理HTML5新标签的浏览器兼容性问题？

如何区分html和html5？

    新增的元素有绘画canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

    内容元素，article、footer、header、nav、section。

    表单控件，calendar、date、time、email、url、search。

    控件元素，webworker,websockt,Geolocation。

    移出的元素有下列这些：

    显现层元素：

basefont，big，center，font,s，strike，tt，u。

    性能较差元素：

frame，frameset，noframes。

    如何处理HTML5新标签的浏览器兼容问题？

如何区分HTML和HTML5？

    处理兼容问题有两种方式：

    1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

    2.使用是html5shim框架

    另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

 6、iframe有哪些优缺点？

    优点：

            1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。

Comet：

基于HTTP长连接的”服务器推”技术

            2.跨域通信。

JavaScript跨域总结与解决办法，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

            3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的historyapi不可用时作为一种替代。

            4.纯前端的utf8和gbk编码互转。

比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

 缺点：

            　1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。

当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。

对一个网站来说这无异于一场灾难。

        　　如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。

你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

　2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。

这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。

访问者遇到这种网站往往会立刻转身离开。

他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

 3、链接导航问题。

使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。

比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

 7、label的作用是什么？

是怎么使用的？

    Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

    FOR属性

    功能：

表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

    用法：

姓名

    ACCESSKEY属性：

    功能：

表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

    用法：

姓名

    局限性：

accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果？

1px;overflow:

hidden;background:

red”>