Web面试题总结
来源:互联网 发布:淘宝开店查看店铺流量 编辑:程序博客网 时间:2024/06/05 09:16
1、你经常去的技术网站有哪些?如何获取技术方面的知识?
CSDN,Google,Baidu,开源中国社区,w3cschool,Google代码库,stackoverflow
2、html中的几种定位?
1、static(默认) 。当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。
2、relative(相对定位)。在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。有一点需要注意的是,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。
3、absolute(绝对定位)。如果你想在一个文档(Document)中将一个元素放至指定位置,你可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。
4、fixed(固定定位)。我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果我想让一个元素定位的参照物总是整个文档(viewport),怎么办呢?答案是使用fixed定位,fixed定位的参照物总是当前的文档。
5、float(浮动)
*浮动会将元素从文档流中删除,他的空间会被其它元素补上。
*浮动的参数物是父元素,是在父元素这个容器中飘。
*为了清除浮动造成的对浮动元素之后元素的影响,我们在浮动元素之后加一个div,并将这个div的clear设置为both。
*如果两个元素都设置了浮动,则两个元素并不会重叠,第一个元素占据一定空间,第二个元素紧跟其后。如果不想让第二个元素紧跟其后,可以对第二个浮动的元素使用clear。
3、IE和FireFox的事件绑定一样吗?
不一样。
IE: element.attachEvent(“onclick”, function)
element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true)
element.removeEventListener(“click”, function, true)
4、IE和FF的事件处理机制方式不同?
不一样,具体参考http://younglab.blog.51cto.com/416652/274132
5、javascript继承的实现
三种方法。参看http://www.jb51.net/article/19629.htm
6、js处理网站设计中的跨域问题?jsonp
Jsonp参考:http://blog.csdn.net/b10090120/article/details/8945304
跨域问题参考:http://blog.csdn.net/b10090120/article/details/8945320
7、浮动的作用及其用法
在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。
参看文档:http://www.bobd.cn/design/web/htmlcss/200909/35195.html
8、javascript实现图片放大的功能
代码参考:http://www.blueidea.com/tech/web/2009/7087.asp
步骤主要有四步:
1、将原始图片的width和height同比例放大,显示在放大框中(当然放大框中不能显示出图片的全貌,只能显示出左上角的部分)
2、计算鼠标的x,y值
3、计算浏览框的top和left属性(this指代的是原始图片)
top:pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2
left:pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2
4、设置放大图片的top和left值
'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
5、其他细节处理
9、Javascript中原型protype使用
参考文档:http://www.jb51.net/article/23052.htm
10、微博中@功能实现
参考文档:http://blog.csdn.net/b10090120/article/details/8946464
IE、FF下面CSS的解释区别、IE、FF下面脚本的区别
1.png透明背景,FF下面没有问题,IE需要用滤镜通道。
2.z-index在IE、FF下面的解释问题,IE会认为第一个z-index=0。
3.长字符串,word-wrap:break-all可以解决IE,但是FF需要overflow:hidden才行。
1、IE有outerHTML,FF没有。
2、页面元素id,IE可以直接取,FF必须document.getElementById()。
3、Ajax里边FF是new XMLHttpRequest,而IE是try new ActiveXObject(’Msxml2.XMLHTTP’) try new ActiveXObject(’Microsoft.XMLHTTP’)
4、window.event:表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象。
5、获取事件源:IE用srcElement获取事件源,而FF用target获取事件源
6、添加,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
7、获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)
8、document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以
9、input.type的属性
IE:input.type只读
FF:input.type可读写
10、 innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持innerText
FF下面实现outerHTML
function getOutter(ele){
var child = document.getElementById(ele);
var newNode = document.createElement("div");
newNode.appendChild(child);
//document.body.appendChild(newNode);
return newNode.innerHTML;
}
web前端技术的展望
答:javascript ajax;flash AS;Flex;Sliveright
设置文字居中:center;text-align:-moz-center
父级绑定事件,利用事件冒泡
var ul = document.getElementById(“a”);
Ul.onclick = function(e){
e = e || event ;
var target = e.srcElement || e.target ;
if(target.tagName == ‘li’ ){}
}
对String进行扩展,使其具有删除前后空格的功能
String.prototype.trim = function(){
return this.repalce(/(^\s*)|(\s*$)/g,’’);
}
浏览器进行判断
var MSIE = navigator.userAgent.indexOf('MSIE') !== -1; //如果是真,则为IE浏览器
不同的布局方式及其优缺点
一、 TABLE方式
优点:
1、简单易用:比较适合入门级的用户操作,用户可直接利用Dreamweaver(以下简写为“DW”)工具栏插入表格,设置长宽、对齐方式、属性等。
2、所见即所得:当用户插入一个TABLE的时候就可立即看到效果。
3、可读性好:语句编写较为简便,主要代码就是<TABLE></TABLE>、<TR></TR>、<TD></TD>等语句。
4.开发速度较快:新建网站时,从DW中直接拖入TABLE比编写DIV要快速很多。
5.兼容性较强:TABLE设计由来已久,得到浏览器的广泛支持,故显示效果很好,不会出现错位情况。
缺点:
1、代码冗余,<TABLE><TR><TD><TD></TR></TABLE>这是构成一个表格的最基本元素(此为一行一列的表格),相对<DIV></DIV>编写来说,代码繁多。
2、网页打开速度较慢:后台代码太多,导致网站打开速度慢。
二、 DIV+CSS方式
优点:
1. 标准化的页面结构:DIV+CSS是行业标准,是WEB发展的趋势。
2、代码简洁:<DIV></DIV>较TABLE来说代码精简许多。
3、页面浏览速度较快: 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。
4、页面布局灵活:DIV+CSS使得页面布局方便操作灵活,改版时只需改CSS样式即可实现页面重新布局,而不用改动程序,从而降低了网站改版的成本。页面效果丰富,包括视觉效果和用户体验比如拖拉。
缺点:
1、可观性差:用户在编辑的时候并不能立即看到编辑效果,需要预览才可看到。
2、操作繁琐:相对于入门级的用户或是对代码不是很了解的人来说,操作起来很是麻烦。
3、兼容性较差:DIV+CSS设计的网站在IE浏览器里面正常显示,到火狐浏览器(FireFox )中有可能面目全非,故设计时需要把不同浏览器样式都考虑进去。
以上简单介绍了一下TABLE与DIV+CSS的优缺点。其实页面布局采用哪种排版都可以,如果是初入门的新手,需要从TABLE入手,待对html语言有所了解时再接触DIV+CSS;或者有的客户强调的是网站开发制作的速度,那html语言排版就可以;如果对html语言已经很了解,或者需要进行SEO优化,想做关键词推广、那最好是用DIV+CSS来实现,这样网站的流量和页面浏览速度会快一些。
- Web面试题总结
- web前端面试题总结
- Web前端面试题总结
- web前端面试题总结
- web前端面试题总结
- 总结一些常见web前端面试题
- Web前端面试题总结-HTML篇
- web 前端面试题个人总结
- 【WEB】JS面试题涉及基础知识总结(一)
- 【WEB】JS面试题涉及基础知识总结(二)
- 自己总结的web前端的jquery面试题
- 自己总结web前端面试题之javascript
- 自己总结的web前端面试题之数据库
- 自己总结的web前端面试题之php
- 关于web前端面试题系列之必考面试题(面试官总结)
- [Web]Java面试题
- WEB开发面试题
- Web面试题
- Hdu 1018 Big Number 求N!的位数
- 《唐老师C++》C++到C得升华
- Codeforces Round #199 (Div. 2) E. Xenia and Tree (非正规解法 分情况dfs)
- 我为什么偏爱苹果电脑和Mac OS X
- oo面向对象
- Web面试题总结
- 最短路径 Dijkstra
- 华为机试第一题
- adb server is out of date. killing...
- Bitmap.createBitmap函数用法
- Ruby 命名规则
- Linux用户需要了解的命令行
- 【IPMI】ipmi的使用_命令与ip设置
- MVC和MVP的一些思考