前端入门

《程序员练级攻略》系列文章的目录。 开篇词 入门篇 零基础启蒙 正式入门 修养篇 程序员修养 专业基础篇 编程语言 理论学科 系统知识 软件设计篇 软件设计 高手成长篇 Linux 系统、内存和网络（系统底层知识） 异步 I/O 模型和 Lock-Free 编程（系统底层知识） Java 底层知识 数据库 分布式架构入门（分布式架构） 分布式架构经典图书和论文（分布式架构） 分布式架构工程设计 (分布式架构) 微服务 容器化和自动化运维 机器学习和人工智能 前端基础和底层原理（前端方向） 前端性能优化和框架（前端方向） UI/UX 设计（前端方向） 技术资源集散地 一定要坚持，要保持长时间学习，甚至终生学习的态度。 一定要动手，不管例子多么简单，建议至少自己动手敲一遍看看是否理解了里头的细枝末节。 一定要学会思考，思考为什么要这样，而不是那样。还要举一反三地思考。 不要乱买书，不要乱追新技术新名词，基础的东西经过很长时间积累，会在未来至少 10年通用。 回顾一下历史，看看历史时间线上技术的发展，你才能明白明天会是什么样的。 /*--> */ /*--> */ 要去经历大多数人经历不到的，要把学习时间花在那些比较难的地方。 要写文章就要写没有人写过的，或是别人写过，但我能写得更好的。 更重要的是，技术和知识完全是可以变现的。 一，这个技术解决什么问题？为什么别的同类技术做不到？ 二

相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂（部分代码省略） //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换view</button> <component :is="currentView"></component> import pageA from "@/views/pageA"; import pageB from "@/views/pageB"; computed: { currentView(){ return this.viewList[this.index]; } }, methods: { changeView() { this.index=(++this.index)%2 } } web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法 （详细的前端项目实战教学视频，PDF） 注：这个多用于单页下的几个子模块使用，一般切换比较多使用下面的路由 使用路由（这个就是配置路由的问题了，不作赘述） 2.动态生成tab 一般UI框架给我们的tab切换都像是上面的那种，需要自己写入几个tab页之类的配置

BeesFrontEnd 随着ReactNative、Weex与Flutter等跨端框架的发展，大前端的概念也逐渐普及开来，纯粹的Native开发相对变得比较少，前端也成为了客户端同学必须要掌握的一门技术，但是客户端同学做的是跨端开发，在学习路线上和前端同学又稍有不同，下面从客户端同学的视角去讨论如何学习前端知识。 这里为大家整理了一份跨端技术图谱，这份图谱并没有去穷尽所有的前端技术，只是从客户端开发的视角去梳理常用的技术点，帮助大家理清脉络。 更多关于跨端技术的讨论可以参见 BeesFrontEnd 项目。 开发工具 IDE推荐 VSCode ，轻量级、插件丰富，常用插件如下所示： Terminal：命令行工具。 Git History：查看单行提交记录和文件提交记录。 Git Project Manager：Git项目管理工具。 Git Len：解决日常开发协作痛点，推荐安装。 vscode-icons：让你的文件都带上好看的图标。 Path Intellisense：文件路径自动补全。 Auto Close Tag：自动闭合HTML标签。 Baracket Pair Colorizer：成对括号分颜色显示，方便区分。 Settings Sync：同步你的配置和扩展，参见同步教程。 VS Color Picker：取色器。 ES7 React/Redux/GraphQL

1，了解到前端模块化：从《编写可维护的JavaScript-3》书籍中了解到模块化的概念和AMD模块的冻冻，但是不理解。 2，参考：https://blog.csdn.net/qq_35697034/article/details/78297756总算明白什么是ADM模块的概念： 一提到模块化，常说到CommonJS和AMD。这俩主要是个什么东西呢，记住是模块化的标准规范即可。而RequireJS就是AMD规范的最好实现。就像ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。我们只需要知道，实现CommonJS规范的API是同步加载模块的，而实现AMD规范的API是则是异步加载模块，异步加载即非阻塞加载，更加适合浏览器端。官方文档对RequireJS的描述： RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node.使用RequireJS加载模块化脚本将提高代码的加载速度和质量。 3，做了个样例：参考：https://www.jb51.net/article/119496.htm，但是没有运行成功。 4，不打算进行模块化编程，因为还没有意识到使用的必要。先使用单全局变量的方式。 来源： https://www.cnblogs.com/lirenhe

