web面试题题库(精品文档).doc

1、CSS选择符有哪些？1.id 选择器（ # myid）2.类选择器（ .myclassname）3.标签选择器（ div, h1, p）4.相邻选择器（ h1 + p）5.子选择器（ ul < li）6.后代选择器（ li a）7.通配符选择器（ * ）8.属性选择器（ a[rel = "external"] ）9.伪类选择器（ a: hover, li: nth - child）2.display:none 和 visibility:hidden 的区别是什么？visibility: hidden----将元素隐藏，但是还占着位置display: none----将元素的显示设为无，不占任何的位置3.如何优化网页加载速度？1.减少 css，js 文件数量及大小 (减少重复性代码，代码重复利用 )，压缩 CSS和 Js代码2.图片的大小3.把 css样式表放置顶部，把 js 放置页面底部4.减少 http 请求数5.使用外部 Js 和 CSS4.jQuery 和 JavaScript相比的优缺点？优点：实现了脚本和页面的分离；最少的代码做最多的事（这也是 jQuery 的口号）；性能更好，几乎解决了所有的浏览器兼容问题；缺点：不能向后兼容；插件的兼容性（各版本之间不能很好的兼容），在同一个页面使用多个插件可能会出现冲突现象；稳定性方面也有待提高；5.form 表单中 input 标签的 readonly 和disabled 属性有何区别 ？readonly=“readonly”是只读，不可以修改，disabled=“disabled”是禁用，整个文本框是显示灰色状态form 中 method 是数据传递的方式， action 是与后台数据库提交的6.行内元素和块级元素有什么区别？行内元素不可以设置宽高，不独占一行 ;块级元素可以设置宽高，独占一行。

7.js 中 的基本数据类型？1、数值类型： number2、字符串类型： string3、布尔类型： boolean（true 和 false）4、对象类型： abject （null）5、未定义类型： underfined （underfined ）8.前端技术有哪些？还有哪些相关的书籍？JavaScript jQuery HTML5 CSS3（移动端框架：jQuery mobile Phonegap Bootstra移动端开发工具等）《精通 JavaScript》《锋利的 jQuery》《编写高质量代码：web 前端开发修炼之道》《 SEO教程：搜索引擎优化入门与进阶》9.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近1、实现界面交互2、提升用户体验3、有了 Node.js，前端可以实现服务端的一些事情前端是最贴近用户的程序员，前端的能力就是能让产品从90 分进化到 100 分，甚至更好，参与项目，快速高质量完成实现效果图，精确到 1px；与团队成员， UI 设计，产品经理的沟通；做好的页面结构，页面重构和用户体验；处理 hack，兼容、写出优美的代码格式；针对服务器的优化、拥抱最新前端技术。

10.前端页面有哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层 1）网页的结构层（ structurallayer）由 HTML 或 XHTML之类的标记语言负责创建标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息例如， P 标签表达了这样一种语义： “这是一个文本段 ”（ 2） 网页的表示层（ presentationlayer）由 CSS负责创建CSS对“如何显示有关内容 ”的问题做出了回答 3）网页的行为层（ behaviorlayer）负责回答 “内容应该如何对事件做出反应 ”这一问题这是 Javascript 语言和DOM 主宰的领域11.怎样添加、移除、移动、复制、创建和查找节点（1）创建新节点createDocumentFragment() // 创建一个 DOM 片段createElement_x()// 创建一个具体的元素createTextNode()// 创建一个文本节点（2）添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()（3）查找getElementsByTagName() // 通过标签名称getElementsByName() // 通过元素的 Name 属性的值getElementById() // 通过元素 Id，唯一性12.您最近看的一篇关于 JavaScript的文章是什么答案不定，符合即可13.什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（ content），元素的内边距（ padding），元素的边框（ border），元素的外边距（ margin）四个部分。

这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域 4 个部分一起构成了 css中元素的盒模型14.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素：a、b、span、img、input 、strong、select、label、em、button、textarea块级元素： div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素：即系没有内容的 HTML 元素，例如：br、meta、hr、link、input、img15.简述一下 src 与 href 的区别href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内这也是为什么将 js 脚本放在底部而不是头部。

16.简述同步和异步的区别同步是阻塞模式，异步是非阻塞模式同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率17.浏览器的内核分别是什么 ?IE: trident 内核Firefox：gecko 内核Safari：webkit 内核Opera：以前是 presto 内核， Opera 现已改用 GoogleChrome 的 Blink 内核Chrome：Blink(基于 webkit，Google 与 Opera Software 共同开发 )18.一次完整的 HTTP事务是怎样的一个过程？基本流程：a. 域名解析b. 发起 TCP的 3 次握手c. 建立 TCP连接后发起 http 请求d. 服务器端响应 http 请求，浏览器得到 html 代码e. 浏览器解析 html 代码，并请求 html 代码中的资源f. 浏览器对页面进行渲染呈现给用户19.CSS引入的方式有哪些 ? link 和@import的区别是 ?内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者 CSS2.1以下浏览器不支持Link 支持使用 javascript 改变样式，后者不可20.split() join() 的区别前者是切割成数组的形式，后者是将数组转换成字符串21.document load 和 document ready 的区别Document.onload是在结构和样式加载完才执行jsDocument.ready原生种没有这个方法，jquery中有$().ready(function)22.在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？伪数组（类数组）：无法直接调用数组方法或期望 length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes之类的 ,它们都返回 NodeList 对象都属于伪数组可以使用将数组转化为真正的Array 对象23position 的 absolute 与 fixed 共同点与不同点共同点：1.改变行内元素的呈现方式， display 被置为 block；2.让元素脱离普通流，不占据空间； 3.默认会覆盖到非定位元素上不同点：absolute 的”根元素 “是可以设置的，而 fixed 的”根元素“固定为浏览器窗口当你滚动网页， fixed 元素与浏览器窗口之间的距离是不变的。