网上有这套题的答案,版本也很多,我做了很多参考。本文就当个小笔记,可能有错误,还望指正~

 

第1章  Html篇

1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么?

浏览器类型

内核

Firefox

Gecko

搜狗、谷歌chrome

WebKit

360

Chromium+Trident

2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

3. Quirks模式是什么?它和Standards模式有什么区别?

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,I E的宽度和高度还包含了 padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题。

可以设置行内元素的高宽:在Standards模式下,给span等行内元素设置width和height都不会生效,而在quirks模式下,则会生效。

可设罝百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置—个百分比的高度是无效的。

margin0 auto设罝水平居中在IE下会失效:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。Quirks模式下的解决办法,用text-align属性。

设罝图片的padding会失效。

Table中的字体属性不能继承上层的设罝

white-space: pre会失效

http://blog.sina.com.cn/s/blog_675e54810101ce0b.html

4. img的alt与title有何异同? strong与em的异同?

img 元素向网页中嵌入一幅图像,img标签有两个属性分别为alt和title。

alttitle的相同点:

同属于img的属性,可以替代图片显示为文本。

不同点:alt是图片在无法正确显示的时候起到文本替代的作用,title在鼠标滑过时显示的文字提示。

5. 请描述一下 cookies,sessionStorage 和localStorage 的区别?

共同点:都是保存在浏览器端,且同源的。

区别:

①cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。

② 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

③ 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

④ 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

⑤ Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

⑥ Web Storage 的 api 接口使用更方便。

6. 简述一下src与href的区别。

src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

7. 知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

微格式(Microformats)是一种让机器可读的语义化XHTML词汇的集合,是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点:将智能数据添加到网页上,让网站内容在搜索引擎结果界面可以显示额外的提示

8. 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,—次js请求一般情况下有哪些地方会有缓存处理?

dns缓存,cdn缓存,浏览器缓存,服务器缓存。

9. —个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加 载,给用户更好的体验。

  • 图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
  • 如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
  • 如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。
  • 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
  • 如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

10. 谈谈从前端角度出发做好SEO需要考虑什么?

  • 了解搜索引擎如何抓取网页和如何索引网页

  你需要知道一些搜索引擎的基本工作原理,各个搜索引擎之间的区别,搜索机器人(SE robot 或叫 web crawler)如何进行工作,搜索引擎如何对搜索结果进行排序等等。

  • Meta标签优化

  主要包括主题(Title),网站描述(Description),和关键词(Keywords)。还有一些其它的隐藏文字比如Author(作者),Category(目录),Language(编码语种)等。

  • 如何选取关键词并在网页中放置关键词

  搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词(一般在5个上下),然后针对这些关键词进行优化,包括关键词密度(Density),相关度(Relavancy),突出性(Prominency)等等。

  • 了解主要的搜索引擎

  虽然搜索引擎有很多,但是对网站流量起决定作用的就那么几个。比如英文的主要有Google,Yahoo,Bing等;中文的有百度,搜狗,有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系,比如AOL网页搜索用的是Google的搜索技术,MSN用的是Bing的技术。

  • 主要的互联网目录

  Open Directory自身不是搜索引擎,而是一个大型的网站目录,他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的,主要收录网站主页;搜索引擎是自动收集的,除了主页外还抓取大量的内容页面。

  • 按点击付费的搜索引擎

  搜索引擎也需要生存,随着互联网商务的越来越成熟,收费的搜索引擎也开始大行其道。最典型的有Overture和百度,当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站,这里面也大有优化和排名的学问,你得学会用最少的广告投入获得最多的点击。

  • 搜索引擎登录

  网站做完了以后,别躺在那里等着客人从天而降。要让别人找到你,最简单的办法就是将网站提交(submit)到搜索引擎。如果你的是商业网站,主要的搜索引擎和目录都会要求你付费来获得收录(比如Yahoo要299美元),但是好消息是(至少到目前为止)最大的搜索引擎Google目前还是免费,而且它主宰着60%以上的搜索市场。

  • 链接交换和链接广泛度(Link Popularity)

  网页内容都是以超文本(Hypertext)的方式来互相链接的,网站之间也是如此。除了搜索引擎以外,人们也每天通过不同网站之间的链接来Surfing(“冲浪”)。其它网站到你的网站的链接越多,你也就会获得更多的访问量。更重要的是,你的网站的外部链接数越多,会被搜索引擎认为它的重要性越大,从而给你更高的排名。

  • 合理的标签使用 

 

 

 