这是我的第一篇博客，写的很乱很差，多多谅解。如有错误，请指正。 1. 前端是什么 　　前端即 网站前台 部分，运行在 PC 端， 移动 端等 浏览器 上展现给用户浏览的网页。随着 互联网技术 的发展， HTML5 ， CSS3 ，前端框架的应用， 跨平台 响应式网页设计 能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的 用户体验 。简单点说，前端就是展现在用户眼前的各种网页，现在还包括小程序和一些简单的应用。 2. 前端薪资待遇怎么样 　　互联网行业最近几年在薪资水平方面都是领先于其他行业的，待遇方面因省而异。基本上都在8k朝上，看技术水平和地理位置。所以越来越多的人转行前端，竞争压力也随之越来越大，门槛也越来越高。 3. 前端简单吗 　　我个人觉得前端相比较其他语言而言算是比较简单的一门语言。前端入门是所有语言中最简单的几种之一。现在很多大学所有计算机有关的专业基本上都开设了网页制作这门课程，甚至很多非计算机专业也开设了这么课程。教学内容简单易懂。作用也就是引领学生入门，讲授的内容就涉及到html和css部分。html5和css3很少涉及。（后面会有这里涉及到的名词解释） 4. 一个前端工程师需要掌握什么东西 　　（以下专业解释如果嫌多看不懂直接翻到解释的最后面） 　　基础的HTML和CSS： 　　　　1. HTML ： 　　　HTML称为 超文本 标签语言

同样是web前端工程师，我们通常会发现他们的薪资待遇截然不同，web更注重的在于技术。 通过web培训出来的工程师，通常是中高级。自学的web工程师也有可能达到这样的水平，但是前提是必须系统化进行学习。那么初级web前端应该懂什么呢? 首先，Web工程师要入门必须要了解前端、后端、后台的基本概念，同时要了解基本的html、css和javascript语法，最后根据设计师的设计图在不考虑兼容性的情况下把页面做出来。 需要注意的是，入门阶段最关键的就是对所学内容形成一套概念,知其然知其所以然，不要管好那么多细节。 其次，你可以把html、css和javascript分成三个阶段进行学习。 第一阶段：HTML的学习 Html是超文本标记语言，英文全称为HyperText Mark-up Language，这是一个网页的骨架。静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。 当然，学习html过程是比较枯燥乏味的，所以你需要更有效的学习策略。依小编看来，你可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，想必会比单纯记忆HTML标签和属性有趣、有用的多吧? 我自己是一名从事了多年的web前端开发程序员

前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。 我和一些同学接触的过程中，发现作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。 一、html文档结构标签语义化 1、首先什么是语义化呢？ 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。 2、语义化的好处或者说存在的意义 ① 有利于搜索引擎抓取 ② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。 例子 1 border-style:dotted solid double dashed; 上边框是点状 右边框是实线 下边框是双线 左边框是虚线 例子 2 border-style:dotted solid double; 上边框是点状 右边框和左边框是实线 下边框是双线 例子 3 border-style:dotted solid; 上边框和下边框是点状 右边框和左边框是实线 例子 4 border-style:dotted; 所有 4 个边框都是点状 可能的值 对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行 前端前端前端 描述 最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS

效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。 <div class="container"> <div class="stormy"></div> </div> css样式 css按照步骤来实现 1、先写父容器样式，顺便给整个页面加个背景色，方便预览 body{ background: rgba(73,74,95,1); } .container{ width: 170px; height: 170px; position: relative; margin: 250px auto; } 2、写乌云的样式，别忘了乌云有一个上下移动的动画效果 .stormy{ width: 50px; height: 50px; position: absolute; left: 80px; top: 70px; margin-left: -60px; background: #222; border-radius: 50%; box-shadow: #222 64px -15px 0 -5px, #222

一、什么叫框模型 页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。 二、外边距 围绕在元素边框外的空白距离（元素与元素之间的距离） 语法：margin，定义4个方向的外边距 1、单边定义：margin-top/right/bottom/left （1）取值：以px为单位， %占父级元素宽度的%比 正数：margin-left 元素向右移动，margin-top元素向下移动 负数：就是相反方向 取值 auto：自动计算块级元素的外边距，对于上下外边距无效,块级元素水平居中 2、简写方式 margin：value ；定义4个方向的值 margin：v1 v2； v1设置上下，v2设置左右 margin：0 auto：设置块级元素水平居中 margin：v1 v2 v3；v1设置上，v2设置左右，v3设置下 margin：v1 v2 v3 v4；上右下左 3、自带外边距的元素 h1~h6、p、body、ol、ul、dl、pre 一般在开发的时候需要重置具有外边距的元素 方案一：*{margin:0;padding:0} 方案二：参考淘宝 4、外边距的特殊效果 （1）外边距合并 当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个边距中较大的 (2)行内元素对外边距的表现 行内元素垂直外边距无效（img）除外 （3）行内块对外边距的表现