前端面试宝典

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

16. 谈谈以前端角度出发做好SEO需要考虑什么？

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

主要包括主题（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％以上的搜索市场。

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

17. 有哪项方式可以对一个DOM设置它的CSS样式？

18. CSS都有哪些选择器？

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

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

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

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

21. 什么是Css Hack？ie6,7,8的hack分别是什么？

答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

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

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

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

187. 将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

答案：'{$id}{$id}_{$name}'
.replace(/{\$id}/g,'10')
.replace(/{\$name}/g,'Tony')

188. 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’

第3题：

第4题：

console.log(c); //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值

console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c

第5题：

第6题：

第7题：

console.log("1"==1); //答案：true，因为会将数字1先转换为字符串1

第8题：

第9题：

第10题：

第11题：考点：函数声明提前

第12题：

第13题：

alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值

第14题：

第15题

第16题：以下执行会有什么输出

三、HTML5 CSS3

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

2. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

3. 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

12. 请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

14. html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

语意化更好的内容元素，比如 article、footer、header、nav、section

CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器多背景 rgba

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

15. 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

　　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

　　那么问题了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

18. 请谈一下你对网页标准和标准制定机构重要性的理解。

　　（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

答案：css计数器是通过设置counter-reset 、counter-increment 两个属性、及 counter()/counters()一个方法配合after / before 伪类实现。

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

、

和

前端面试宝典

一、HTML和CSS

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

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

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

4. div+css的布局较table布局有什么优点？

5. img的alt与title有何异同？ strong与em的异同？

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

7. 为什么利用多个域名来存储网站资源会更有效？

8. 请谈一下你对网页标准和标准制定机构重要性的理解。

9. 请描述一下cookies，sessionStorage和localStorage的区别？

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

11. 知道的网页制作会用到的图片格式有哪些？

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

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

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

15. 你如何理解HTML结构的语义化？

16. 谈谈以前端角度出发做好SEO需要考虑什么？

17. 有哪项方式可以对一个DOM设置它的CSS样式？

18. CSS都有哪些选择器？

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

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

21. 什么是Css Hack？ie6,7,8的hack分别是什么？

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

23. 什么是外边距重叠？重叠的结果是什么？

24. rgba()和opacity的透明效果有什么不同？

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

26. 如何垂直居中一个浮动元素？

27. px和em的区别。

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

29. Sass、LESS是什么？大家为什么要使用他们？

30. display:none与visibility:hidden的区别是什么？

31. CSS中link和@import的区别是：

32. 简介盒子模型：

33. 为什么要初始化样式？

34. BFC是什么?

35. html语义化是什么？

36. Doctype的作用？严格模式与混杂模式的区别？

37. IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。

38. HTML与XHTML——二者有什么区别？

39. html常见兼容性问题？

40. 对WEB标准以及W3C的理解与认识

41. 行内元素有哪些?块级元素有哪些?CSS的盒模型?

42. 前端页面有哪三层构成，分别是什么?作用是什么?

43. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

44. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

45. CSS的盒子模型？

46. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

47. 如何居中div,如何居中一个浮动元素?

48. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

49. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

50. absolute的containing block计算方式跟正常流有什么不同？

51. 对WEB标准以及W3C的理解与认识

52. css的基本语句构成是?

53. 浏览器标准模式和怪异模式之间的区别是什么?

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

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

第3题：

第4题：

第5题：

第6题：

第7题：

第8题：

第9题：

第10题：

第11题：考点：函数声明提前

第12题：

第13题：

第14题：

第15题

第16题：以下执行会有什么输出

三、HTML5 CSS3

你可能感兴趣的:(面试)

44. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

48. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？