Java知识分享网 - 轻松学习从此开始!    

Java知识分享网

Java1234官方群25:java1234官方群25
Java1234官方群25:838462530
     

GIT视频教程(结合github,码云)免费领取

BAT一线大厂笔试面试打包下载

领取国内优秀就业,加薪,跳槽项目课程源码-vue2+jwt+springboot+mybaits前后端分离通讯录系统课程

SpringBoot打造企业级进销存

Java1234 VIP课程

领取微信扫码登录Java实现视频教程

Java1234至尊VIP(特价活动)

2020年前端面试真题 PDF 下载


分享到:
时间:2020-06-15 15:20来源:http://www.java1234.com 作者:小锋  侵权举报
2020年前端面试真题 PDF 下载
失效链接处理
2020年前端面试真题 PDF 下载

本站整理下载:
 
相关截图:
 
主要内容:

一、HTML 和 CSS
1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
IE: trident 内核
Firefox:gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发)
2、每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
3、Quirks 模式是什么?它和 Standards 模式有什么区别
从 IE6 开始,引入了 Standards 模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟,所以 IE5 等之前的浏览器对 CSS 的支持很差, IE6 将对 CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果 IE6 支持 CSS 则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的
渲染机制呢?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6 也是类似这样做的,它将 DTD 当成了这个“参数”,因为以前的页面大家都不会去写 DTD,所以 IE6 就假定 如果写了 DTD,就意味着这个页面将采用对 CSS 支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是 Quirks模式(怪癖模式,诡异模式,怪异模式)。
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型:在 W3C 标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在 Quirks 模式下,IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽:在 Standards 模式下,给<span>等行内元素设置 wdith 和 height 都不会生效,而在 quirks 模式下,则会生效。
设置百分比的高度:在 standards 模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
margin:0 auto 设置水平居中:使用 margin:0 auto 在 standards 模式下可以使元素水平居中,但在 quirks 模式下却会失效。(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)
4、div+css 的布局较 table 布局有什么优点?
改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化(seo)搜索引擎更友好,排名更容易靠前。
5、 img 的 alt 与 title 有何异同? strong 与 em 的异同?
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理(UA),alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt
当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签,强调,表示内容的重要性
em:斜体强调标签,更强烈强调,表示内容的强调点
6、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器
进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps979F.tmp.pngfile:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97B0.tmp.pngfile:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97B1.tmp.png
 
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角,
阴影(CSS3),要求兼容(使用图片背景,放弃 CSS3),你会如何说服他?
7、为什么利用多个域名来存储网站资源会更有效?
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数,优化页面响应速度
防止不必要的安全问题

 

------分隔线----------------------------
锋哥公众号


锋哥微信号


关注公众号
回复 666
获取 java
从菜鸡到大神
全套视频教程