Java工程师面试题整理[社招篇]a year ago1290收藏分享举报文章被以下专栏收录莫道君行早，更有早行人。全心敲代码，天道自酬勤。推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&微信公众号：一个程序员的日常\n\n莫道君行早，更有早行人。\n全心敲代码，天道自酬勤。&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&莫道君行早，更有早行人。全心敲代码，天道自酬勤。&,&urlToken&:&passer&,&id&:16638,&imagePath&:&a778fbfce5ddb4ff441662.jpeg&,&slug&:&passer&,&applyReason&:&0&,&name&:&学习编程&,&title&:&学习编程&,&url&:&https:\u002F\\u002Fpasser&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:113714,&avatar&:{&id&:&a778fbfce5ddb4ff441662&,&template&:&https:\u002F\\u002F{id}_{size}.jpeg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fa778fbfce5ddb4ff441662_l.jpeg&,&articlesCount&:127},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fbb31eb3fab86ff0e6b4d4a_r.png&,&lastUpdated&:,&imagePath&:&bb31eb3fab86ff0e6b4d4a.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[2],&summary&:&昨天是周日，我偷偷发了一篇文章，想看看大家在周末是否也如同平时，看来很多人是错过了（绝对是想学习前端朋友的福利）：\u003Ca class=\&\& data-title=\&Front End Developer Questions（前端开发面试题） - 学习编程 - 知乎专栏 \& data-editable=\&true\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003EFront End Developer Questions（前端开发面试题） - 学习编程 - 知乎专栏 \u003C\u002Fa\u003E如果你是学生准备参加校招请翻到上一篇（Java工程师面试题…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T08:01:32+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:804894,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&Java工程师面试题整理[社招篇]&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:16638,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fbb31eb3fab86ff0e6b4d4a_r.png&,&author&:{&bio&:&喜欢用数据讲故事。&,&isFollowing&:false,&hash&:&eaf435b228ce0b038a4afe&,&uid&:243500,&isOrg&:false,&slug&:&sgai&,&isFollowed&:false,&description&:&有关于我的工作和生活都在微信公众号：一个程序员的日常，微信号：smcode2016&,&name&:&路人甲&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fsgai&,&avatar&:{&id&:&958a18f3216805bed269d158fb83325a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:392578}],&title&:&Java工程师面试题整理[社招篇]&,&author&:&sgai&,&content&:&\u003Cp\u003E昨天是周日，我偷偷发了一篇文章，想看看大家在周末是否也如同平时，看来很多人是错过了（绝对是想学习前端朋友的福利）：\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003EFront End Developer Questions（前端开发面试题） - 学习编程 - 知乎专栏 \u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果你是学生准备参加校招请翻到上一篇（Java工程师面试题整理校招篇）：\u003Ca href=\&https:\u002F\\u002Fp\u002F?refer=passer\& class=\&internal\&\u003EJava工程师笔试题整理[校招篇] - 学习编程 - 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E那么今天的内容是社招面试中会碰到的一系列面试题目，希望可以帮助在正准备社招或者学习Java的朋友（以下资料整理来自网络，主要来自\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.csdn.net\u002Fjackfrued\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E骆昊的技术专栏\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）。\u003C\u002Fp\u003E\u003Cp\u003E放在第一个的是一本书（Java面试宝典2016版，对于Java初级来说是一本好书） ：\u003Ca class=\& wrap external\& href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fhuangyueranbbc\u002F9392426\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Epdf版下载\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003EJava面试题全集（以下列出题目，整理以及看答案请转至：\u003Ca class=\& wrap external\& href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.csdn.net\u002Fjackfrued\u002Farticle\u002Fdetails\u002F\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EJava面试题全集（上）\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）\u003C\u002Fp\u003E\u003Cp\u003E1、面向对象的特征有哪些方面？\u003Cbr\u003E2、访问修饰符public,private,protected,以及不写（默认）时的区别？\u003Cbr\u003E3、String 是最基本的数据类型吗？\u003Cbr\u003E4、float f=3.4;是否正确？\u003Cbr\u003E5、short s1 = 1; s1 = s1 + 1;有错吗?short s1 = 1; s1 += 1;有错吗？\u003Cbr\u003E6、Java有没有goto？\u003Cbr\u003E7、int和Integer有什么区别？\u003Cbr\u003E8、&和&&的区别？\u003Cbr\u003E9、解释内存中的栈(stack)、堆(heap)和静态区(static area)的用法。\u003Cbr\u003E10、Math.round(11.5) 等于多少？Math.round(-11.5)等于多少？\u003Cbr\u003E11、switch 是否能作用在byte 上，是否能作用在long 上，是否能作用在String上？\u003Cbr\u003E12、用最有效率的方法计算2乘以8？\u003Cbr\u003E13、数组有没有length()方法？String有没有length()方法？\u003Cbr\u003E14、在Java中，如何跳出当前的多重嵌套循环？\u003Cbr\u003E15、构造器（constructor）是否可被重写（override）？\u003Cbr\u003E16、两个对象值相同(x.equals(y) == true)，但却可有不同的hash code，这句话对不对？\u003Cbr\u003E17、是否可以继承String类？\u003Cbr\u003E18、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，并可返回变化后的结果，那么这里到底是值传递还是引用传递？\u003Cbr\u003E19、String和StringBuilder、StringBuffer的区别？\u003Cbr\u003E20、重载（Overload）和重写（Override）的区别。重载的方法能否根据返回类型进行区分？\u003Cbr\u003E21、描述一下JVM加载class文件的原理机制？\u003Cbr\u003E22、char 型变量中能不能存贮一个中文汉字，为什么？\u003Cbr\u003E23、抽象类（abstract class）和接口（interface）有什么异同？\u003Cbr\u003E24、静态嵌套类(Static Nested Class)和内部类（Inner Class）的不同？\u003Cbr\u003E25、Java 中会存在内存泄漏吗，请简单描述。\u003Cbr\u003E26、抽象的（abstract）方法是否可同时是静态的（static）,是否可同时是本地方法（native），是否可同时被synchronized修饰？\u003Cbr\u003E27、阐述静态变量和实例变量的区别。\u003Cbr\u003E28、是否可以从一个静态（static）方法内部发出对非静态（non-static）方法的调用？\u003Cbr\u003E29、如何实现对象克隆？\u003Cbr\u003E31、String s = new String(\&xyz\&);创建了几个字符串对象？\u003Cbr\u003E32、接口是否可继承（extends）接口？抽象类是否可实现（implements）接口？抽象类是否可继承具体类（concrete class）？\u003Cbr\u003E33、一个\&.java\&源文件中是否可以包含多个类（不是内部类）？有什么限制？\u003Cbr\u003E34、Anonymous Inner Class(匿名内部类)是否可以继承其它类？是否可以实现接口？\u003Cbr\u003E35、内部类可以引用它的包含类（外部类）的成员吗？有没有什么限制？\u003Cbr\u003E36、Java 中的final关键字有哪些用法？\u003Cbr\u003E38、数据类型之间的转换：\u003Cbr\u003E39、如何实现字符串的反转及替换？\u003Cbr\u003E40、怎样将GB2312编码的字符串转换为ISO-8859-1编码的字符串？\u003Cbr\u003E41、日期和时间：\u003Cbr\u003E42、打印昨天的当前时刻。\u003Cbr\u003E43、比较一下Java和JavaSciprt。\u003Cbr\u003E44、什么时候用断言（assert）？\u003Cbr\u003E45、Error和Exception有什么区别？\u003Cbr\u003E46、try{}里有一个return语句，那么紧跟在这个try后的finally{}里的代码会不会被执行，什么时候被执行，在return前还是后?\u003Cbr\u003E47、Java语言如何进行异常处理，关键字：throws、throw、try、catch、finally分别如何使用？\u003Cbr\u003E48、运行时异常与受检异常有何异同？\u003Cbr\u003E49、列出一些你常见的运行时异常？\u003Cbr\u003E50、阐述final、finally、finalize的区别。\u003Cbr\u003E51、类ExampleA继承Exception，类ExampleB继承ExampleA。\u003Cbr\u003E请问执行此段代码的输出是什么？\u003Cbr\u003E52、List、Set、Map是否继承自Collection接口？\u003Cbr\u003E53、阐述ArrayList、Vector、LinkedList的存储性能和特性。\u003Cbr\u003E54、Collection和Collections的区别？\u003Cbr\u003E55、List、Map、Set三个接口存取元素时，各有什么特点？\u003Cbr\u003E56、TreeMap和TreeSet在排序时如何比较元素？Collections工具类中的sort()方法如何比较元素？\u003Cbr\u003E57、Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行，它们有什么区别?\u003Cbr\u003E58、线程的sleep()方法和yield()方法有什么区别？\u003Cbr\u003E59、当一个线程进入一个对象的synchronized方法A之后，其它线程是否可进入此对象的synchronized方法B？\u003Cbr\u003E60、请说出与线程同步以及线程调度相关的方法。\u003Cbr\u003E61、编写多线程程序有几种实现方式？\u003Cbr\u003E62、synchronized关键字的用法？\u003Cbr\u003E63、举例说明同步和异步。\u003Cbr\u003E64、启动一个线程是调用run()还是start()方法？\u003Cbr\u003E65、什么是线程池（thread pool）？\u003Cbr\u003E66、线程的基本状态以及状态之间的关系？\u003Cbr\u003E67、简述synchronized 和java.util.concurrent.locks.Lock的异同？\u003Cbr\u003E68、Java中如何实现序列化，有什么意义？\u003Cbr\u003E69、Java中有几种类型的流？\u003Cbr\u003E70、写一个方法，输入一个文件名和一个字符串，统计这个字符串在这个文件中出现的次数。\u003Cbr\u003E71、如何用Java代码列出一个目录下所有的文件？\u003Cbr\u003E72、用Java的套接字编程实现一个多线程的回显（echo）服务器。\u003Cbr\u003E73、XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？\u003Cbr\u003E74、你在项目中哪些地方用到了XML？\u003Cbr\u003E75、阐述JDBC操作数据库的步骤。\u003Cbr\u003E76、Statement和PreparedStatement有什么区别？哪个性能更好？\u003Cbr\u003E77、使用JDBC操作数据库时，如何提升读取数据的性能？如何提升更新数据的性能？\u003Cbr\u003E78、在进行数据库编程时，连接池有什么作用？\u003Cbr\u003E79、什么是DAO模式？\u003Cbr\u003E80、事务的ACID是指什么？\u003Cbr\u003E81、JDBC中如何进行事务处理？\u003Cbr\u003E82、JDBC能否处理Blob和Clob？\u003Cbr\u003E83、简述正则表达式及其用途。\u003Cbr\u003E84、Java中是如何支持正则表达式操作的？\u003Cbr\u003E85、获得一个类的类对象有哪些方式？\u003Cbr\u003E86、如何通过反射创建对象？\u003Cbr\u003E87、如何通过反射获取和设置对象私有字段的值？\u003Cbr\u003E88、如何通过反射调用对象的方法？\u003Cbr\u003E89、简述一下面向对象的\&六原则一法则\&。\u003Cbr\u003E90、简述一下你了解的设计模式。\u003Cbr\u003E91、用Java写一个单例类。\u003Cbr\u003E92、什么是UML？\u003Cbr\u003E93、UML中有哪些常用的图？\u003Cbr\u003E94、用Java写一个冒泡排序。\u003Cbr\u003E95、用Java写一个折半查找。\u003C\u002Fp\u003E\u003Cp\u003E Java面试题全集（以下列出题目，看答案请转至：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.csdn.net\u002Fjackfrued\u002Farticle\u002Fdetails\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EJava面试题全集（中）\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）\u003C\u002Fp\u003E\u003Cp\u003E96、阐述Servlet和CGI的区别?\u003Cbr\u003E97、Servlet接口中有哪些方法？\u003Cbr\u003E98、转发（forward）和重定向（redirect）的区别？\u003Cbr\u003E99、JSP有哪些内置对象？作用分别是什么？\u003Cbr\u003E100、get和post请求的区别？\u003Cbr\u003E101、常用的Web服务器有哪些？\u003Cbr\u003E102、JSP和Servlet是什么关系？\u003Cbr\u003E103、讲解JSP中的四种作用域。\u003Cbr\u003E104、如何实现JSP或Servlet的单线程模式？\u003Cbr\u003E105、实现会话跟踪的技术有哪些？\u003Cbr\u003E106、过滤器有哪些作用和用法？\u003Cbr\u003E107、监听器有哪些作用和用法？\u003Cbr\u003E108、web.xml文件中可以配置哪些内容？\u003Cbr\u003E109、你的项目中使用过哪些JSTL标签？\u003Cbr\u003E110、使用标签库有什么好处？如何自定义JSP标签？\u003Cbr\u003E111、说一下表达式语言（EL）的隐式对象及其作用。\u003Cbr\u003E112、表达式语言（EL）支持哪些运算符？\u003Cbr\u003E113、Java Web开发的Model 1和Model 2分别指的是什么？\u003Cbr\u003E114、Servlet 3中的异步处理指的是什么？\u003Cbr\u003E115、如何在基于Java的Web项目中实现文件上传和下载？\u003Cbr\u003E116、服务器收到用户提交的表单数据，到底是调用Servlet的doGet()还是doPost()方法？\u003Cbr\u003E117、JSP中的静态包含和动态包含有什么区别？\u003Cbr\u003E118、Servlet中如何获取用户提交的查询参数或表单数据？\u003Cbr\u003E119、Servlet中如何获取用户配置的初始化参数以及服务器上下文参数？\u003Cbr\u003E120、如何设置请求的编码以及响应内容的类型？\u003Cbr\u003E121、解释一下网络应用的模式及其特点。\u003Cbr\u003E122、什么是Web Service（Web服务）？\u003Cbr\u003E123、概念解释：SOAP、WSDL、UDDI。\u003Cbr\u003E124、Java规范中和Web Service相关的规范有哪些？\u003Cbr\u003E125、介绍一下你了解的Java领域的Web Service框架。 \u003C\u002Fp\u003E\u003Cp\u003EJava面试题全集（以下列出题目，整理以及看答案请转至：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.csdn.net\u002Fjackfrued\u002Farticle\u002Fdetails\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EJava面试题全集（下）\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）\u003C\u002Fp\u003E\u003Cp\u003E126、什么是ORM？\u003Cbr\u003E127、持久层设计要考虑的问题有哪些？你用过的持久层框架有哪些？\u003Cbr\u003E128、Hibernate中SessionFactory是线程安全的吗？Session是线程安全的吗（两个线程能够共享同一个Session吗）？\u003Cbr\u003E129、Hibernate中Session的load和get方法的区别是什么？\u003Cbr\u003E130、Session的save()、update()、merge()、lock()、saveOrUpdate()和persist()方法分别是做什么的？有什么区别？\u003Cbr\u003E131、阐述Session加载实体对象的过程。\u003Cbr\u003E132、Query接口的list方法和iterate方法有什么区别？\u003Cbr\u003E133、Hibernate如何实现分页查询？\u003Cbr\u003E134、锁机制有什么用？简述Hibernate的悲观锁和乐观锁机制。\u003Cbr\u003E135、阐述实体对象的三种状态以及转换关系。\u003Cbr\u003E136、如何理解Hibernate的延迟加载机制？在实际应用中，延迟加载与Session关闭的矛盾是如何处理的？\u003Cbr\u003E137、举一个多对多关联的例子，并说明如何实现多对多关联映射。\u003Cbr\u003E138、谈一下你对继承映射的理解。\u003Cbr\u003E139、简述Hibernate常见优化策略。\u003Cbr\u003E140、谈一谈Hibernate的一级缓存、二级缓存和查询缓存。\u003Cbr\u003E141、Hibernate中DetachedCriteria类是做什么的？\u003Cbr\u003E142、@OneToMany注解的mappedBy属性有什么作用？\u003Cbr\u003E143、MyBatis中使用&code&#&\u002Fcode&和&code&$&\u002Fcode&书写占位符有什么区别？\u003Cbr\u003E144、解释一下MyBatis中命名空间（namespace）的作用。\u003Cbr\u003E145、MyBatis中的动态SQL是什么意思？\u003Cbr\u003E146、什么是IoC和DI？DI是如何实现的？\u003Cbr\u003E147、Spring中Bean的作用域有哪些？\u003Cbr\u003E148、解释一下什么叫AOP（面向切面编程）？\u003Cbr\u003E149、你是如何理解\&横切关注\&这个概念的？\u003Cbr\u003E150、你如何理解AOP中的连接点（Joinpoint）、切点（Pointcut）、增强（Advice）、引介（Introduction）、织入（Weaving）、切面（Aspect）这些概念？\u003Cbr\u003E151、Spring中自动装配的方式有哪些？\u003Cbr\u003E152、Spring中如何使用注解来配置Bean？有哪些相关的注解？\u003Cbr\u003E153、Spring支持的事务管理类型有哪些？你在项目中使用哪种方式？\u003Cbr\u003E154、如何在Web项目中配置Spring的IoC容器？\u003Cbr\u003E155、如何在Web项目中配置Spring MVC？\u003Cbr\u003E156、Spring MVC的工作原理是怎样的？\u003Cbr\u003E157、如何在Spring IoC容器中配置数据源？\u003Cbr\u003E158、如何配置配置事务增强？\u003Cbr\u003E159、选择使用Spring框架的原因（Spring框架为企业级开发带来的好处有哪些）？\u003Cbr\u003E160、Spring IoC容器配置Bean的方式？\u003Cbr\u003E161、阐述Spring框架中Bean的生命周期？\u003Cbr\u003E162、依赖注入时如何注入集合属性？\u003Cbr\u003E163、Spring中的自动装配有哪些限制？\u003Cbr\u003E164、在Web项目中如何获得Spring的IoC容器？\u003Cbr\u003E165. 大型网站在架构上应当考虑哪些问题？\u003Cbr\u003E166、你用过的网站前端优化的技术有哪些？\u003Cbr\u003E167、你使用过的应用服务器优化技术有哪些？\u003Cbr\u003E168、什么是XSS攻击？什么是SQL注入攻击？什么是CSRF攻击？\u003Cbr\u003E169. 什么是领域模型(domain model)？贫血模型(anaemic domain model)和充血模型(rich domain model)有什么区别？\u003Cbr\u003E170. 谈一谈测试驱动开发（TDD）的好处以及你的理解。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&80\& data-rawwidth=\&1000\& src=\&https:\u002F\\u002Fa0b4e54ba684c13ae7c59b_b.png\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\\u002Fa0b4e54ba684c13ae7c59b_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&80\& data-rawwidth=\&1000\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='80'&&\u002Fsvg&\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\\u002Fa0b4e54ba684c13ae7c59b_r.png\& data-actualsrc=\&https:\u002F\\u002Fa0b4e54ba684c13ae7c59b_b.png\&\u003E\u003Cp\u003E如果你想学习编程，但是找不到学习路径和资源，欢迎关注专栏：\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fpasser\&\u003E学习编程\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003E如何学习Python爬虫[入门篇]？ - 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003E如何一步一步的学Java - 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F\&\u003EC、C++语言学习资料 - 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003E免费实用的API接口 - 知乎专栏\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003E学好Python的11个优秀资源 - 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca class=\&internal\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003E程序员把妹指南之修电脑篇
- 知乎专栏\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T00:01:32.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:109,&collapsedCount&:0,&likeCount&:1290,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fbb31eb3fab86ff0e6b4d4a_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Java&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&编程&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&面试&}],&adminClosedComment&:false,&titleImageSize&:{&width&:684,&height&:385},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&passer&,&name&:&学习编程&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:109,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T08:01:32+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&E-Hi&,&isFollowing&:false,&hash&:&d8fc354dd14bfc2701eb36&,&uid&:36,&isOrg&:false,&slug&:&wang-zhen-36-54&,&isFollowed&:false,&description&:&普通程序员，有理想的现实主义者。&,&name&:&Esta Wang&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwang-zhen-36-54&,&avatar&:{&id&:&cef903efc1b19c8dfcd18&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&7b46aebbc5b5e35a48de5d&,&uid&:818000,&isOrg&:false,&slug&:&dai-san-69&,&isFollowed&:false,&description&:&&,&name&:&戴三&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fdai-san-69&,&avatar&:{&id&:&0a83ebbda3eafa58134d4&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&计算机硕士&,&isFollowing&:false,&hash&:&986b52d73fadf&,&uid&:095900,&isOrg&:false,&slug&:&yuxiangxgt&,&isFollowed&:false,&description&:&&,&name&:&向功涛&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyuxiangxgt&,&avatar&:{&id&:&v2-9de9fe4ed9e073212efe3ff&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&d7ee5e897c73c7459fbf0a&,&uid&:086850,&isOrg&:false,&slug&:&tang-xian-sheng-30&,&isFollowed&:false,&description&:&&,&name&:&差不多先生&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ftang-xian-sheng-30&,&avatar&:{&id&:&v2-e4afafa902583bce9f6bc3c&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&待我腹肌8块&,&isFollowing&:false,&hash&:&509fd47ea7e3fb30328bcb&,&uid&:88,&isOrg&:false,&slug&:&jiang-hao-40&,&isFollowed&:false,&description&:&&,&name&:&江昊&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fjiang-hao-40&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&昨天是周日，我偷偷发了一篇文章，想看看大家在周末是否也如同平时，看来很多人是错过了（绝对是想学习前端朋友的福利）：\u003Ca class=\&\& data-title=\&Front End Developer Questions（前端开发面试题） - 学习编程 - 知乎专栏 \& data-editable=\&true\& href=\&https:\u002F\\u002Fp\u002F?refer=passer\&\u003EFront End Developer Questions（前端开发面试题） - 学习编程 - 知乎专栏 \u003C\u002Fa\u003E如果你是学生准备参加校招请翻到上一篇（Java工程师面试题…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fdd0cb065cd21abd42c69686_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&编程&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&面试&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&喜欢用数据讲故事。&,&isFollowing&:false,&hash&:&eaf435b228ce0b038a4afe&,&uid&:243500,&isOrg&:false,&slug&:&sgai&,&isFollowed&:false,&description&:&有关于我的工作和生活都在微信公众号：一个程序员的日常，微信号：smcode2016&,&name&:&路人甲&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fsgai&,&avatar&:{&id&:&958a18f3216805bed269d158fb83325a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&passer&,&name&:&学习编程&},&content&:&\u003Cp\u003E说来很巧，昨天买了两张电影票准备去看电影，结果买错了电影。于是在南京知乎交流群中吼了一句，结果就认识了一位老兄。碰巧这位老兄是做前端的，更碰巧的是今早我在看博客的时候竟然看到了他的博客（原来是一位大牛）。在征得老兄的同意后，特把此文奉献给知乎的朋友们。原文地址\u003Ca class=\& wrap external\& href=\&http:\u002F\\u002F?target=https%3A\\u002Fmarkyun\u002FMy-blog\u002Ftree\u002Fmaster\u002FFront-end-Developer-Questions\u002FQuestions-and-Answers\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E My-blog\u002FFront-end-Developer-Questions\u002FQuestions-and-Answers\u002F
\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E（欢迎关注他的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fmarkyun\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egithub\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E骚扰他的微博\u003Ca class=\& wrap external\& href=\&http:\u002F\\u002F?target=http%3A\\u002FFis_all%3D1%23_rnd5\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E马云云_理想青年\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E）\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E前端面试有几点需注意：(来源\u003Ca class=\& wrap external\& href=\&http:\u002F\\u002F?target=http%3A\\u002Fwintercn\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E寒冬winter\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 老师，github:@wintercn)\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。\u003C\u002Fli\u003E\u003Cli\u003E题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。\u003C\u002Fli\u003E\u003Cli\u003E细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。\u003C\u002Fli\u003E\u003Cli\u003E回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( o????????o??????? )）\u003C\u002Fli\u003E\u003Cli\u003E资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。
\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cb\u003E前端开发知识点：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EHTML&CSS：\n
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、\n
HTML5、CSS3、Flexbox\n\nJavaScript：\n
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、\n
DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs\n\n其他：\n
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E题目部分（题目加答案） \u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003EHTML部分\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003EDoctype作用？标准模式与兼容模式各有什么区别?\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E（1）、&!DOCTYPE&声明位于位于HTML文档中的第一行，处于 &html& 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。\n\n（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EHTML5 为什么只需要写 &!DOCTYPE HTML&？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；\n\n 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。\n\n（1）行内元素有：a b span img input select strong（强调的语气）\n（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p\n\n（3）常见的空元素：\n
&br& &hr& &img& &input& &link& &meta&\n
鲜为人知的是：\n
&area& &base& &col& &command& &embed& &keygen& &param& &source& &track& &wbr&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E页面导入样式时，使用link和@import有什么区别？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;\n\n（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;\n\n（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E介绍一下你对浏览器内核的理解？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。\n渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。\n\nJS引擎则：解析和执行javascript来实现网页的动态效果。\n\n最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E常见的浏览器内核有哪些？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003ETrident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]\nGecko内核：Netscape6及以上版本，FF,MozillaSuite\u002FSeaMonkey等\nPresto内核：Opera7及以上。
[Opera内核原为：Presto，现为：B]\nWebkit内核：Safari,Chrome等。
[ Chrome的：Blink（WebKit的分支）]\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E详细文章：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Ffullhouse\u002Farchive\u002F\u002F19\u002F2293455.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E浏览器内核的解析和对比\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Ehtml5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和\nHTML5？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。\n
用于媒介回放的 video 和 audio 元素;\n
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;\n
sessionStorage 的数据在浏览器关闭后自动删除;\n
语意化更好的内容元素，比如 article、footer、header、nav、\n
表单控件，calendar、date、time、email、url、\n
新的技术webworker, websocket, G\n\n
移除的元素：\n
纯表现的元素：basefont，big，center，font, s，strike，tt，u;\n
对可用性产生负面影响的元素：frame，frameset，noframes；\n\n* 支持HTML5新标签：\n
IE8\u002FIE7\u002FIE6支持通过document.createElement方法产生的标签，\n
可以利用这一特性让这些浏览器支持HTML5新标签，\n
浏览器支持新标签后，还需要添加标签默认的样式。\n\n
当然也可以直接使用成熟的框架、比如html5\n
&!--[if lt IE 9]&\n
&script& src=\&http:\u002F\\u002Fsvn\u002Ftrunk\u002Fhtml5.js\&&\u002Fscript&\n
&![endif]--&\n\n* 如何区分HTML5： DOCTYPE声明\\新增的结构元素\\功能元素\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E简述一下你对HTML语义化的理解？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E用正确的标签做正确的事情。\nhtml语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;\n即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;\n搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;\n使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EHTML5的离线储存怎么使用，工作原理能不能解释一下？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。\n原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。\n\n\n如何使用：\n1、页面头部像下面一样加入一个manifest的属性；\n2、在cache.manifest文件的编写离线存储的资源；\n
CACHE MANIFEST\n
js\u002Fapp.js\n
css\u002Fstyle.css\n
NETWORK:\n
resourse\u002Flogo.png\n
FALLBACK:\n
\u002F \u002Foffline.html\n3、在离线状态时，操作window.applicationCache进行需求实现。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E详细的使用请参考：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Fa\u002F2617\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E有趣的HTML5：离线存储\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。\n离线的情况下，浏览器就直接使用离线存储的资源。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E详细的使用请参考：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Fa\u002F2617\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E有趣的HTML5：离线存储\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E请描述一下 cookies，sessionStorage 和 localStorage 的区别？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ecookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。\ncookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。\nsessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。\n\n存储大小：\n
cookie数据大小不能超过4k。\n
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。\n\n有期时间：\n
localStorage
存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；\n
sessionStorage
数据在当前浏览器窗口关闭后自动删除。\n
设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eiframe有那些缺点？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E*iframe会阻塞主页面的Onload事件；\n*搜索引擎的检索程序无法解读这种页面，不利于SEO;\n\n*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。\n\n使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript\n动态给iframe添加src属性值，这样可以绕开以上两个问题。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ELabel的作用是什么？是怎么用的？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Elabel标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。\n\n&label for=\&Name\&&Number:&\u002Flabel&\n&input type=“text“name=\&Name\& id=\&Name\&\u002F&\n\n&label&Date:&input type=\&text\& name=\&B\&\u002F&&\u002Flabel&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EHTML5的form如何关闭自动完成功能？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E给不想要提示的 form 或某个 input 设置为 autocomplete=off。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E如何实现浏览器内多个标签页之间的通信? (阿里)\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EWebSocket、SharedWorker；\n也可以调用localstorge、cookies等本地存储方式；\n\nlocalstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，\n我们通过监听事件，控制它的值来进行页面信息通信；\n注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EwebSocket如何兼容低浏览器？(阿里)\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EAdobe Flash Socket 、\nActiveX HTMLFile (IE) 、\n基于 multipart 编码发送 XHR 、\n基于长轮询的 XHR\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E页面可见性（Page Visibility API） 可以有哪些用途？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;\n在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E如何在页面上实现一个圆形的可点击区域？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E1、map+area或者svg\n2、border-radius\n3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div style=\&height:1overflow:background:red\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E网页验证码是干嘛的，是为了解决什么安全问题。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；\n有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Etitle与h1的区别、b与strong的区别、i与em的区别？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Etitle属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；\n\nstrong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：&strong&会重读，而&B&是展示强调内容。\n\ni内容展示为斜体，em表示强调的文本；\n\nPhysical Style Elements -- 自然样式标签\nb, i, u, s, pre\nSemantic Style Elements -- 语义样式标签\nstrong, em, ins, del, code\n应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003ECSS\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E（1）有两种， IE 盒子模型、W3C 盒子模型；\n（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；\n（3）区
别： IE的content部分把 border 和 padding计算了进去;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS选择符有哪些？哪些属性可以继承？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E*
1.id选择器（ # myid）\n
2.类选择器（.myclassname）\n
3.标签选择器（div, h1, p）\n
4.相邻选择器（h1 + p）\n
5.子选择器（ul & li）\n
6.后代选择器（li a）\n
7.通配符选择器（ * ）\n
8.属性选择器（a[rel = \&external\&]）\n
9.伪类选择器（a:hover, li:nth-child）\n\n*
可继承的样式： font-size font-family color, UL LI DL DD DT;\n\n*
不可继承的样式：border padding \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS优先级算法如何计算？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E*
优先级就近原则，同权重情况下样式定义最近者为准;\n\n*
载入样式以最后载入的定位为准;\n\n优先级为:\n
!important &
id & class & tag\n
important 比 内联优先级高\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS3新增伪类有那些？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
p:first-of-type 选择属于其父元素的首个 &p& 元素的每个 &p& 元素。\n
p:last-of-type
选择属于其父元素的最后 &p& 元素的每个 &p& 元素。\n
p:only-of-type
选择属于其父元素唯一的 &p& 元素的每个 &p& 元素。\n
p:only-child
选择属于其父元素的唯一子元素的每个 &p& 元素。\n
p:nth-child(2)
选择属于其父元素的第二个子元素的每个 &p& 元素。\n\n
在元素之前添加内容,也可以用来做清除浮动。\n
在元素之后添加内容\n
控制表单控件的禁用状态。\n
单选框或复选框被选中。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E给div设置一个宽度，然后添加margin:0 auto属性\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ediv{\n
width:200\n
margin:0\n }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E居中一个浮动元素\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
确定容器的宽高 宽500 高 300 的层\n
设置层的外边距\n\n .div {\n
width:500 height:300\u002F\u002F高度可以不设\n
margin: -150px 0 0 -250\n
\u002F\u002F相对定位\n
background-color:
\u002F\u002F方便看效果\n
left:50%;\n
top:50%;\n }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E让绝对定位的div居中\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
position:\n
width: 1200\n
background:\n
margin: 0\n
left: 0;\n
bottom: 0;\n
right: 0;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Edisplay有哪些值？说明他们的作用。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
象块类型元素一样显示。\n
缺省值。象行内元素类型一样显示。\n
inline-block
象行内元素一样显示，但其内容象块类型元素一样显示。\n
象块类型元素一样显示，并添加样式列表标记。\n
此元素会作为块级表格来显示\n
规定应该从父元素继承 display 属性的值\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eposition的值relative和absolute定位原点是？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
absolute\n
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。\n
fixed （老IE不支持）\n
生成绝对定位的元素，相对于浏览器窗口进行定位。\n
relative\n
生成相对定位的元素，相对于其正常位置进行定位。\n
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。\n
规定从父元素继承 position 属性的值。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS3有哪些新特性？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
新增各种CSS选择器
（: not(.input)：所有 class 不是“input”的节点）\n
（border-radius:8px）\n
（multi-column layout）\n
阴影和反射
（Shadow\\Reflect）\n
（text-shadow、）\n
（Text-decoration）\n
（gradient）\n
（transform）\n
增加了旋转,缩放,定位,倾斜,动画，多背景\n
transform:\\scale(0.85,0.90)\\ translate(0px,-30px)\\ skew(-9deg,0deg)\\Animation:\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E .\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E用纯CSS创建一个三角形的原理是什么？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E把上、左、右三条边隐藏掉（颜色设为 transparent）\n#demo {\n
width: 0;\n
height: 0;\n
border-width: 20\n
border-style:\n
border-color: transparent transpa\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E一个满屏 品 字布局 如何设计?\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E简单的方式：\n
上面的div宽100%，\n
下面的两个div分别宽50%，\n
然后用float或者inline使其不换行即可\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.\n\n* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。\n\n* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。\n\n
浮动ie产生的双倍距离 #box{ float: width:10 margin:0 0 0 100}\n\n
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:将其转化为行内属性。(_这个符号只有ie6会识别)\n\n
渐进识别的方式，从总体中逐渐排除局部。\n\n
首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。\n
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。\n\n
background-color:#f1ee18;\u002F*所有识别*\u002F\n
.background-color:#00deff\\9; \u002F*IE6、7、8识别*\u002F\n
+background-color:#a200\u002F*IE6、7识别*\u002F\n
_background-color:#1e0bd1;\u002F*IE6识别*\u002F\n
IE下,可以使用获取常规属性的方法来获取自定义属性,\n
也可以使用getAttribute()获取自定义属性;\n
Firefox下,只能使用getAttribute()获取自定义属性。\n
解决方法:统一通过getAttribute()获取自定义属性。\n\n*
IE下,even对象有x,y属性,但是没有pageX,pageY属性;\n
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。\n\n*
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。\n\n*
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,\n
可通过加入 CSS 属性 -webkit-text-size-adjust: 解决。\n\n超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:\nL-V-H-A :
a:link {} a:visited {} a:hover {} a:active {}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eli与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E行框的排列会受到中间空白（回车\\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E为什么要初始化CSS样式。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。\n\n- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。\n\n最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）\n\n淘宝的样式初始化代码：\nbody, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }\nbody, button, input, select, textarea { font:12px\u002F1.5tahoma, arial, \\5b8b\\4f53; }\nh1, h2, h3, h4, h5, h6{ font-size:100%; }\naddress, cite, dfn, em, var { font-style: }\ncode, kbd, pre, samp { font-family:couriernew, courier, }\nsmall{ font-size:12 }\nul, ol { list-style: }\na { text-decoration: }\na:hover { text-decoration: }\nsup { vertical-align:text- }\nsub{ vertical-align:text- }\nlegend { color:#000; }\nfieldset, img { border:0; }\nbutton, input, select, textarea { font-size:100%; }\ntable { border-collapse: border-spacing:0; }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eabsolute的containing block(容器块)计算方式跟正常流有什么不同？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：\n1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；\n2、否则,则由这个祖先元素的 padding box 构成。\n如果都找不到，则为 initial containing block。\n\n补充：\n1. static(默认的)\u002Frelative：简单说就是它的父元素的内容框（即去掉padding的部分）\n2. absolute: 向上找最近的定位为absolute\u002Frelative的元素\n3. fixed: 它的containing block一律为根元素(html\u002Fbody)，根元素也是initial containing block\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eposition跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E对BFC规范(块级格式化上下文：block formatting context)的理解？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）\n 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。\n 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Ecss定义的权重\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：\n\n\u002F*权重为1*\u002F\ndiv{\n}\n\u002F*权重为10*\u002F\n.class1{\n}\n\u002F*权重为100*\u002F\n#id1{\n}\n\u002F*权重为100+1=101*\u002F\n#id1 div{\n}\n\u002F*权重为10+1=11*\u002F\n.class1 div{\n}\n\u002F*权重为10+10+1=21*\u002F\n.class1 .class2 div{\n}\n\n如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E移动端的布局用过媒体查询吗？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E使用 CSS 预处理器吗？喜欢那个？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003ESASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003ECSS优化、提高性能的方法有哪些？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E浏览器是怎样解析CSS选择器的？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E在网页中的应该使用奇数还是偶数的字体？为什么呢？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Emargin和padding分别适合什么场景使用？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E元素竖向的百分比设定是相对于容器的高度吗？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E全屏滚动的原理是什么？用到了CSS的那些属性？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E如何修改chrome记住密码后自动填充表单的黄色背景 ？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E你对line-height是如何理解的？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E设置元素浮动后，该元素的display值是多少？（自动变成display:block）\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E怎么让Chrome支持小于12px 的文字？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:）\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Efont-style属性可以让它赋值为“oblique” oblique是什么意思？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eposition:在android下无效怎么处理？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1\u002F60＊1000ms ＝ 16.7ms\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Edisplay:inline-block 什么时候会显示间隙？(携程)\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eoverflow: scroll时不能平滑滚动的问题怎么处理？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Epng、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，\n所以不如隔离开。\n\n因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，\n这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。\n\n同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，\n提高了webserver的http请求的解析速度。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Estyle标签写在body后与body前有什么区别？\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E什么是CSS 预处理器 \u002F 后处理器？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，\n
还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。\n\n- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的\n
是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003EJavaScript \u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E介绍js的基本数据类型。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E Undefined、Null、Boolean、Number、String\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E介绍js有哪些内置对象？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003EObject 是 JavaScript 中所有对象的父对象\n\n数据封装类对象：Object、Array、Boolean、Number 和 String\n其他对象：Function、Arguments、Math、Date、RegExp、Error\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E说几条写JavaScript的基本规范？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E1.不要在同一行声明多个变量。\n2.请使用 ===\u002F!==来比较true\u002Ffalse或者数值\n3.使用对象字面量替代new Array这种形式\n4.不要使用全局函数。\n5.Switch语句必须带有default分支\n6.函数不应该有时候有返回值，有时候没有返回值。\n7.For循环必须使用大括号\n8.If语句必须使用大括号\n9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EJavaScript原型，原型链 ? 有什么特点？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，\n如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，\n于是就这样一直找下去，也就是我们平时所说的原型链的概念。\n关系：instance.constructor.prototype = instance.__proto__\n\n特点：\nJavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。\n\n\n 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，\n 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。\n
function Func(){}\n
Func.prototype.name = \&Sean\&;\n
Func.prototype.getInfo = function() {\n
return this.\n
var person = new Func();\u002F\u002F现在可以参考var person = Object.create(oldObject);\n
console.log(person.getInfo());\u002F\u002F它拥有了Func的属性和方法\n
\u002F\u002F\&Sean\&\n
console.log(Func.prototype);\n
\u002F\u002F Func { name=\&Sean\&, getInfo=function()}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EJavaScript有几种类型的值？，你能画一下他们的内存图吗？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E栈：原始数据类型（Undefined，Null，Boolean，Number、String） \n堆：引用数据类型（对象、数组和函数）\n\n两种类型的区别是：存储位置不同；\n原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；\n引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其\n在栈中的地址，取得地址后从堆中获得实体\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EJavascript如何实现继承？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E1、构造继承\n2、原型继承\n3、实例继承\n4、拷贝继承\n\n原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。\n\n function Parent(){\n
this.name = 'wang';\n
function Child(){\n
this.age = 28;\n
Child.prototype = new Parent();\u002F\u002F继承了Parent，通过原型\n\n
var demo = new Child();\n
alert(demo.age);\n
alert(demo.name);\u002F\u002F得到被继承的属性\n
}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EJavaScript继承的几种实现方式？\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E参考：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fblog\u002F\u002Fobject-oriented_javascript_inheritance.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E构造函数的继承\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fblog\u002F\u002Fobject-oriented_javascript_inheritance_continued.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E非构造函数的继承\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E；\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Ejavascript创建对象的几种方式？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ejavascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。\n\n\n1、对象字面量的方式
person={firstname:\&Mark\&,lastname:\&Yun\&,age:25,eyecolor:\&black\&};\n\n2、用function来模拟无参的构造函数\n\n
function Person(){}\n
var person=new Person();\u002F\u002F定义一个function，如果使用new\&实例化\&,该function可以看作是一个Class\n
person.name=\&Mark\&;\n
person.age=\&25\&;\n
person.work=function(){\n
alert(person.name+\& hello...\&);\n
person.work();\n\n3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）\n\n
function Pet(name,age,hobby){\n
this.name=\u002F\u002Fthis作用域：当前对象\n
this.age=\n
this.hobby=\n
this.eat=function(){\n
alert(\&我叫\&+this.name+\&,我喜欢\&+this.hobby+\&,是个程序员\&);\n
var maidou =new Pet(\&麦兜\&,25,\&coding\&);\u002F\u002F实例化、创建对象\n
maidou.eat();\u002F\u002F调用eat方法\n\n\n4、用工厂方式来创建（内置对象）\n\n
var wcDog =new Object();\n
wcDog.name=\&旺财\&;\n
wcDog.age=3;\n
wcDog.work=function(){\n
alert(\&我是\&+wcDog.name+\&,汪汪汪......\&);\n
wcDog.work();\n\n\n5、用原型方式来创建\n\n
function Dog(){\n\n
Dog.prototype.name=\&旺财\&;\n
Dog.prototype.eat=function(){\n
alert(this.name+\&是个吃货\&);\n
var wangcai =new Dog();\n
wangcai.eat();\n\n\n5、用混合方式来创建\n\n
function Car(name,price){\n
this.name=\n
this.price= \n
Car.prototype.sell=function(){\n
alert(\&我是\&+this.name+\&，我现在卖\&+this.price+\&万元\&);\n
var camry =new Car(\&凯美瑞\&,27);\n
camry.sell(); \n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003EJavascript作用链域?\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。\n当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，\n直至全局函数，这种组织形式就是作用域链。\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E谈谈This对象的理解。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003Ethis总是指向函数的直接调用者（而非间接调用者）；\u003C\u002Fli\u003E\u003Cli\u003E如果有new关键字，this指向new出来的那个对象；\u003C\u002Fli\u003E\u003Cli\u003E在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003Eeval是做什么的？\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E它的功能是把对应的字符串解析成JS代码并运行；\n应该避免使用eval，不安全，非常耗性能（2次，一次解析成js}