2022年前端开发面试题集锦 .pdf

《2022年前端开发面试题集锦 .pdf》由会员分享，可在线阅读，更多相关《2022年前端开发面试题集锦 .pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 前端开发面试题集锦（一）你如何理解HTML 结构的语意化? 1、去掉或样式丢失的时候能让页面呈现清晰的结构；2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页；3.PDA 、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS 的支持较弱）；4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重；5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记；6、便于团队开发和维护。Doctype 文档声明的严格模式和混杂模式，如何触发这两种模式，区分它们有何意义? 1、如何触发两种模式：加入 xml 头部声

2、明，可以触发IE 浏览器的Quirks mode ，触发之后，浏览器解析方式就和IE5.5 一样，拥有IE5.5 一样的 bug 和其他问题，行为（Javascript ）也是如此。2、IE6 的触发：在XHTML 的 DOCTYPE前加入 XML 声明， 3、IE7 的触发：在XML 声明和 XHTML 的 DOCTYPE之间，加入HTML 注释 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 9 页 - - - - - - - - - 2 4、IE6 和 IE7 都可

3、以触发的：在HTML4.01的 DOCTYPE文档头部，加入HTML 注释 5 、 在 页 面 顶 部 加，将触发“怪异模式”6、没有使用DTD 声明或者使用HTML4 以下（不包括HTML4 ）的 DTD 声明时，基本上所有的浏览器都是使用quirks mode呈现谈谈以前端角度出发做好SEO 需要考虑什么？1、了解搜索引擎如何抓取网页和如何索引网页；2、Meta 标签优化；3、如何选取关键词并在网页中放置关键词；4、了解主要的搜索引擎；5、主要的互联网目录6、按点击付费的搜索引擎；7、搜索引擎登录；8、链接交换和链接广泛度（Link Popularity）；9、标签的合理使用。我们知道可以

4、以外链的方式引入CSS 文件，请谈谈外链引入CSS 有哪些方式，这些方式的性能有区别吗？CSS 的引入方式最常用的有三种：第一：在head 部分加入 ,引入外部的名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 9 页 - - - - - - - - - 3 CSS 文件；第二：在head 部分加入 divmargin: 0;padding: 0;border:1px red solid; 第三：直接在页面的标签里加 CSS Sprite是什么，谈谈这个技术的优缺点。CSS

5、 sprites在国内很多人叫css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到中去，减少对服务器的请求次数，提高访问速度。1、优点：（1）利用 CSS Sprites能很好地减少了网页的http 请求，从而大大的提高了页面的性能，这也是 CSS Sprite的优点，也是其被广泛传播和应用的主要原因；（2）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素命名，从而提高了网页的制作效率。（3）换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来也很方便。2、缺点：（1）在图片

6、合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间， 防止板块内显示不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易将背景断裂；（2）CSS Sprites 在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐。（3）CSS Sprites 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的好不要动，这样避免改动更多的css ，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字加了，还要改动css 。名师资料总结

7、- - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 9 页 - - - - - - - - - 4 以 CSS3 标准定义一个webkit 内核浏览器识别的圆角（尺寸随意）-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; 行内元素有哪些？块级元素有哪些？CSS 的盒模型？行内元素有： a b span I em img input select strong 级元素有： div ul ol

8、li dl dt dd h1 h2 h3 h4 p 盒模型： margin border padding width 前端页面有哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。1、网页的结构层（structurallayer ）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”2、网页的表示层（presentationlayer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回

9、答。3、网页的行为层（behaviorlayer ）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 9 页 - - - - - - - - - 5 html 中 form 里 action 方法的 get 和 post 有什么区别1、Get 是用来从服务器上获得数据，而Post 是用来向服务器上传递数据。2、Get 将表单中数据的按照variable=value的形式，

10、添加到action 所指向的URL 后面，并且两者使用 “?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action 所指向 URL 。3、Get 是不安全的，因为在传输过程，数据被放在请求的URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL 记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。4、Get 传输的数据量小，这主要是因为受URL