第2章   Css篇:

1. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

最基本的:设置display:none,或者visibility:hidden

技巧性:设置宽高为0,设置透明度为0,设置z-index位置在-1000

2. 超链接访问过后hover样式就不出现的问题是什么?如何解决?

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

3. 什么是Css Hack? ie6,7,8的hack分别是什么?

针对不同的浏览器写不同的CSS code的过程,就叫CSS hack。

 

4. 行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

  内联元素(inline)特性:

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。

  那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些

  答案:<input> 、<img> 、<button> 、<textarea> 、<label>。

5. Rgba()和opacity的透明效果有什么不同?

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

6. css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

  垂直方向:line-height

     水平方向:letter-spacing

   那么问题来了,关于letter-spacing的妙用知道有哪些么?

  答案:可以用于消除inline-block元素间的换行符空格间隙问题。

7. px和em的区别。

 什么是pxem
px像素(Pixel)。相对长度单位。 像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册);em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸 未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册);px和em的用法px.是绝对长度单位多我们会将它用于设置页面的宽度和高度等 一些绝对的布局和定上,而em则用之来设置字体的大小等一些相对定位;

 pxem的区别
1.IE无法调整那些使用px作为单位字体的大小;
2.国外的大部分网站能够调整字体大小的原因在于其使用了em作为字体单位;
3.Firefox能够调整px和em,在我国但是96%以上网民使用IE浏览器(或内核)。

1em=16px

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。

8. 描述一个“reset”的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同处?

不同的浏览器对一些元素有不同的默认样式,Normalize.css 和 Reset CSS都是用来重置浏览器默认样式。

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值,只重置不同默认样式的差异,可以说css reset的高级版。

相对于普通的css reset,Normalize的的浏览器的兼容性更好,毕竟是专业人士经过不同版本浏览器测试打造的css文件,看看它的兼容性就知道多强悍:Google Chrome (latest)、Mozilla Firefox (latest)、Mozilla Firefox ESR、Opera (latest)、Apple Safari 6+、Internet Explorer 8+

9. Sass、LESS是什么?大家为什么要使用他们?

相同点:两者都是CSS预处理器,都具有相同的功能,可以帮助我们快速编译代码,帮助我们更好的维护我们的样式代码或者说维护项目吧。
不同点:语法规则不同,当然功能或许略有差别
我选择Sass的原因:
1、Sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护
2、Sass对于我来说参考的教程多
3、Sass有一些成熟稳定的框架,特别是Compass,新秀还有Foundation之类
4、还有一个原因是国外讨论Sass的同行要多于LESS

10. display:none与visibility:hidden 的区别是什么?

  • display : 隐藏对应的元素但不挤占该元素原来的空间。
  • visibility: 隐藏对应的元素并且挤占该元素原来的空间。

   即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

 

第3章  Javascript:

 1. JavaScrip的数据类型都有什么?

基本数据类型:String,boolean,Number,Undefined, Null

  引用数据类型:Object(Array,Date,RegExp,Function)

2. 己知ID的Input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

document.getElementById(“ID”).value

3. 希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

 

4. 当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?

 

5. 什么是Ajax和JSON,它们的优缺点。

 

http://blog.sina.com.cn/s/blog_8a30865f0101amjh.html

6. 看下列代码输出为何?解释原因。

var a;

alert(typeof(a));

alert(b);

 

  解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

7. 看下列代码,输出什么?解释原因。

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.vaIue);

输出2.

8. 说出以下函数的作用是?空白区域应该填写什么?

 

9. (设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)回答出基本概念和过程即可。

a)       给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

b)      mousedown事件触发后,开始拖拽

c)       mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

d)      mouseup时,拖拽结束

e)       需要注意浏览器边界的情况

 10.原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。