web前端的基础考试题

Web前端阶段考试
一、选择题(每题2分*40=80分)
1.下列元素中,为行内元素的是(B)。
 A.div
 B.span
 C.p
 D.h3

2.下列HTML代码中,能在新窗口中打开新浪首页的是(C)。
 A. <a src="http://www.sina.com.cn">新浪</a>
 B. <a src="www.sina.com.cn" target="_blank">新浪</a>
 C. <a href="http://www.sina.com.cn" target="_blank">新浪</a>
 D. <a href="http://www.sina.com.cn">新浪</a>

3.需要创建一个多选框,且和文本关联起来(单击文本就像单击核选框一样)。下列 HTML 代码中,正确的是(D)。
 A.<input type="checkbox" /><label>记住我</label>
 B.<input type="checkbox" /><label for="checkbox">记住我</label>
 C.<input type="checkbox" id="c1" /><label>记住我</label>
 D.<input type="checkbox" id="c1" /><label for="c1">记住我</label>

4.下列方法中,能让网页中第5个div隐藏的是(C)。
 A.$("div:5th-child").hide()
 B.$("div:5th-child").hidden()
 C.$("div:nth-child(5)").hide()
 D.$("div:nth-child(5)").hidden()

5.有内部样式表定义如下:
    <style type="text/css">
        p{color:Red;font-size:15pt;}
    </style>
同时,有 html 代码如下所示:
    <p style="background-color:gray;color:Blue;">p text</p>
段落中的文本”p text“的最终显示效果是(A)。
 A.蓝色文本,字体大小为 15pt,背景色为灰色
 B.蓝色文本,默认字体大小,背景色为灰色
 C.蓝色文本,字体大小为 15pt,无背景色
 D.红色文本,字体大小为 15pt,无背景色


6.下列引用外部样式表 style1.css 的语句中,正确的是(D)。
 A.<link src="style1.css" type="text/css" rel="stylesheet" />
 B.<link href="style1.css" type="css"  />
 C.<link src="style1.css" type="text/css"  />
 D.<link href="style1.css" type="text/css" rel="stylesheet" />

7. 查看如下 html 代码:
    <div id="header">
        <a href="help.html">帮助</a>
    </div>
    <p>
        <a href="home.html">主页</a>
        <a href="user.html">个人中心</a>
    </p>
现需要定义样式,实现:当鼠标移入”帮助“链接上时,文本”帮助“的字体大小变为 20pt,而其他链接不变。下列样式定义中,正确的是(D)。

 A.a:hover {font-size:20pt;}
 B.div.header a:hover {font-size:20pt;}
 C.#header a {font-size:20pt;}
 D.#header a:hover {font-size:20pt;}

8.查看如下样式定义:       
  .A  .B { font-weight:bold;}
下列选项中,文本加粗显示的是(C)。
 A.<a class="A">文本A</a>
 B.<a class="B">文本B</a>
 C.<p class="A"><a class="B">文本C</a></p>
 D.<p class="B"><a class="A">文本C</a></p>

9.查看如下 html 代码:
    <div style="float:left;">div text</div>
    <p style="clear:left;">p text</p>
此代码在页面上的显示效果为(A)。
 A.<div> 中的文本和 <p> 中的文本分两行显示,且文本左对齐
 B.<div> 中的文本和 <p> 中的文本在一行上显示,且文本左对齐
 C.<div> 中的文本和 <p> 中的文本分两行显示,且文本右对齐
 D.<div> 中的文本和 <p> 中的文本在一行上显示,且文本右对齐

10. 有样式定义如下:
    div.parent  {
        width:100px;
        height:70px;
        border:1px solid gray;
    }
    div.child  {
        width:80px;
        height:30px;
        border:1px solid black;
        background-color:silver;
    }
同时,有 html 代码如下所示:
    <body>
        <div class="parent">
            <div class="child">1</div>
            <div class="child" style="position:absolute;top:15px;">2</div>
        </div>
    </body>
第二个 div 在页面上的最终位置是(B)。
 A.其上边框距离其父元素(div) 为 15 px 距离
 B.其上边框距离 body 元素为 15 px 距离
 C.其上边框距离其原有位置为 15 px 距离
 D.使用默认位置,定位并未发生改变

11. .需要在 html 页面上引用脚本文件myJs.js,下列语句中,正确的是(D)。
 A.<script language="javascript" href="myJs.js" type="text/javascript" />
 B.<script language="javascript" src="myJs.js" type="text/javascript" />
 C.<script language="javascript" href="myJs.js" type="text/javascript"></script>
 D.<script language="javascript" src="myJs.js" type="text/javascript"></script>

12.查看如下 JavaScript 代码(用于得到录入数值的整数部分):
    function getInt() {
        var str = document.getElementById("txtData").value;
        if ( <<  插入代码1  >> )
            alert("请录入数值");
        else {
            var data = <<  插入代码2  >>;
            alert("整数部分为:" + data);
        }
    }
