1.Web前端开发主要学哪些课程？
2.5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享

Web前端开发主要学哪些课程？

       è€å®žè¯´ï¼Œå‰ç«¯ç»è¿‡è¿™å‡ å¹´çš„快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

基础部分：

       1、HTML + CSS 这部分学习，可以模仿一些网站做些页面，在实践中积累经验。做到能与UI对接，能%重构网站静态页面的开发，为后期编写页面逻辑、动态效果打基础。

       2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养逻辑思维能力。能够独立完成网站的页面开发（包括合理布局，JavaScript操作DOM）

进阶部分：

       æœ‰äº†ä»¥ä¸ŠåŸºç¡€ï¼Œå°±å¯ä»¥è¿›è¡Œä¸€èˆ¬çš„静态网页设计，不过对于复杂的页面还需要进一步学习。

       3、JavaScript高级与服务器基础，深入面向对象编程，具备移动端开发能力，处理浏览兼容问题，深入学习ES6/ES7语法规范，前后端分离开发思想。

       4、框架与服务器，数据库，前端安全的学习，深入了解Node，数据库操作，前后端分离技术，前后台协作开发。熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/MySQL数据库CRUD（Mongoose）；掌握微信小程序开发，掌握Vue2.x基础，Vue-router，Vuex等等。

       5、React与组件化开发，深入学习组件化开发思想，了解webpack使用，掌握React开发基础，Hook，create-react-app等等。

升级部分：

       æœ‰äº†ä»¥ä¸ŠçŸ¥è¯†ï¼Œå¯¹äºŽå¤§å¤šæ•°å°åž‹ç½‘站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

其他补充部分：

       å‰ç«¯é¡¹ç›®åŒæ ·é¢ä¸´è½¯ä»¶ç”Ÿå‘½å‘¨æœŸçš„各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

       ä»¥ä¸Šå†…容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

       1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

       2、后端。应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

       æœ€åŽï¼Œæœ‰ç»éªŒçš„程序员都知道，学习编程最有效率的方式就是把你扔到一个项目组，连滚带爬的做一两个项目下来你马上会发现所有的知识点全都连到一起了，不再是分散的，而是形成一个整体了。那种感觉是仅仅深入钻研知识点而不写真实项目的人所不能体会的。 一个项目就是一根绳子可以把大片的知识串到一起。

       å¦‚果想锻炼实际开发的能力而不仅仅是背诵或者了解一些知识点，如果想成为真正的好手，那么，还是做项目吧！

       æ•´ä½“来看的话，Web前端开发需要学习的内容还是比较多的。前端是一门涵盖面很广的学科，而且技术更新较快，优秀的Web前端开发工程师应该具备快速学习能力。如果没有快速学习能力，就跟不上Web发展的步伐，所以需要不断提升自己，不断学习新技术、新模式。

5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享

       本文带你深入浅出，知源破了SVG反爬虫的码知套路，学会之后，知源可应用于某点评网。码知

       一、知源初识SVG反爬：

       在本地网页测试中，码知仿糗事百科源码任务是知源爬取票据中的产品价格信息，审查元素时发现目标节点被四个d标签代替。码知选中一个7，知源对应class=lhtqsc的码知d标签。查看css样式，知源发现描述此标签的码知两段语句，第二段描述背景，知源值为px大小。码知

       打开svg文件查看，知源数论指标源码发现为无规律数字。网页源代码显示，为张特殊的SVG页面。

       二、什么是SVG？：

       SVG是用于描述矢量图的图形格式，广泛应用于web站点与APP中，常见形式为图标。emafa指标源码通过新建HTML文件，将SVG内容写入其中。浏览器打开后，使用text标签定义文本，通过fill属性设置颜色与坐标规则。增加行后，显示文本字符位置与颜色变化。lev指标源码

       三、SVG与CSS联系：

       SVG中X轴正方向为从左到右，y轴正方向从上到下；CSS中X轴负数向右，Y轴是负数向下。新建SVG文件与CSS文件，定义字符风格、大小与颜色。阿里淘宝源码在SVG中定位字符，通过计算X轴与Y轴坐标完成映射。浏览器打开后，字符h成功映射。

       四、Python抓取数据：

       回到目标网站，实战抓取数据。获取css样式文件与svg文件内容，匹配class属性值对应CSS参数与字符大小。测试寻找class=lhtqsc的css对应参数和字符大小，输出结果验证一致。观察svg文件，获取文本大小与Y轴坐标值，整理数据。通过寻找最近接近的y值，找出是哪个text标签包含的值。最终，利用切片特性寻找到对应的数值。

       总结，通过本文学习SVG反爬虫原理与绕过实战，你将能够应用于某点评网等场景。实践操作后，你会发现，解决这一问题并非难事。