web前端开发

前端Bug解决方案

不问归期 提交于 2020-01-18 18:55:41
没错!我正在写bug呢!不管你是小白还是大牛,写bug无可避免,遇到bug怎么办?别慌!毛主席教导我们“战略上藐视BUG,战术上重视BUG”! 前端遇到的bug无非就三个方面结构层(HTML),表现层(CSS),行为层(JavaScript)。 一、结构层(HTML) HTML出错的主要原因是 对规范不够理解,没有按照规范来布局 。网上搜到很多常见的HTNML错误都是如此: 错误1. 标签嵌套混乱 例1:比如常见的p标签里嵌套div标签 <p>我是一个段落<div>我是一个块级元素</div>我是一个段落</p> 浏览器解析后就变成这样了 例2:缺少结束标签,或结束标签时机不对。 有时候往往是一个标签没有闭合导致整个布局错乱。 /*错误代码*/ <div><a href="">1111<p>2222</p></div><p>3333</p>aaa</a> /*正确代码*/ <div><a href="">1111<p>2222</p></div><p>3333</p>aaa</a> 错误原因:DTD中规定了块级元素是不能放在P里;P标签内包含块元素时,它会先结束自己。另外提一下,内联元素不可以包含块元素。 解决思路: 如上图,就是谷歌浏览器按F12(command+option)打开控制台看元素。 错误2.滥使用br标签 br标签作用在于换行的

想入门web前端开发,并且学好,你必须知道的十大开发工具!

孤人 提交于 2020-01-18 15:39:33
在网站制作和开发的过程中,其实有很多的辅助咱们开发的工具,使用这些工具会让咱们的开发更为方便,提高工作效率,从事开发第六个年头了,接下来为大家分享一些常用工具,专家建议:收藏一波! 1.Sublime Sublime 作为一个尽为人知的代码编辑器,他的优点我就不多做赘述了。此编辑器同时支持Windows、Linux、Mac OS X等操作系统。他的运行界面十分整洁美观、文本功能也是很强大,运行速度超快,非常适合编写代码,写文章做笔记。它还支持众多插件扩展,实现强强联手,比如说: Emmet插件:前端开发不可缺少,让编写 HTML和CSS代码变得简单,节省大量时间。Emmet可使开发者用缩写形式书写代码,再用"扩展"功能自动将代码扩展至完整样式 JsFormat:这是一款将JS格式化的插件 SideBarEnhancements:右键菜单增强插件 TrailingSpaces:高亮显示多余的空格和Tab Tag:这是HTML/XML标签缩进、补全、排版和校验工具 Terminal:允许在Sublime Text 3中打开cmd命令窗口 SublimeCodeIntel:代码提示插件,支持多种编程语言,可以提示用户自定义代码 CssComb:为CSS属性进行排序和格式化 Autoprefixer:CSS3私有前缀自动补全插件,该插件使用CanIUse资料库

博客初心源于前端攻城狮

十年热恋 提交于 2020-01-17 05:31:48
初始博客的初衷源于“前端攻城狮”,有人很疑惑为啥因为它呢?那就让我们一起来了解“前端攻城狮”吧! 首先,前端攻城狮是取得前端工程师的谐音!它是一个职位,对于这个职位有几个字可以概括:高薪,有前景,累,苦逼。 前景: 这个职位是近五年才兴起的一个职位,在之前是被鄙视的一个!有句话说得好风水轮流转,现在这个职位风生水起了,它的市场是可以说是供不应求! 如何了解前端?    前端是做什么的?   --- 产品经理(PM或者叫PD)根据可行性调研后提需求,然后和视觉(UE)确定交互视觉稿,由前端和后端进行开发。后端负责数据和接口设计,前端负责页面呈现和交互功能    前端工程师要会哪些东西?   ---前端不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等       以上只是初步的说下这个职位...... 来源: https://www.cnblogs.com/rainheader/p/4573690.html

关于前端面试

流过昼夜 提交于 2020-01-15 05:41:24
作者:知乎用户 链接:https://www.zhihu.com/question/19841848/answer/88535461 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 继上一篇 关于程序员求职简历 之后如果顺利的话就应该是面试了,在此也整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。这方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,在此仅挑选我看到的比较不错的,更多的资料可以从下面列出来的链接的内容中找到。 1. 前端团队 参考我之前整理的国内知名前端团队的列表(只选了维护了网站、技术型前端团队): Awesome Front-end Teams 2. 知识技能 前端技能汇总 Frontend Knowledge Structure (源码)(朴灵,阿里巴巴) 大前端的瑞士军刀,只记录有用的(源码)(聂微东,百度) 前端收集(罗磊,腾讯) 知乎上前端开发领域有哪些值得推荐的问答?——知乎 2015-2016前端知识体系图谱(w3ctech) 推荐的一些值得订阅的Weekly(GitHub) 前端收藏夹(源码)(w3ctrian) QQ联盟群交流(492107297)群规(有大量的教程、资料、面试题)(豪情) 3. 学习路线、书籍 前端开发者手册(Pomy,美团) 前端开发

Web前端开发---HTML

