前端

早前我更新过一篇 《前端面试题》，据反馈，确实帮助到了不少去面试的新人或者换工作的菜鸟 他们留言或者直接赞赏表示感谢，还有问答案的，不过我想说：我就是不给你答案，自有原因，给了答案，各位还会去靠自己去找寻答案，记忆犹新吗？ 这次，有一周没更了，私事比较忙，不过还是一样帅！由于过了五一就是面试季，所以这次在更新一篇2017年面试会涉及到的面试题范围，供大家提前做准备 上一篇引语开道 这些问题都很普通 但很基础和重要，决定了你可以走多远和拿到敲门砖，所以不要觉得不重要，因为这些问题都答不到70%，那么你基本可以和正经的重视前端的大公司说拜拜了。 如果你一些基本问题答对了，那么我可以肯定的是 你面试任何公司的前端技术轮，都是没问题的。不是我吹，是真的 基础很重要 也很简单都可以自己查到，做好准备即可。 由于我拿到过 阿里巴巴事业部 的offer（以前的事儿了），我就结合一下 淘宝前端的一些面试题（真的是只限新人），整理一下，后面会送上面试技巧 我们开始： 「 CSS篇 」 1. CSS 盒子模型，绝对定位和相对定位 2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 3. 如何保持浮层水平垂直居中 4. position 和 display 的取值和各自的意思和用法 5. 样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验 6.

. 前沿 之前做过互联网金网，或者涉及到金融，结账，说白了就是接触到钱的问题前端安全就会县的尤为重要了。我了解的也不是很透彻，这个东西还是要好好学习一下啊。 目前来说前端安全一般有三个攻击网站的方法 第一个 xss攻击 xss：跨站脚本攻击，攻击者通过注入非法的html标签或者javascript代码，从而当用户浏览该网页时，控制用户浏览器。 造成的影响： 1，利用虚假输入表单骗取用户个人信息。 2，利用脚本窃取用户的cookie，帮助攻击者发送恶意请求。 3，显示伪造的文章或者图片。 如何防范 只要有输入数据的地方就有可能有xss攻击，例如：登录，注册，填写个人信息。 防范措施： 1，前后端对输入的内容进行检验，过滤 2，在cookie中设置httpOnly属性js脚本就无法获取cookie信息。 第二个 csrf攻击 跨站点请求伪造，冒充用户发起请求。 造成的影响： 1，更新用户信息 2，使用已通过 的用户信息购买产品 3， 使用已通过 的用户信息发表评论 如何防范 1, 验证码，极验，就是在做一些重要操作时需要进行验证才能完成，这样可以更好的防范csrf 2, 众所周知，尽量使用post请求 3， 请求加token验证 第三个 点击劫持 就是利用网页上透明的按钮或链接做成陷阱，当用户点击时跳转到攻击页面，最为常见的就是 iframe 跳转 如何防范 X-FRAME

1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级（graceful degradation): 一开始就构建站点的完整功能， 然后针对浏览器测试和修复 渐进增强（progressive enhancement): 一开始只构建站点的最少特性， 然后不断针对各浏览器追加功能。 优雅降级和渐进增强都关注于同一网站 在不同设备里不同浏览器下的表现程度。 区别: “优雅降级”观点认为应该针对那些最高级、 最完善的浏览器来设计网站。 而将那些被认为“过时”或有功能缺失的浏览器下 的测试工作安排在开发周期的最后阶段，并把测试 对象限定为主流浏览器（如 IE、Mozilla 等）的 前一个版本。 “渐进增强”观点则认为应关注于内容本身。 总结: "优雅降级"就是首先完整地实现整个网站, 包括其中的功能和效果. 然后再为那些无 法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验 却不至于完全失效。 "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及 完整内容, 然后再以无侵入的方法向页面增加无 害于基础浏览器的额外样式和功能。 当浏览器升级时, 它们会自动呈现并发挥作用。 2. 请说说浏览器内核的组成? 浏览器的结构: 用户界面（UI） - 包括菜单栏、工具栏、地址栏、 后退/前进按钮、书签目录等，也就是能看到的除

