本文深入探讨了前端开发中的各种概念和技术，包括DOCTYPE的作用、严格模式与混杂模式的区别，以及如何通过CSS优化网页布局。此外，还详细阐述了HTML5的语义化、盒模型、Web标准、SEO和UEO策略、浏览器内核以及前端性能优化方法，如文件合并、压缩和CDN。最后，提到了如何处理浏览器兼容性和内存泄漏问题，以及对Web2.0的理解和Node.js的应用场景。
1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2. div+css的布局比table布局有什么优点？
(1)改版的时候更方便 只要改css文件。
(2)页面加载速度更快、结构化清晰、页面显示简洁。
(3)表现与结构相分离。
(4)易于优化（seo）搜索引擎更友好，排名更容易靠前。
3.a：img的alt与title有何异同？b：strong与em的异同？
alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。title 为该属性提供信息。比如为链接添加描述性文字。strong:粗体强调标签，强调，表示内容的重要性。em:斜体强调标签，更强烈强调，表示内容的强调点。
4. 简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内。
href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
5. html的含义是什么，其主体部分由什么标记构成？
html是一种标准，一种规范，它通过标记符号来标记要显示在网页中的各个部分，被称为超文本标记语言。标记和之间的内容构成了html的主体部分。网页中所有内容，包括文字，图片，连接都包含在此标记符内。
6.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素： <br> <hr> <img> <input> <link> <meta>
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
7.CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；
IE 的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
8. 对WEB标准以及W3C的理解与认识
W3C发布的说明Web标准的文档称为规范。这些规范对HTML、CSS等语言的参数进行了定义。也就是说，规范对语言规则进行了标准化。
10.link 和@import 的区别是?
（1）、link属于XHTML标签，而@import是CSS提供的;
（2）、页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）、link方式的样式的权重 高于@import的权重.
11.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
* 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）
* 可继承： font-size font-family color, UL LI DL DD DT;
* 不可继承 ：border padding margin width height ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
12. xhtml和html有什么区别。
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
13. 说说你对于网站优化的理解(SEO，UEO)；
网站优化包括两个方面，SEO和UEO(搜索引擎优化和用户体验优化)
SEO主要是通过对代码的精简和使用语意化的HTML标签，来实现网站尽可能快、准、全的被搜索引擎搜录，并排名靠前。
UEO主要是通过对CSS，JS以及后台脚本的优化，实现网站界面和用户使用流程的优化。
14. 前端页面有哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层由HTML或 XHTML之类的标记语言负责创建。对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
网页的表示层由CSS负责创建。CSS 对”如何显示有关内容”的问题做出了回答。
网页的行为层负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
15. 你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩 使用CDN托管
缓存的使用
什么是语义化的HTML？
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
16. 清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.使用afert伪元素清除浮动(用于非IE浏览器)
17. 说说你对Web前端开发框架的理解；
开发框架是在底层程序语句的基础上，形成的规范化的开发工具；
框架的形成，简化了开发的流程，提高了开发的效率，但不限制开发的灵活性；
在 框架的基础上，开发人员省去了底层脚本的编写，更专注于事务的执行和功能的开发；
18. 说说你对于Web2.0的理解？
从两个方面理解Web2.0，
从技术角度说，Web2.0应该是具有可扩展性，具有可延伸性，具有良好的用户体验性能，符合WEB标准的一个平台性Web产品；
从商业模式角度说，Web2. 0是用户创造信息和传播信息的，以用户为中心作为运营理念，由用户创造客户，再有客户带来收入的一个开放性平台；
19. 浏览器的内核分别是什么?
Ie(Ie内核) 火狐Mozilla（Gecko） 谷歌Chrome（webkit） opear(Presto)
20. HTML5的离线储存？
localStorage：长期存储数据，浏览器关闭后数据不丢失；
sessionStorage：数据在浏览器关闭后自动删除。
21.web标准网站有哪些优点？
下载浏览速度快。被更多的用户访问。推广时被更多的机器访问。更
少的代码，易于维护，宽带要求降低，降低成本，更容易被搜索引擎
搜索到。改版方便，不需要改变内容。提供打印页面不用复制。
22. 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
(1)实现界面交互 (2)提升用户体验 (3)有了Node.js，前端可以实现服务端的一些事情前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好， 参与项目，快速高质量完成实现效果图，精确到1px； 与团队成员，UI设计，产品经理的沟通； 做好的页面结构，页面重构和用户体验； 处理hack，兼容、写出优美的代码格式； 针对服务器的优化、拥抱最新前端技术。
23. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
查找浏览器缓存 DNS解析、查找该域名对应的IP地址、重定向（301）、 发出第二个GET请求 进行HTTP协议会话 客户端发送报头(请求报头) 服务器回馈报头(响应报头) html文档开始下载 文档树建立，根据标记请求所需指定MIME类型的文件 文件显示 [ 浏览器这边做的工作大致分为以下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等） }
24. http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误，当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
25. 你有哪些性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
- 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
- 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
- 当需要设置的样式很多时设置className而不是直接操作style。
- 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
- 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
26. 那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
27. 如何判断当前脚本运行在浏览器还是node环境中？
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中
28. 对Node的优点和缺点提出了自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求， 因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
29. 平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等； 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； 页面进行标注（例如 页面 模块 开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）； JS 分文件夹存放 命名以该JS功能为准的英文翻译。 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
30. 有哪项方式可以对一个DOM设置它的CSS样式？
(1)外部样式表，引入一个外部css文件
(2)内部样式表，将css代码放在 <head> 标签内部
(3)内联样式，将css样式直接定义在 HTML 元素内部
31. CSS选择器的优先级是怎么样定义的？
选择器指向的越准确，它的优先级就越高。
优先级就近原则，同权重情况下样式定义最近者为准。
标签的权重为1，class的权重为10，id的权重为100 Id>class>标签选择符
32. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的：设置display属性为none，或者设置visibility属性为hidden
技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000
33. 超链接访问过后hover样式就不出现的问题是什么？如何解决？
改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
34. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
35. 如何区别display:none与visibility:hidden?
相同的是display:none与visibility:hidden都可以用来隐藏某个元素；
不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。
36. css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
37. 描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
38. 解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
39. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条，ie中如何让超出宽度的文字显示为省略号？
{overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;}
40. DIV CSS设计中如何去掉链接的虚线框？
IE下：<a href=”#”οnfοcus=”this.blur();”> FF下:a{outline:none;}
41. 当float和margin同时使用时， IE6的双倍边距BUG如何解决？
解决办法就是是加上display:inline 代码
42. 写出几种IE6 BUG的解决方法
(1)双边距BUG float引起的 使用display
(2)像素问题 使用float引起的 使用dislpay:inline -3px
(3)超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
(4)Ie z-index问题 给父级添加position:relative
(5)Png 透明 使用js代码 改
(6)Min-height 最小高度 ！Important 解决’
(7)select 在ie6下遮盖 使用iframe嵌套
(8)为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
43. 如何显示/隐藏一个DOM元素？
更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
44. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出主要的HTML标签及CSS。
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>居中</title>
<style type=”text/css”>
body {width: 600px}
html, body {margin: auto; padding: 0}
div.wrap {text-align:center; margin: 0; padding: 0}
</style> </head> <body>
<div class=”wrap”>居中</div> </body> </html>
45. CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
46. CSS布局：两列，左边宽度自适应，右边宽度固定200px 15分
#box1{width:100%;height:600px;position:relative;}
#left1{margin-right:200px;border:1px solid red;height:100%;}
#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px solid blue;}
<div id="box1">
<div id="left1"></div>
<div id="right1"></div>
</div>
47.html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
* 绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景rgba
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
48.如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
49.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
* 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
* 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
* 渐进识别的方式，从总体中逐渐排除局部。
* 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
50.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
* 首先划分成头部、body、脚部；。。。。。
实现效果图是最基本的工作，精确到2px；
与设计师，产品经理的沟通和项目的参与
做好的页面结构，页面重构和用户体验
处理hack，兼容、写出优美的代码格式
针对服务器的优化、拥抱 HTML5。
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
