前端研发笔试题
备注：请将答案写在答题纸上
一、选择题
1．下面标签嵌套正确的是（D）
A. <ul><p>赶集网</p></ul>
B. <a href="#"><a href="#">赶集网</a></a>
C. <dl><li>赶集网</li></dl>
D.<ol><li>赶集网</li></ol>
2. 在HTML中，（C）可以在网页上通过链接直接打开邮件客户端发送邮件。
A.<a href=”telnet:zhou@126.com”>发送邮件</a>
B. <a href=”mail:zhou@126.com”>发送邮件</a>
C.<a href=”mailto:zhou@126.com”>发送邮件</a>
D.<a href=”ftp:zhou@126.com”>发送邮件</a>
3. 请选出所有的置换元素（ABCD）(多选)
A. img
B. input
C. textarea
D. select
4．下面哪条声明能固定背景图片（A）
A. background-attachment:fixed;
B. background-attachment:scroll;
C. background-origin: initial;
D. background-clip: initial;
5．下列说法正确的是（AB）（多选）
A.display: none；不为被隐藏的对象保留其物理空间；
B.visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；
C.visibility:hidden;产生reflow和repaint(回流与重绘)；
D.visibility:hidden;与display: none;两者没有本质上的区别；
6．以下关于盒子模型描述正确的是（A）
A.标准盒子模型中：盒子的总宽度＝左右margin + 左右border + 左右padding + width
B.IE盒子模型中：盒子总宽度＝左右margin + 左右border + width
C.标准盒子模型中：盒子的总宽度＝ 左右margin + 左右border + width
D.IE盒子模型中：盒子总宽度＝width
7．英文字母全部转为大写正确的是（C）
A. text-transform: capitalize;
B. text-transform: lowercase;
C. text-transform: uppercase;
D. font-weight: bold;
- 页面有一个按钮button id为button1，通过原生的js如何禁用？（A B C D）(多选)
A.document.getElementById("button1").readolny= true;
B.document.getElementById("button1").setAttribute("readolny","true");
C.document.getElementById("button1").disabled = true;
D.document.getElementById("button1").setAttribute("disabled","true");
9．页面有一个按钮button id为button1，通过原生的js 设置背景色为红色？（ A ）
A. document.getElementById('button1').style.backgroundColor="red";
B. document.getElementById('button1').style.backgroundcolor="red";
C. document.getElementById('button1').style.backGroundColor="red";
D. document.getElementById('button1').style.bgcolor="red";
10．使用CSS来格式化网页，共有三种方式，以下哪一种不是( D ).
A. 在HEAD中引用
B. 作为标记来引用
C. 在BODY中引用
D. 作为文件来引用
11.下述有关border:none以及border:0的区别，描述错误的是？( C D )(多选)
A. border:none表示边框样式无
B. border:0表示边框宽度为0
C. 当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0
D. 当定义边框时，仅设置边框宽度也可以达到显示的效果
12．iframe的使用场景有？(A B D C)
A. 与第三方域名下的页面共享cookie
B. 上传图片，避免当前页刷新
C. 左边固定右边自适应的布局
D. 资源加载
13．通常我们在浏览器内容区看到的内容，都是放入在( D ) 之间
A. <!doctype html>
B. <html></html>
C. <head></head>
D. <body></body>
14. 在网站上添加链接使用的标签是(D)
A. title标签
B. img标签
C. meta标签
D. a标签
15．通过分析如下HTML代码，可以得出( B C D )（多选）
<table border="10">
<tr>
<td colspan="2" align="center">员工号</td>
</tr>
<tr>
<td colspan="2" align="center">学历</td>
<td align="center">专业</td>
</tr>
<tr>
<td colspan="2" align="center">毕业学校</td>
</tr>
</table>
A. 该表格共有2行3列
B. 该表格中的文字均居中显示
C. 该表格的边框宽度为10毫米
D. "员工号"单元个跨2列
二、填空题
16．CSS中的_____margin___属性可为元素设置外边距，改变元素的内填充用___padding___属性。
17．对ul li的样式设成无，应该是用什么属性_____list-style: none_________。
18．合理的页面布局中常听过结构与表现分离，那么结构是___html_____，表现是___css_____。
19．在Table中，TR是___行_____，TD是____列____。
三、问答题
20．写出三个javascript中使用this关键字的典型应用场景。
1.全局环境中的this指向全局对象
2.对象内部函数的this指向调用函数的当前对象
3.全局环境函数的this指向全局对象
4.匿名函数中的this指向全局对象
5.setInterval和setTimeout定时器中的this指向全局对象
21．写一段JS代码：判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、
数字、下划线，总长度为5-20。
var reg = /^[a-zA-Z]\w{5,20}$/;
22．AJAX的全称是什么，AJAX技术体系的组成部分有哪些？
AJAX的全称是：Asynchronous Javascript And XML”（异步JavaScript和XML）
主要包含了以下几种技术：
Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
23．请介绍一下XMLhttprequest对象。
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象。
24．请列举五个常用的Javascript DOM方法。
getElementsByTagName() 通过标签名字，获取节点对象的数组
getAttribute() 获取对象的某个属性
setAttribute() 设置对象的某个属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
25．Javascript常用的库有哪些，你的开发经历中使用过哪些？
jQuery
jQuery 是目前最受欢迎的JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的HTML元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。Google、Microsoft、IBM和Netflix等大公司都在网站上使用 jQuery。
requirejs
requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
AngularJS
AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
MooTools
MooTools是一个简洁，模块化，面向对象的JavaScript框架。 它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计 也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等。
YUI Library
UI Library (YUI) 是一个开放源代码的 JavaScript 函数库。UI Library (YUI)的直观的、丰富的API可帮助你构建高性能的desktop、服务器和移动应用程序。为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。此外，UI Library (YUI)还包含了许多CSS 资源。
DevExtreme
DevExtreme包含了功能强大的HTML5,CSS和JavaScript开发框架。如果你想创建漂亮的跨平台和多设备（无论是Windows8设备还是iPad，还是iPhone,Android等智能手机）应用程序，DevExtreme将为你提供了一个全新的解决方案！
Bookmarklet Generator
正如您所料想的，Bookmarklet Generator是一个书签生成器：简单地粘贴常规的JavaScript代码，按下按钮，您会得到一个书签 ——准备安装在您的浏览器栏。
Protorype
Protorype 是一个很独特的JavaScript 库，逐渐成为Web引用开发者的代码基础，被一些大型媒体公司和组织使用。随着版本的更新，Protorype 在性能，用户自定义事件以及同现代浏览器兼容方面越来越完善。
Dojo Toolkit
Dojo 的内核小巧，快速，精深，可用来创建反应灵敏的Web程序，拥有很出色的UI工具，在可访问性，本地化方面也做得很好。
Modernizr
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同 （指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和 CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
VectorDraw web library (JavaScript)
VectorDraw web library (javascript)是 一个矢量图形库，关键是它不但能够打开CAD绘图，而且还能在任何支持HTML5的浏览器中显示通用的矢量对象，包括现在的移动设备Android和 IOS系统上。VectorDraw web library完全采用Javascript编写，并在客户端运行，另外还包含了一个类似DXF和.Net VectorDraw Framework组件的对象模型。
Ligature.js
Ligature.js是一个脚本，能为任何类型的文章增添漂亮的连体字。这是所有排版爱好者必须拥有的！