在浏览有关Sciter技术前，您需要花点时间浏览以下内容。 您是否需要花时间学习Sciter？ 如果您的工作或您想从事的工作与桌面应用开发无关，那么您不需要学习Sciter。 如果您不认同HTML\CSS\JS等技术,那么您不需要学习Sciter。 如果您的桌面应用产品属于性能密集型，UI界面很简单，那么不建议您使用Sciter。 如果您的团队中没有人懂Web前端技术栈，也没有计划招聘或者培训，那么不建议您使用Sciter。 **** 如果您正在寻找一种类Web前端的技术帮您实现桌面应用，那么一定要考虑使用Sciter。 如果您正在MFC、WPF、QT等UI框架中犹豫不决时，可以考察一下Sciter是否符合您的业务。 Sciter适合页面内容丰富，呈现效果多样化的桌面应用产品。 Sciter借鉴了Web前端（HTML\CSS）的思想和技术体系。所以，对Web前端团队是非常友好的。 在众多WebUI技术中，Sciter有什么优势？ WebUI技术相较于MFC、WPF、QT、DirectUI等技术，其显著特点是其采用HTML\CSS技术标准。目前，市面上常见的WebUI技术都是从浏览器项目中剥离出来的，打包解析引擎、渲染引擎、脚本引擎、网络服务等成一个容器壳，然后容器加载HTML、CSS、JS文件等。Sciter的基本原理与其一致。但是，Sciter实现了自己的解析引擎、渲染引擎

背景： java后台开发人员，产品前后端分离，产品没切换vue前端框架之前，自己都是在本地dea启动一个tomcat跑一个网站来进行开发小页面功能或者直接在开发环境上开发小页面功能。 现在产品切换vue前端框架快一年了吧，还是没有在本地跑过前端的东西，哎，产品卖到客户那边需定制，技术就跟不上产品的思路。 趁着鼠年不能出门，抽空补了一下vue, node。 vue还是要顶一下，各种组件化的东西，不是专门前端人员，玩这些，很吃力。有过三个月时间，前端人员给后台开发人员强推了一波可视化编程的东西，真蛋疼， 多重意境。如果哪天哪个后台人员，谁用谁知道。 简单来说，前端人员只负责组件化开发，后台人员负责使用他们的组件来完成业务。。大势所趋。。不吐槽了，回归正传。 技术资料： https://cn.vuejs.org/v2/guide/comparison.html https://www.iviewui.com/docs/guide/start 步骤如下： 一、安装nvm https://www.cnblogs.com/gaozejie/p/10689742.html 二、安装node, npm 建议不要安装最新版本的， 不然都是坑 三、进入vue项目目录，安装依赖npm install 由于是公司项目，依赖repo要换成公司的 a.npm config set registry http:

文章目录 6.9. HTML5 新增表单控件 HTML5 新增表单控件 6.9. HTML5 新增表单控件 HTML5 新增表单控件 新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索 <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>时间:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>数量:</label><input type="number" name=""> <br><br> <label>范围:</label><input type="range" name=""><br><br> <label>电话:</label><input type="tel" name=""><br><br> <label>颜色:</label><input type="color" name=""