为实现所需功能,”插入代码1“和”插入代码2“处所需要的代码分别是(C)。
 A. isNaN(str) 和 parseFloat(str)
 B. !isNaN(str) 和 parseFloat(str)
 C. isNaN(str) 和 parseInt(str)
 D. !isNaN(str) 和 parseInt(str)

13.查看如下 JavaScript 代码:
    var a = "10";
    var b = 10;
    if (a == b)
        alert("equal");
    if (a === b)
        alert("same");
此代码运行后,效果为(A)。
 A.只弹出”equal“
 B.只弹出”same“
 C.先弹出”equal“,再弹出”same“
 D.没有弹出显示

14.阅读如下代码:
    var a1 = [1, 2, 12];
    var a2 = [4, 23];
    a1.concat(a2);
    a1.sort();
    alert(a1.join(";"));
代码运行后,alert 方法弹出的内容为(B)。

 A.1;2;12     
 B.1;12;2
 C.1;2;4;12;23
 D.1;12;2;23;4

15.阅读如下代码:
    var str1 = "abc123def456";
    var str2 = str1.replace(/\d+/gi, "*");
代码运行后,str2 的内容为(D)。

 A.abc***def
 B.abc***def***
 C.abc*def
 D.abc*def*

16.html 页面主体的代码如下:
    <body>
        <form>
            <input type="text" id="t1" />
        </form>
    </body>
下列选项中,能向文本框中写入文本的是(AC)。 (多选题)
 A.document.getElementById("t1").value = "aa";
 B.document.getElementById("t1").innerHTML = "bb";
 C.document.getElementsByTagName("input")[0].value = "cc";
 D.document.getElementsByTagName("input")[0].innerHTML = "dd";

17.HTML 页面上有一个超链接,要实现当鼠标移入该超级链接时,超级链接的文本背景色变为灰色。下列选项中,能实现此功能的是(D)。
 A.<a href="#" onmouseover="this.style.background.color='gray';">注册</a>
 B.<a href="#" onmouseout="this.style.background-color='gray';">注册</a>
 C.<a href="#" onmouseover="this.style.backgroundColor=gray;">注册</a>
 D.<a href="#" onmouseover="this.style.backgroundColor='gray';">注册</a>

18. 有数组定义如下:
     var a1 = [1, 14, 4, 12, 23];
现需要实现对数组 a1 中的内容按照数值大小升序排列,下列代码中,错误的是(C)。
 A.a1.sort(new Function("a", "b", "return a-b;"));
 B.a1.sort(function (a, b) { return a - b; });
 C.a1.sort(new function (a, b) { return a - b; });
 D.a1.sort(sortFunc);
    function sortFunc(a, b) {
        return a - b;
}

19. 现需要在页面上实现动态时钟的显示,其 html 代码如下:
    <body onload="initialClock();">
        <span id="mySpan"></span>
    </body>
相应的 JavaScript 代码如下:
    function initialClock() {
        //<< 插入代码 >>;       
    };

    function timerFunc() {
        var v = new Date()
        document.getElementById("mySpan").innerHTML = v.toLocaleTimeString();
    }
为实现所需功能,”插入代码“处所需要的代码是(A)。
 A. window.setInterval(timerFunc,1000);
 B. window.setInterval(timerFunc(),1000);
 C. window.setTimeout(timerFunc,1000);
 D.window.setTimeout(timerFunc(),1000);

20. 下列选项中,不是 window 对象的子对象的是(D)。
 A.location
 B.history
 C.screen
 D.arguments