删除回忆录丶 提交于 2020-01-14 13:15:08
一、 HTML概述 HTML(HyperText Markup Language)超级文本标记语言。 1.它不是一种编程语言,用于告诉浏览器如何构造网页,也是构造网页文档的主要语言。 2.通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如文字如何处理,画面如何安排,图片如何显示等)。 二 、HTML文档结构 1.超文本标记语言文档应该以文件类型声明“<! DOCTYPE>”开头 2.标记一般都是成对出现。 简单的HTML文档结构。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单HTML文档结构</title> </head> <body> <p>我正在学习HTML。</p> </body> </html> 三、HTML元素 HTML由一系列的元素组成,可以使用元素来封装、包装或标记内容的不同部分,使其以某种方式显示,或以某种方式执行。 <p>我正在学习HTML。</p> HTML的元素可分为: 开始标签:本例中的"p"。 结束标签:本例中的"/p”。(不知为何加上尖角符号会被渲染不能显示) 内容:本例中的“我正在学习HTML。” 元素:开始标记+结束标记+内容=元素 1.HEAD元素 HEAD元素定义了网页头部,它可以包含以下的标签。 2.文档标签 来源: CSDN 作者: 李晓雨. 链接:

前端三大框架(vue、react、angular)对比(一)

心不动则不痛 提交于 2020-01-14 12:31:56
官网 vue https://cn.vuejs.org/ react https://react.docschina.org/ angular https://angular.cn/ 三者总体介绍 都是MVVM(从后端的MVC衍生)类型的框架 基本都用于构建单页应用 都是响应式的前端框架 都是基于Node和webpack来构建的生产环境 三者在思想上和用法上具有很多相似之处 三者都是基于工程化、组件化、模块化的开发方式 都可以理解为构建用户界面的框架 技术角度:三者都基于组件、路由、模板、数据请求、状态管理等共通之处 适合项目 vue 适合中小型项目 angular 集成度高,大中型项目 react 灵活性较高,大中型项目 全家桶 vue —— vue-cli + vue2.0 + vuex + vue-router + axios + element-ui react —— react-cli + react + react-dom + react-router + axios + redux + Ant Design angular —— angular-cli + angular + angular-router + service + rxjs + ng-zorro 基本介绍 vue —— 渐进式的JavaScript框架,会html、css、js就可以直接上手开发

web前端面试试题总结---其他

走远了吗. 提交于 2020-01-13 15:00:33
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个年轻的行业,所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一。 前端开发知识点: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他: 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力 作为一名前端工程师,无论工作年头长短都应该掌握的知识点: 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。 4

关于前后端分离以及前端部署Nginx

你说的曾经没有我的故事 提交于 2020-01-11 22:37:17
为什么要了解这个知识 因为笔者参与了学校的一个服务外包项目,我们选用的技术栈是springboot+vue的;又要考虑前后端分离,所谓适应时代的步伐。然而笔者是个菜鸡,所有笔者查看了一些博客,并将其进行总结。 那什么是前后端分离呢? 传统的web应用开发中,大多数将浏览器当做前后端的分界线。浏览器中为用户进行页面展示的部分称为前端。而将运行在服务器上,为前端提供业务逻辑和数据准备的所有代码称为后端。 前后端分离 前后端分离并不只是开发模式,而是web应用的一种架构模式。开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署。 简单来说,前后端分离就是把数据操作和显示分离出来,前端专注做数据显示(可通过文字,图片,或者图标等让数据形象直观的显示出来),后端专注于做数据的操作,前端把数据开放给后端,后端对数据进行修改,后端提供接口给前端调用,来开发对数据的操作。 前后端分离大概可以从四个方面来理解 1、交互形式 在前后端分离架构中后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。 2、代码组织方式 前后端分离代码组织方式有两种。 半分离:前后端共用一个代码库,但是代码分别存放在两个工程中

这份前端面试小册子dog cheng带来啦~

瘦欲@ 提交于 2020-01-09 22:31:39
写在前面 没有错,就是我啦dog cheng,好久不见,从17年在博客园写下第一篇文章,转身间已然两年,从大二到现在的大四预备毕业生,我仍然在这条道路上前进。秋招早已经结束,在拿到用友,滴滴的offer之后,最终在九月选择了百度APP,但是我没有停下,怀着学习的态度完成了一份 90页PDF , 近140+commits 的面试小册之后,写下了这段文字 互联网发展迅猛之余也伴随着互联网寒冬,行业不景气这样的词,等毕业季去各个求职网站投简历,去各个人才市场找机会,才发现四处碰壁,作为应届求职者更需要打好基础,明确发展规划,跟上行业步伐。下面是本人2019年秋招前端面试经历,结合个人博客和牛油们面经中的高频问题以及行业前辈们复习资料的综合整理,包含 基础篇 、 Vue框架篇 、 HTTP&浏览器 、 构建工具篇 、 安全篇 、 算法篇 ,欢迎交流斧正,希望大家在毕业季都能一帆风顺,从容斩获OFFER。近100+前端面试题及推荐解答,资源合集,这个冬天不会很冷 因为篇幅有限,下面留下了前两篇各五道面试题,这个项目已经在github上开源,欢迎大家取用: Github HTML/CSS 浏览器解析渲染页面过程 大致过程: HTML解析构建DOM->CSS解析构建CSSOM树->根据DOM树和CSSOM树构建render树->根据render树进行布局渲染render layer-

2019前端最全面试题

China☆狼群 提交于 2020-01-08 03:57:44
项目地址 HTML问题 HTML5语义化 什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。 好处 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 方便其他设备解析,如盲人阅读器根据语义渲染网页 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。 http://www.daqianduan.com/6549.html 为什么最好把 CSS 的 <link> 标签放在 <head></head> 之间?为什么最好把 JS 的 <script> 标签恰好放在 </body> 之前,有例外情况吗? 把 <link> 放在 <head> 中 把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外,这种做法可以让页面逐步呈现,提高了用户体验。将样式表放在文档底部附近,会使许多浏览器(包括 Internet Explorer)不能逐步呈现页面。一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。 把 <script> 标签恰好放在 </body> 之前 脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部,保证 HTML 首先完成解析,将页面尽早呈现给用户