11、长度限制；而Post 可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。5、Get 限制 Form 表单的数据集的值必须为ASCII 字符；而 Post 支持整个ISO10646字符集。6、Get 是 Form 的默认方法。html 元素的 id 跟 class 什么区别id 和 class 是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别1、在 css 样式表中书写时，id 选择符前缀应加“#”， class 选择符前缀应加“.”2、id 属性在一个页面中书写时只能使用一次，而class 可以反复使用

12、3、id 作为元素标签用于区分不同结构和内容，而class 作为一个样式，可以应用到任何结构和内容当中去4、布局上的一般原则：id 先确定结构和内容再为它定义样式。而class 正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 9 页 - - - - - - - - - 6 5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript 通过 id 来控制元素

13、时就会出错6、在实际应用中，class 常被用到文字版块和页面修饰上，而id 多被用在宏伟布局和设计包含块，或包含框的样式。Ajax 是什么？Ajax 不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax 包括：1、XHTML 和 CSS 2、使用文档对象模型(Document Object Model)作动态显示和交互3、使用 XML 和 XSLT 做数据交互和操作4、使用 XMLHttpRequest进行异步数据接收5、使用 JavaScript 将它们绑定在一起你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼

14、容性有哪些？怎么会出现？解决方法是什么？1、DOCTYPE 影响CSS 处理2、 FF: 设置padding 后 ，div 会 增加height 和width ，但IE 不会 ，故需要用 !important 多设一个height 和 width 3、FF: 支持!important ， IE 则忽略，可用 !important 为 FF 特别设置样式4 、 div 的 垂 直 居 中 问 题 : vertical-align:middle; 将 行 距 增 加 到 和 整 个DIV一 样 高line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行5、在moz

15、illa firefox和 IE 中的BOX模型解释不一致导致相差2px 解决方法：divmargin:30px!important;margin:28px; 注 意 这 两 个margin的 顺 序 一 定 不 能 写名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 9 页 - - - - - - - - - 7 反， !important这个属性IE 不能识别，但别的浏览器可以识别。html5 离线存储H5 的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保

16、存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web 应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作；H5 的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 来引入一个manifest 文件， 这个文件的路径可以是相对的，也可以是绝对的，如果你的web 应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择。iframe 的优缺点1、缺点：在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。当 “蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而

17、无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。2、优点：从上文中我们可以发现，使用 ifame 框架的弊端是无法被搜索引擎所爬行抓取。但凡事名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - -

18、 - 第 7 页，共 9 页 - - - - - - - - - 8 总是具有两面性。它的这个缺点也可能是他的优点。利用这一点那我们就可以把我们站点上一些需要给我们的用户查看，但是不需要搜索引擎爬行的内容用ifame 框架进行显示， 这样就可以让ifram 发挥真正的效果了，而且有我们站点中的代码也可以得到很大的精简，举一个例子， 就如笔者上文提到的添加微博直播信息，这些微博信息我们并不需要提供给搜索引擎，而我们需要提供的是与访客的一个互动的体验，如下图所示，而如果我们使用ifame 框架嵌入微博的信息，不仅可以简便的添加站点的微博直播平台，同时我们看到代码也十分的精简。iframe 好在能够

19、把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最套讨厌的 .那么你的网站即使做的在好,也排不到好的名次!如 果是动态网页， 用 include 还好点！但是必须要去除他的 标签！总结：框架的优点重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度) 方便制作导航栏框架的缺点会产生很多页面，不容易管理不容易打印浏览器的后退按钮无效代码复杂 ,无法被一些搜索引擎索引到多数小型的移动设备（PDA 手机）无法完全显示框架多框架的页面会增加服务器的http 请求由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃提示 : 目前

20、框架的所有优点完全可以使用Ajax 实现，因此已经没有必要使用框架了。视频主持人http:/ eshi123 CSS 盒模型原理1、W3C 盒子模型的范围包括margin 、border 、padding 、content ，并且content 部分不包含其他部分。2、IE 盒子模型的范围也包括margin 、border 、padding 、content ，和标准W3C 盒子模名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 9 页 - - - - - - - - - 9 型不同的是： IE 盒子模型的content 部分包含了border 和 pading 。CSS display:none和 visibility:hidden的区别visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 9 页 - - - - - - - - -