前端

一.HTML基础 html分为块级元素和内联元素。 1.1块级元素 1.1.1 基本格式和基本元素： < html > < head > < title > 标题 < / title > < / head > < body > < h1 > 标题一 < / h1 > < h2 > 标题二 < / h2 > < p > 段落 < img src = "批注 2020-02-21 090550.png" alt = "图片" / > < / p > < / body > < / html > 按照编辑时候的文本格式显示 插入水平线 放入作者地址，联系方式等 缩进 1.1.2列表标记： 有序列表： 无序列表： 把前者的ol 改成ul 就是无序列表 自定义列表： 列表之间可以嵌套。 1.2内联元素 3.重要元div和span 1> div 功能：分块 2>span 功能：用于强调 id 属性用于识别 class属性用于归类 来源： CSDN 作者： X_zhikang 链接： https://blog.csdn.net/X_zhikang/article/details/104423318

前端监控一般分为三种，分别为页面埋点、性能监控以及异常监控。 我们将来学习这些监控相关的内容，但是基本不会涉及到代码，只是让大家了解下前端监控该用什么方式实现。毕竟大部分公司都只是使用到了第三方的监控工具，而不是选择自己造轮子。 页面埋点 页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据： PV / UV 停留时长 流量来源 用户交互 对于这几类统计，一般的实现思路大致可以分为两种，分别为手写埋点和无埋点的方式。 相信第一种方式也是大家最常用的方式，可以自主选择需要监控的数据然后在相应的地方写入代码。这种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。 另一种无埋点的方式基本不需要开发者手写埋点了，而是统计所有的事件并且定时上报。这种方式虽然没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。 性能监控 性能监控可以很好的帮助开发者了解在各种真实环境下，页面的性能情况是如何的。 对于性能监控来说，我们可以直接使用浏览器自带的 Performance API 来实现这个功能。 对于性能监控来说，其实我们只需要调用 performance.getEntriesByType(‘navigation’) 这行代码就行了。对，你没看错，一行代码我们就可以获得页面中各种详细的性能相关信息。

什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，可以说是没有独立的“人格”可言。 前端负责切图和编写静态页面模板，后端将数据渲染到前端提供的页面模板中，最后将页面渲染到浏览器展示。 这个过程中，前端只提供页面模板或者写一些JavaScript脚本，有的甚至JS脚本都是后端来写，前端的作用只局限于切图和样式模板文件，这种角色就是传说中的“切图仔”。 这也是为什么行业内都觉得前端是一个很简单的工作，只要花个一周，学下HTML、CSS和PS的简单技巧就可以胜任的工作。 现在看来，那时候的前端就是一个打酱油的，发展前景很有限。那时候的JavaScript脚本也比较简单，一个jQuery就可以横扫天下，所以对于精通语言类代码的后端程序员来说，可以很快的上手JavaScript，对前端来说，发展空间就更小了。 前后端分离，不只是简单的代码的分离。 首先是要架构上分离解耦，逐渐摆脱前后端在架构上的依赖，前后端各司其职，分开部署在不同的服务器上，通过RESTful接口传递数据。减轻后端服务器的压力，后端服务器不再负责页面渲染，只负责输入数据，吞吐量提升了好几倍。 其次是逻辑分离，不分离的时候，对于业务代码的界限很不明确

　 　不知不觉，我已经在公司实习了四个月，确实比较辛苦，但是能真真切切地感受到自己的成长，这就很舒服了呀嘻嘻~，下面这几个点主要是想分享给在校大学生，可能大家会觉得都是一些老生常谈的东西，但是确实是我实习四个月以来感受最深的东西。 一、版本控制器的重要性 　 　在真正的商业项目中，版本控制是必不可少的，它主要为我们解决了以下几个问题： 　　(1)项目代码放在一个远程仓库(svn)，公司每个开发人员都可以很快的从远程仓库下载代码进行开发。(突然想到大学期间用ftp传代码的日子...) 　　(2)新发布到线上的代码有bug怎么破？如果没有版本控制的话，那你就只能手动查找bug，修改之后重新发布，这段时间里，线上一直是运行着有bug的那一份代码。而如果有版本控制的话，可以立即版本回退，先发布上一个版本的代码到线上，等最新代码bug修复之后再重新发布。 　　(3)方便多人合作，有了版本控制，妈妈再也不怕我和同事的代码有冲突或者不同步啦，大家都共同维护着一份远程服务器代码。舒服。 二、设计模式 　　当我们代码量多了之后，如果没有一定的设计模式思想，比如说单例模式，策略模式，代理模式，迭代器模式，发布订阅模式，命令模式，组合模式，模板模式，享元模式，职责链模式，中介者模式，装饰者模式，状态模式，适配器模式（强行列举一堆设计模式哈哈哈），有了这些设计模式思想，我们就可以巧妙地组织我们的代码

