传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 播妞 黑马官方管理员   /  2017-9-21 17:37  /  11482 人查看  /  699 人回复  /   8 人收藏 转载请遵从CC协议 禁止商业使用本文

随着移动互联网的兴起,HTML5 技术发进一步发展, 拥有全栈能力的高级前端工程师,迅速成为每个 IT 企业不可或缺的岗位。 作为新兴的专业,正在展示他蓬勃发展的前景,一骑绝尘,成为市场的宠儿,成为企业争抢的香饽饽,随着HTML5 等 web 前端技术兴起,前端开发大潮已经袭来!

一、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 模式下却会失效。(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)
4div+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

优雅降级观点
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IEMozilla 等)的前一个版本。
在这种设计范例下,旧版的浏览器被认为仅能提供简陋却无 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
渐进增强观点
渐进增强观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角,
阴影(CSS3),要求兼容(使用图片背景,放弃 CSS3),你会如何说服他?
7、为什么利用多个域名来存储网站资源会更有效?
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数,优化页面响应速度
防止不必要的安全问题
8、请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更健康,开发者遵循统一的标准,降低开发难度,开发成本,SEO 也会更好做,也不会因为滥用代码导致各种 BUG、安全问题,最终提高网站易用性。
9、请描述一下 cookiessessionStorage localStorage 的区别?
sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97C4.tmp.png的本地存储,仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主
动删除数据,否则数据是永远不会过期的。
web storage cookie 的区别
Web Storage 的概念和 cookie 相似,区别是它是为了更大容量存储设计的。Cookie 的大小是受限的,并且每次你请求一个新的页面的时候 Cookie 都会被发送过去,这样无形中浪费
了带宽,另外 cookie 还需要指定作用域,不可以跨域调用。
除此之外,Web Storage 拥有 setItem,getItem,removeItem,clear 等方法,不像 cookie需要前端开发者自己封装 setCookiegetCookie。但是 Cookie 也是不可以或缺的:Cookie的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 Web Storage 仅仅是为了在本地存储数据而生。
10、简述一下 src href 的区别。
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。
src source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片 frame 等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。

完整版请下载PDF文件,回帖即可下载文件哦~
游客,如果您要查看本帖隐藏内容请回复

评分

参与人数 7黑马币 +19 收起 理由
910261681 + 1 神马都是浮云
cghbh + 5
zhanghaoqi + 1
w1234567 + 1
播娃 + 5 很给力!
cxc123123 + 5
真的侠客杀回了 + 1 赞一个!

查看全部评分

分享至 : QQ空间
收藏

699 个回复

倒序浏览
楼主好人
回复 使用道具 举报
好人一生平安
回复 使用道具 举报
来瞅瞅喂!
回复 使用道具 举报
好资料,值得收藏
回复 使用道具 举报 1 0
下载下来看一看
回复 使用道具 举报
这个才是我想要的啊
回复 使用道具 举报
求资源   求资源  求资源
回复 使用道具 举报
好人一生平安
回复 使用道具 举报
下载文件
回复 使用道具 举报
十分感谢!
回复 使用道具 举报
xiexie
回复 使用道具 举报
我要学习

点评

666666666  发表于 2017-10-6 18:26
回复 使用道具 举报
sdfsdfsdfsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
回复 使用道具 举报

来瞅瞅喂!
回复 使用道具 举报
好东西,正在寻找
回复 使用道具 举报
感谢分享 楼主真是好人
回复 使用道具 举报
谢谢啦,楼主好人
回复 使用道具 举报
谢谢黑马提供的面试题,下来多看看
回复 使用道具 举报
资料资料资料资料资料
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条