【一面】 其实还比较简单，大致就介绍了一下自己学了撒。以下几个问题 1、移动端和pc差别 2、html5的特性 3、node.js 4、jq源码读过之后有什么提升 5、js创建对象的几种方式 大致就是这个几个了，还有些其他的记不清楚了。总的来说，大家面一面不用太紧张一般都是基础的问题,一面感觉答的很不错 【二面】 这是一个月黑风高的晚上，我在下班回家的路上二面的大哥给我打了个电话。我说我正在回去的路上10分钟以后面试可否(我可是住在山上啊。一路面一路走肯定累死).回到宿舍，大哥打电话来了。说实话，二面的难度绝对和一面有质的差别。所以说二面通过的同学就属于原则上技术上问题不大。即使二面挂了不要灰心。扯远了，继续说面试题 1、 在地址栏输入url中间会经历什么 2、你所了解的前端技术栈有哪些 这个可能我要多说一下。本来吧这两个问题看似简单其实暗藏杀机。 首先第一个问题。你的回答中将会包括http协议 服务器的知识,浏览器渲染的知识。打个比方，dns是什么 作用。如果你能把每一块说的很清楚的话，那真的没撒问题了。 第二个问题就是考察的是你在前端方面的可扩展性，如果你了解的越多证明你知道的越多。可塑性可发展性更强。 二面说实话我答的不是很好，但是很感谢二面前辈让我过了。嘿嘿 【三面】 是在一个下午,我和哥们去开会了，结果手机没带。回来一看，哎，内心是奔溃的啊。恰好是周六，心想，死定了

文章目录 4. Photoshop 课程介绍 4. Photoshop 课程介绍 学习使用Photoshop的基本使用，以及Photoshop中关于切图这一块的知识，目的是能熟练使用Photoshop查看UI设计师的设计效果图，同时利用Photoshop切图来制作专业html页面。 来源： CSDN 作者： 汪雯琦 链接： https://blog.csdn.net/qq_35456045/article/details/104116370

这个作业属于哪个课程 转到 这个作业要求在哪里 转到 团队名称 西柚排课王 这个作业的目标 在需求分析结束后进行详细的系统功能设计以及相应的技术安排分工，以达到更好的项目开发准备 一、团队成员的姓名学号列表 姓名 学号 秦傲明 201731062308 韩浩 201731062319 黄青松 201731062322 王越豪 201731062324 周金柽 201731062321 王雷 201731062313 刘洋 201731062314 黄睿 201731091317 二、本阶段任务分工情况    秦傲明 ：配合进行数据库搭建以及数据收集。完成团队博客作业；并与队员进行项目沟通以及项目进度把控。    韩浩 ：负责前端框架搭建，以及文档作业。    黄青松 ：进行后端算法研究，与负责数据库的队员进行沟通，把控项目整体功能实现。    周金柽 ：负责前端框架搭建，并完成团队答辩ppt。    王越豪 ：协助负责前端框架搭建，并完成文档作业。    刘洋 ：进行数据库建表以及数据收集，并完成文档作业。    王雷 ：进行数据库数据收集，并完成文档作业。    黄睿 ：协助进行后端算法研究，以及数据库数据收集。 三、概要设计 系统大致功能介绍   首先我们的整体系统服务于排课，所有的功能实现需要在选课结果后我们拿到数据后进行排课。所以我们实现的核心功能是在已有课程的基础上

-》list-style-type 属性设置列表项标记的类型。 -》cursor 属性-设置不同的光标： span.crosshair {cursor:crosshair} span.help {cursor:help} span.wait {cursor:wait} CSS梅兰商城项目实战基础视频教程笔记 -》目录结构、重置样式、名词（版心、通栏） -》css精灵图（雪碧图） ： 一定要是小图且不太会变化，图与图之间要有空隙，精灵图制作完成后，要留出足够位置方便扩展。 使用：结合background -》同一行中，两个标签一个靠左一个靠右： 一个设置左浮动，一个设置右浮动。可以放在公共包内，方便调用。 .float-left{ float：left； } .float-right{ float：right； } 需要用的时候，在class中加上float-left或float-right，另外需要使用前引入这个css文件 -》怎么让文字垂直居中？ -》两头对齐：？？flex -》CSS outline-style 属性 设置元素的整个轮廓的样式。位于边框边缘的外围，可起到突出元素的作用。样式不能是 none，否则轮廓不会出现。 none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