我第一次通过软件赚钱是在2008年。 当时，我为当地的一家小公司构建了一个 WordPress 网站，时薪是25美元。开发软件是我的业余爱好，当我发现爱好居然能够赚钱时，我兴奋不已。最后，我用这笔外快购买了自己的第一台相机。 时间来到2018年。在湾区，刚毕业的初级前端工程师基本年薪已经达到了6位数。至于那些有几年工作经验的前端工程师，FANG 公司（Facebook、Apple、Netflix、Google 等）开出的薪酬可达40万美元。初创企业或者西雅图和纽约的科技公司给出的待遇也差不了多少。 那么，前端工程师工资如此之高的原因是什么？甚至有很多人眼红、质疑前端工程师，认为他们不能称为软件工程师。以下是我学习和工作经历，从一个前端菜鸟成长为一个10人前端团队的主管。 什么是“前端工程师”？ “前端”是指软件的表现层或者用户界面（UI）。前端工程师主要使用 Web 技术实现UI。前端工程师与 Web 开发人员的主要区别在于，前者需要构建交互式应用程序，而后者主要构建专注于内容的网站。如果前端工程师从事 iOS 等其他平台的开发工作，他们可能被称为 UI 工程师或者 iOS 工程师。如果开发过程非常重视设计，他们也可能被称为 UX 工程师。 从我自己的经验来讲，我坚信最优秀的前端工程师应当专注于 UI 的实施。他们在该领域磨练自己的技艺，并且不断学习最新的 UI 技术

JavaScript是前端三要素之一，因为JavaScript，有很多人从入门到放弃了前端。不过作为一个知识点，想要学好JavaScript并不是没有方法，接下来小编就给大家简单分享一下。 从第一阶段学习的HTML+CSS知识点，进入到第二阶段的JS范畴，从学习方向和程度上来讲，我明显感觉到了不同。JS更加注重的是逻辑能力，每天上课跟着老师的思路走，把老师教的方法记下来，然后在课下自己去练习，通过练习把老师的方法变成自己的方法，其中这转换的过程，就是精髓所在。 在刚开始学习JS的时候，因为不能直观地看到页面，感觉还是很枯燥的。但进入到后半段操作页面的时候，我逐渐发现JS很有意思，尤其是在老师布置完作业之后，独立地把作业敲出来，还是很有成就感的。当然，老师课堂上讲的之知识主要是重点知识和学习方法，不能所有细枝末节的东西都讲到，我们应该在课下自己进行知识的扩展，增强自己的能力。 和很多同学一样，有时候老师讲的一些难点能听的懂，但是自己敲的时候却敲不出来，这时候我会去参考一下老师写的，回忆一下老师的思路，完成需求的方法，然后再自己敲，反复地练习，直到自己能敲出来为止。 学习中，我们还要多和别人交流，每个人面对同一个需求的时候，解决的办法和思路都是不同的。可能同一个人不同时间针对同一个需求写出的代码都是不同的，所以我们也要多和别人，尤其是交流，彼此分享一下好的学习方法与简洁的解题思路

1、行内样式 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < / head > < body > < div > < p style = "color: red" > 我是一个段落 < / p > < / div > < / body > < / html > 2、内联样式 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style > /* 写我们的CSS代码 */ /* 标签选择器 */ . firstp { color : red ; } < / style > < / head > < body > < div > < p class = "firstp" > 我是一个段落 < / p > < / div > < / body > < / html > 3、链接式 将css写在一个单独的文件中，然后在页面进行引入即可 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset =

https://www.bilibili.com/video/av73489017?p=15 来源： https://www.cnblogs.com/wozhangdale1/p/12328917.html

前言 身为一名前端开发工程师，有时候业务场景是无法用手速模拟的，老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章，希望能够对大家有所帮助。 涉及到的内容： 1.chrome浏览器 2.js代码 3.函数节流 第一步 打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。 点击snippets 第二步 如图所示 点击new snippet -->输入脚本‘名称’-->Ctrl+s保存。 第三步 如图所示 选择新创建的脚本‘名称’，在如图所示的第二步进行编辑js代码。最后如第三步所示：run 运行代码。 js脚本代码 1.以下是网站上的代码： <body> <div class="box"> <img class="img" src="image/pict.png" /> <button class="btn" id='btn'>抢购</button> </div> <script type="text/javascript"> /** * 抢购按钮 * * */ btn.onclick=function(){ console.log('抢购成功！'); }; </script> </body> 每次点击抢购 控制台输出 抢购成功！ 2.脚本代码 /** * 最简单的脚本代码 * 版本1.0.1 */ btn.click();/

为什么要mock数据 并行开发，提升效率 我们都知道，一个项目开发需要前端 + 后端配合来完成，后端程序猿需要为前端开发攻城狮提供 api 接口，前端开发攻城狮，才能借助这些接口，来实现项目预期的功能。 我们一般开发项目的时候，各个团队都是并行进行的，为了减少每个环节之间的依赖等待，我们在各个环节都需要做一些数据模拟，来达到可以并行开发的目的。 所以前期双方以最快的速度，先把 api 接口的 URL 路径，请求参数、返回数据结构先确定下来，确定以后，双方就可以各自分道扬镳，各自去完成各自自己的任务： 后端程序猿，去实现这些接口的内部是实现； 测试同学，根据约定的参数，编写测试用例及自动化测试脚本，为下一步测试工作做准备； 前端攻城狮，通过 mock 的数据，立马开始前端开发（网站、小程序、APP）； 等正式 api接口 开发好以后，只需把前端开发中的mock域名，更换成开发域名即可联调，而无需再去修改前端任何其他代码。 快速搭建原型 还有的应用场景，客户并不明确需求，暂时对于后台要开发成什么样式，还没有头绪。所以现在要让程序猿提供正式的接口，尚有难度，现在项目急需先把前端的原型做出来，让大家可以在线体验，边体验边调整修改。 如何mock数据 通过nodejs自己搭建 安装Node.js ，通过http-server开启本地服务器 获取端口 http://localhost:8000