2022年前端面试题 .pdf

JavaScript/HTML/CSS 1怎样使用JavaScript 写 div 或 span 2div 和 span 有什么区别？3JavaScript 中对象没有定义就使用，会出现什么问题？返回JavaScript 中的什么类型?4JavaScript 中有几种数据类型？分别是什么？5JavaScript 中有 trim 函数吗？如果没有如何给String 类型加入trim 函数？6JavaScript 中 prototype 关键字有什么作用？7JavaScript 中有继承的概念吗？8你遇到浏览器兼容性问题吗？举个列子？9JavaScript 中获取 HTML元素有几种方式？10JavaScript 总 isNan 是什么意思？11JavaScript 程序如何调试？12你使用过正则表达式吗？使用正则表达式都做什么？正则表单是在JavaScript中可以使用，在Java中可以使用吗？其他语言可以使用吗？13在 HTML中 readOnly 和 Disabled 有什么共同点和不同点？14什么是JS 事件冒泡AJAX 1Ajax 核心对象叫什么名字？2Ajax 和 Java 有关吗？3Ajax 运行在什么地方？4Ajax 有几个状态？5Ajax 有什么优点？6Ajax 使用的时候需要注意些什么？7你们项目中都用Ajax 做过什么？8什么是异步？什么是同步？9什么是 callback 机制？HTML、CSS部分要点：对 Web 标准的理解、浏览器差异、CSS 基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3 技术等Doctype 作用?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1）、声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 5 页 -（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。2.行内元素有哪些？块级元素有哪些？（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.CSS的盒子模型？（1）两种，IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了border 和 pading;（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).4.link 和import 的区别是?（1）、link 属于 XHTML标签，而 import 完全是 CSS 提供的一种方式;（2）、页面被加载的时候，link-会同时被加载，而import 引用的 CSS 会等到页面被加载完再加载;（3）、import 只有在 IE5 以上的才能识别，而link 是 XHTML标签，无兼容问题;（4）、link 方式的样式的权重高于 import 的权重.5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？em 和 px 有什么关系？*ID 和 Class;*Class 可继承、font-size font-family color,列表UL LI DL DD DT 可继承;*不可继承：border padding margin width height;*优先级就近原则，样式定义最近者为准;*载入样式以最后载入的定位为准;优先级为:!important id class tag important 比 内联优先级高如果父元素定义字体大小12px，子元素定义1em，大小就是12px。三、如何让2 个并列的 div 自动等高（不设高度）注：如果能写出3 种常见方法固然最好，但最好写一下各自优缺点，否则面试时肯定会问你为什么这样写1、背景模拟法（假高度），按照尺寸制作背景，平铺，当内容增多时，背景就会向下纵向名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 5 页 -重复，看起来就向左右两个div 都自动向下延伸了一样。2、表格嵌套法（不难理解，表格都是等高的，就是在div 中嵌套表格）3、内外补丁法（最推荐的方法，因为只用css实现的，但初学者不易理解）*margin:0;padding:0;#wrap overflow:hidden;(这行代码是重点，否则你会看到页面很长很长)padding:0;padding-left:180px;（内补丁）#left,#right height:auto;margin-bottom:-10000px;（外补丁）padding-bottom:10000px;（内补丁）#left display:inline;float:left;width:180px;margin-left:-180px;（外补丁）background:#0CF;#right float:right;width:100%;background:#FC6;这里说一下内外补丁，其实也没那么难理解，我的理解就是相互抵消。多用用margin 负值，你会了解这个原理的。6.如何居中 div,如何居中一个浮动元素?给 div 设置一个宽度，然后添加margin:0 auto 属性div width:200px;margin:0 auto;设置容器的浮动方式为相对定位确定容器的宽高宽 500 高 300 的层设置层的外边距.Div Width:500px;height:300px;Margin:-150px 0 0-250px;position:absolute;left:50%;名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 5 页 -top:50%;7.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，hack 的技巧？*IE 浏览器的内核Trident、Mozilla 的 Gecko、google 的 WebKit、Opera 内核 Presto；*png24 为的图片在iE6 浏览器上出现背景，解决方案是做成PNG8.*浏览器默认的margin 和 padding 不同。解决方案是加一个全局的*margin:0;padding:0;来统一。*IE6 双边距 bug:块属性标签float 后，又有横行的margin 情况下，在ie6 显示 margin比设置的大。解决方案是在float 的标签样式控制中加入display:inline;将其转化为行内属性。*浮动 ie 产生的双倍距离#box float:left;width:10px;margin:0 0 0 100px;/这种情况之下IE 会产生 20px 的距离，这时需要设置display:inline;/使浮动忽略 *渐进识别的方式，从总体中逐渐排除局部。*首先，巧妙的使用“9”这一标记，将IE 游览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样IE8 已经独立识别。css .bb background-color:#f1ee18;/*所有识别*/.background-color:#00deff9;/*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 请求数。8.html5CSS3 有哪些新特性、移除了那些元素？如何处理HTML5 新标签的浏览器兼容问题？如何区分HTML 和 HTML5？HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，功能的优化和改进。名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 5 页 -*绘画canvas 元素用于媒介回放的video 和 audio 元素本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search CSS3 实现圆角，阴影，对文字加特效，增加了更多的CSS 选择器多背景rgba 新的技术 webworker websockt 移除的元素纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；*是 IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5 新标签，/9*你如何优化自己的代码？/*代码重用避免全局变量（命名空间，封闭空间，模块化mvc.）拆分函数避免函数过于臃肿注释*/10.请说出三种减低页面加载时间的方法/*1、压缩 css、js 文件2、合并 js、css文件，减少http 请求3、外部 js、css文件放在最底下4、减少 dom 操作，尽可能用变量替代不必要的dom 操作*/常见浏览器的内核使用 Trident 内核的浏览器：IE、Maxthon、TT、The World 等；使用 Gecko 内核的浏览器：Netcape6 及以上版本、FireFox、MozillaSuite/SeaMonkey；使用 Presto内核的浏览器：Opera7 及以上版本；使用 Webkit 内核的浏览器：Safari、Chrome。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 5 页 -