21. html 页面上有一个 id 值为 s1 的 <select> 元素,现需要使用 JavaScript 代码清空其所有选项,下列选项中,错误的是(D)。
 A.document.getElementById("s1").options.length = 0;
 B.document.getElementById("s1") = null;
 C.while (document.getElementById("s1").options.length > 0) {
             document.getElementById("s1").remove(0);
    }
 D.var selObj = document.getElementById("s1");
   while (selObj.childNodes.length > 0) {
             selObj.removeChild(selObj.lastChild);

22. html 页面上有一个 id 值为 s1 的 <select> 元素,现需要使用 JavaScript 代码向列表中添加一个选项(<option>元素),下列选项中,错误的是(B)。
 A. document.getElementById("s1").appendChild(new Option("aa", 18));
 B. document.getElementById("s1").add(new Option("bb", 18));
 C. document.getElementById("s1").options[document.getElementById("s1").options.length] = new Option("cc", 18);
 D. document.getElementById("s1").options.appendChild(new Option("dd", 18));

23. html 页面上有一个 id 值为 b1 的按钮,现需要使用 JavaScript 代码为其定义单击事件:单击该按钮后,弹出“Hello”。下列选项中,错误的是(C)。
 A.document.getElementById("b1").onclick = function () { alert("hello"); };
 B.document.getElementById("b1").onclick = new Function("alert('hello'); ");
 C.document.getElementById("b1").onclick = new function () { alert("hello"); };
 D.document.getElementById("b1").onclick = clickFunc;
     function clickFunc() {
         alert("Hello");
     }

24.下列哪个样式定义后,行级(非块状)元素可以定义宽度和高度(  C)。
A. display:inline
B. display:none
C. display:block
D. display:inheric

25. 下列哪些是设置有关边框的属性(ABC)(多选题)
    A、border-color
    B、border-style
    C、border-width
    D、border-back

26. 在html文件中应用abc.css文件中的样式的方法有(A B)(多选题)
A、<link href="abc.css" type="text/css" rel="stylesheet">
B、<style type="text/css">@import  url(abc.css);</style>
    C、<style type="text/css">@import (abc.css);</style>
    D、<style type="text/css">import  url (abc.css);</style>

27.下列哪种方式是用类选择器定义样式的(B)
    A、p{color:red;}
    B、.one{color:red;}
    C、#two{color:red;}
    D、p,h1{color:red;}

28. 下列代表无序清单的标签是(   A    )
    A、    <ul>…<li>…</ul>
    B、<ol>…<li>…</ol>
    C、<hl>…<li>…</hl>
    D、< li >…< ol >…</ li >

29. window对象的方法中,(A )方法是用于弹出确认对话框,可让选择“确定”或“取消”
A、confirm() B、alert() C、prompt() D、open()

30. 以下JavaScript变量名不合法的有(AC B)(多选题)?
A、4Myvariable B、My@variable C、function D、Myvariable4

31. 在JavaScript程序中加入注释,方法有(AB)(多选题)
 A、//注释内容  B、/*注释内容*/  C、/注释内容  D、/*注释内容

32. 如果想在一个指定的元素后添加内容,下面哪个是实现该功能的?D
A、append(content) B、prepend(content) C、before(content) D、after(content)

33. 下面对表单的POST提交方式描述不正确的是(   A )。
A. 若直接在地址栏中输入URL按回车按GET方式提交;   
B. 若属性method不指定任何值或者不加属性method,默认按GET方式提交;
C. 只有在method指定为POST时才按POST方式提交;
 D. POST提交是将表单字段信息放置到请求头中;

34. 在jquey中,如果想要从DOM中删除所有匹配的元素,下面哪一个是正确的C
A、delete() B、empty() C、remove() D、removeAll()

35. 如何找到表单中隐藏的div?D
A、$("div:none") B、$("div:invisiable") C、$("div:even") D、$("div:hidden")

36. 在jquery中想要找到div元素的后辈div元素,下面哪一个是可以实现的?C
A、$(div div) B、$(div.div) C、$(div~div) D、$(div+div)

37.关于HTML5说法正确的是:C
A、HTML5只是对HTML4的一个简单升级
B、所有浏览器都支持HTML5
C、HTML5新增了离线缓存机制
D、HTML5书写格式要求必须按照书写规范

38. 关于javascript语言说法错误的是?C
A.JavaScript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。
B.javaScript是网景公司专为Navigator浏览器开发、实现网页内容交互的功能。
C.javascript是由SUN公司开发的。
D.ECMAScript是一个为了规范Javascript语言而产生的国际标准。

39. 表达式5+22/2%2的计算结果是:B
A.5 B.6 C.7 D.8

40. 关于文档对象模型(Document Object Model),如下说法错误的是:C
A. DOM能够以编程方式访问和操作web页面内容。
B. DOM允许通过对象的属性和方法访问页面中的对象。
C. DOM能够创建动态的文档内容,但是不能删除文档对象。
D. DOM也提供了处理事件的接口,它允许捕获和响应用户以及浏览器的动作。


二、简答题(每题5分*4=20分)
1. display:none和visibility:hidden的区别是什么?
    答:display:none 不为被隐藏的对象保留其物理空间
    visibility:hidden 为被隐藏的对象保留其物理空间
    也就是display:;当他的值变成block 的时候,它所在的结构才会被加载进来。
    而visibility就会在加载页面的同时就已经把它加载进来了,
        因为他的值为hidden的时候,它所占的空间还在。
2. 如何居中div?
    答:设置宽度:还设置 margin: 0px auto;
3. 编写一个正则表达式:判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20
    答:var reg=/^[A-Za-z]\w{4,19}$/;
        alert(reg.test("avcd12345"));
4. 使用字符串函数来截取字符串中的efg
     var str="ddfjfjkefg";
        alert(str.substr(7,3))
5. CSS的盒子模型由什么组成?
    1.内容(content)————我们往往给块级元素设置高度和宽度就是内容的高度和宽度
    2.边框(border)————边框的粗细是盒子的一部分(四个边框)
    3.内边距(padding)————内容和边框的距离(四个方向)
    4.外边距(margin)————边框四周的空间,距离父容器的距离(四个方向)







阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhang_ran123/article/details/56844594
想对作者说点什么? 我来说一句

web前端试题,已整理

2017年09月07日 756KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