前端面试题02

[HTML && CSS]
1.Doctype严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?


严格模式:使用此类型的网页,浏览器解析将相对严格,不允许使用任何表现样式的标识和属性,比如在元素中直接使用background-color背景色属性。
混杂模式:浏览器对XHTML的解析较为宽松。允许使用4.01中的标签,但必须符合XHTML的语法。
2:行内元素有哪些?块级元素有哪些?CSS的盒模型?
行内元素:span,a,var ,em,input,img,img,textarea,var,em,strong,select,
块级标签:div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,
CSS的盒模型:CSS布局中的每一个元素,在浏览器的解析中,都被当做一个盒状物。
3.CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式
在html文档的head部分加入:

在html文档的head部分直接写入css文档。
直接在html标签里写入对这个标签的css控制
测试信息

link和@import的区别是link写在html页面中,@import写在CSS页面中
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
CSS选择符: 类选择器 、 标签名选择器、 ID选择器 、 后代选择器(派生选择器)、 群组选择器
可以继承: 类选择器 、 标签名选择器、 后代选择器(派生选择器)、群组选择器
优先级算法:
标签内直接定义:1000
ID选择器:100
类选择器 :10
标签名选择器:1
内联和important中,important优先级高
5:前端页面有哪三层构成,分别是什么?作用是什么?
结构层;主要指DOM节点;HTML/XHTML
样式层;主要是指页面渲染;CSS
脚本层:主要指页面动画效果;JS/AS
6:css的基本语句构成是?
选择符、属性、值
8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
IE6、7、8、FF、Opear、Safari、Chrome、Maxthon
Trident:Windows 下的 IE 浏览器使用的内核代号。除 IE 外,众多的 IE Shell(如 Maxthon )都使用这个内核。

Gecko:Mozilla Firefox 浏览器使用的内核代号。
Presto:Opera 浏览器使用的内核代号,这是目前公认网页浏览速度最快的浏览器内核。
KHTML/WebCore: Konqueror/Safari 浏览器使用的内核代号。
经常遇到的浏览器兼容问题:
1.在有的浏览器中,默认字体大小为12px,所以在设字体大小的时候,最小设为12px,如果在做的过程中,发现字体小于12,可直接作为图片使用
2.a标签对里不能嵌套a标签对
3.若给a标签内的内容样式加上样式,需要设置display:block;(在IE中如果设置宽高会自动变成块,在FF中则不会),但如果设置了float属性,就不需要设置display:block。
4.ul,ol在FF默认情况下,有list-style-type样式和padding值,dl在IE和FF默认情况下,有padding值,所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
8.浮动ie产生的双倍距离
#box{ float:left; 100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离,这时需要设置display:inline; //使浮动忽略}
9.如何居中一个浮动元素?
对其设置margin:x auto;
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
有,HTML5的是目前正在为未来的HTML标准的主要修订的发展。其前任一样,4.01和XHTML 1.1的HTML,HTML5的是一个结构和提交万维网内容的标准。新标准结合了诸如视频播放,拖动和放下以前曾在第三方浏览器插件依赖例如Adobe Flash,微软的Silverlight的功能,和谷歌齿轮。
12:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
把所有的CSS文件都放入一个样式表中,通过把所有的脚本放到一个文件中来减少HTTP请求的方法。js文件也采用同样的方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分。
14:你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
前端界面工程师:1. 与交互设计师、视觉设计师协作,根据设计图完成页面制作。 2. 维护及优化网站前端性能。
前景: 长期以来,国内前端开发在整个软件开发行业内占得比重较小,发展较晚。网站也多倾向于赢利最大化而轻视用户体验。前后端比例悬殊大。近几年来,随着 以用户为中心 的思想普及发展。前端开发呈现出强劲的发展态势,前端开发人员在项目中的重要性日益突出。前端开发人员呈现出严重的人员短缺现象。
[Javascript]
1:js是什么,js和html 的开发如何结合?

js是一种基于对象和事件驱动,并具有安全性的脚本语言。
可以html的三个地方编写js脚本语言:一是在网页文件的标签对中直接编写脚本程序代码;二是将脚本程序代码放置在一个单独的文件中,在网页文件中引用这个脚本程序语言;三是将脚本程序代码作为某个元素的事件属性值或超链接的href属性值。

div{margin: 0;padding: 0;border:1px red solid;}

2.怎样添加、移除、移动、复制、创建和查找节点
添加:append
删除:remove
移动:
复制:
创建:create
查找:
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4.面向对象编程:b怎么继承a
5.看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面,结果又会是什么?
a = 10;
alert(arguments[2] );
6.请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8.什么是闭包?下面这个ul,如何点击每一列的时候alert其index?

这是第一条这是第二条这是第三条

闭包是可以包含自由(未绑定)变量的代码块;这些变量不是在这个代码块或者任何全局上下文中定义的,而是在定义代码块的环境中定义。
9.最近看的一篇Javascript的文章是?
10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
最常用的库:jquery-1.4.2.min.js
常用的前端开发工具:firebug、photoshop、editplus、取色器、色板、eclipse
11.说说YSlow(可以详细一点)
yslow是一个工具,也可以理解成是一个插件,是基于Mozilla Firefox上firebug插件的一个插件。它的出现的主要目的就是检测我们的页面性能。它让用户可以就近取得所需的内容,解决网络拥挤的状况,提高用户访问网站的响应速度;其次,yahoo在ETags配置上也有独特之处,声明过期,就是说,用户从服务器取数据的时候,如果文件变化了,给他反馈新的文件,如果文件没有变化,只需告诉客户端没有变化即可,不必再把文件取回来,这样就节省了大量的网络带宽和资源。另外,只要将那些在加载过程中要执行的脚本放到底部,就可以实现最大的下载并行。
小说网对其评价:(a) 从样式表着手,避免CSS表达式。CSS表达式需要很多资源,有时甚至会造成页面假死。(b) 缓存一下不常修改的文件,并开启 GZIP压缩,减少网络传输时间(c) 减少DNS查找。YSlow认为一个页面上2个以内的域名比较合理。有些网站挂了不少统计代码,或者广告代码。统计拖累用户速度、广告影响用户视觉。(d) 避免重定向(跳转),我们在给链接地址的时候,一般会把链接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ,有区别吗?有!服务器如果接收到的URL是http://xxx.cn/xxx,它会自动重定向到http://xxx.cn/xxx/,虽然进入的都 是同一个页面,但是前者比后者多走了一步,重定向,显然多多少少浪费了一点时间。

Google 对其评价:多数人可能认为GOOGLE没什么值得借鉴的,毕竟整站就那么几行代码。
但是这几行代码,每天要承受过亿的用户访问量,在如此大的压力下,运行流畅,有很大一个因素取决于Minify JS。通过查看它的源代码可以发现,google不仅将JS进行了压缩,连页面代码中也没有不必要的空格和符号,使用了最短最简洁的变量名。联系到开发方 面,建议大家采用yuicompressor,在调试时使用便于开发的模式,调试完成后直接压缩并发布。让用户得到最快捷的用户体验。

原文地址:https://www.cnblogs.com/jasmine1314/p/5367452.html