web前端的基础考试题

最新推荐文章于 2024-03-16 11:36:04 发布

dear_ranran

最新推荐文章于 2024-03-16 11:36:04 发布

阅读量5.7w

点赞数 40

本文链接：https://blog.csdn.net/zhang_ran123/article/details/56844594

版权

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="#" οnmοuseοver="this.style.background.color='gray';">注册</a>
B.<a href="#" οnmοuseοut="this.style.background-color='gray';">注册</a>
C.<a href="#" οnmοuseοver="this.style.backgroundColor=gray;">注册</a>
D.<a href="#" οnmοuseοver="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 οnlοad="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）————边框四周的空间，距离父容器的距离（四个方向）

dear_ranran

关注

40
点赞
踩
257

收藏

觉得还不错? 一键收藏
1
评论
web前端的基础考试题

Web前端阶段考试一、选择题（每题2分*40=80分）1.下列元素中，为行内元素的是（B）。 A.div B.span C.p D.h32.下列HTML代码中，能在新窗口中打开新浪首页的是（C）。 A. 新浪 B. 新浪 C. 新浪 D. 新浪3.需要创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）。下列 H
复制链接

扫一扫