web前端入门学习(纯干货)

web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起:

按照我的想法,我把前端工程师分为了入门、初级、中级、高级这四个级别,

入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的),了解基本的html、css和javascript语法(这些语方面的东西网上随便搜一下就有很多很多,基本的语法是整个技术体系最重要 的东西了,领先的 Web 技术教程 ),可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来,了解过一些框架的使用(例如烂大街但是依然牛逼的jQuery、zepto、 bootstrap等等)。

我还是要推荐下我自己创建的web前端资料分享群606721798,这是web前端学习交流的地方,不管你是小白还是大牛,小编都欢迎,不定期分享干货,包括我整理的一份适合零基础学习web前端的资料和入门教程。

在经历过入门的阶段,已经了解了前端要做什么,并且把基本的语法学习过了可以独立做一些简单的页面了,那么就要继续学习达到初级前端工程师的水平,对于初级的前端工程师需要了解的就特别多了,需要对整个前端有一个清晰的认识,并且熟练使用各种技术。

初级前端工程师:首先要知道的就是如何处理各种浏览器的兼容处理(比如说在IE浏览器中的createElement有什么不同等等内容),现在基本上每个公司在招聘的时候都会要求熟练html5, css3, javascript,这个熟练的意思就是信手拈来。

在下面会说初级前端工程师应该具体的学习哪些知识,然后就是要了解各种css的预处理器和后处理器, 还有会使用常见前端的MV*框架(angularjs, backbone,reactjs等等)并知道这些框架的原理,另外就是要熟练使用nodejs,要会使用基于node的各种前端构建工具 (grunt,gulp等等),熟练使用github或gitlab,对模块化、组件化、工程化、语义化有一个比较深入的了解,最后要知道如何开发移动端 的页面,如何去优化一个页面的性能。

初级web前端工程师的技术体系

1.HTML部分

首先是要掌握一些常用标签的使用和他们的各个属性,这些常用的标签我总结了一下有以下这些:

html:页面的根元素。head:页面的头部标签,是所有头部元素的容器。body:页面的主体标签,页面展现的内容就放置在这里面。title:页面的标题。meta:位于文档的头部,提供页面的元信息,包括关键字、描述等等。link:定义文档与外部资源的关系,最常用的用途就是引入样式表。script:脚本标签,可以把js脚本代码放置在这个标签内,也可以使用这个标签的src属性引入一个外部标签。style:样式标签,可以把css代码写在这个标签中。

a:超链接,href属性代表要链接到的地方,target属性代表打开方式。img:图像标签,src属性表示图片的位置。form:表单元素,它内部的input、select、textarea等标签都是比较重要的。div:定义文档中的分区或节,可以使用div来进行页面的布局等操作。另外还有ul、li、p、button、iframe、p、table等标签也很常用,nav、section、article、header、aside、footer等语义化标签也需要了解一下。

除了要了解上面这一些标签之外,还需要对一些新的HTML5的API有一定的了解:

audio、video标签。

Canvas:定义图形,比如图表和其他图像。

input标签的accept属性,email、phone、url等类型。

getElementByClassName根据class名来获取一个元素结点。

Multiple file selection多文件选择属性。

html的import、template

process标签,webGL等内容。

还有一些要知道的知识点:

1.doctype的作用。2.unicode、utf8等编码的原理和区别。3.如何进行页面性能优化。4.png、jpg、webp、gif等图片格式的不同的优势。5.HTML行内元素与块级元素的区别。6.移动web端开发常用head标签。7.web语义化。8.浏览器中的缓存原理。

2.CSS部分

关于css这一块,我的看法就是网上下载一个chm格式的css的参考手册,然后根据手册里面写的一个个的都敲一下。

css大体分为下面这几块知识点:

① 定位布局

1.position属性的7个值(static | relative | absolute | fixed | center | page | sticky)分别有什么作用和不同?

2.实现品字形布局或者是三栏布局(左右宽度固定,中间适应屏幕)。

3.浮动与清除浮动的方法,flex布局,grid布局。

② 盒子模型

1.margin、padding、border这三个属性。

2.伸缩盒相关内容。

3.Multi-column Layout Module多列布局模型。

③ 文本字体

1.强制换行与不换行,清除空白。

2.文本对齐、大小(如何设置chrome小于12px的字体)、缩进、转换。

3.单位(em、rem、px等),颜色(rgb、rgba,hls)。

④ 变换、过渡和动画

1.transform的各种取值的作用与兼容性。

2.transition过渡的动画类型,贝塞尔曲线的原理。

3.animation动画的各种设置,@keyframes规则。

4.浏览器的重绘与重排。

⑤ 选择器

1.选择器的分类,权值和优先级。

2.有哪些属性可以被继承,哪些属性没法继承。

3.伪类和伪元素分别是什么,有什么作用。

上面这些都是基础的东西,除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器,这将会大幅度提升你的css开发效率,也需要了解一下Autoprefixer、PostCSS等css后处理器。

 

 

3.JavaScript部分

在这里就不说js的基础知识了,我把js按照语法的层次和使用的层次分为了两大块。

按照语法的层次来说:

首先是javascript的面向对象方面的内容:在javascript中实现封装、继承和多态。

① 封装:在js中可以通过闭包、作用域和作用域链来实现封装,ES6的const、let的作用。

② 继承:基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等,外加ES6的class关键字,prototype和__proto__。

③ 多态:在javascript中多态是使用arguments来实现的,关于arguments会引申出来很多内容:

1.arguments的caller、callee等方法的作用。

2.方法的apply和call的作用和不同。

3.使用Array.prototype.slice.call来把一个数组对象转化为数组。

4.array的各种方法,如shift、splice、push、filter、map、reduce、forEach等等。

然后是Js的设计模式,比如说那三种工厂模式啊,建造者模式啊等等。

最后是在不同情况下的this分别都代表什么。

按照使用的层次来说:

首先最主要的就是ajax,ajax的原理,ajax跨域的方法:jsonp、使用iframe的location.hash、postMessageAPI、websocket、服务器代理等等。

然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存,客户端存储方面的内容:localstorage、sessionstorage、indexDB、cookie等等。

最后是一些新的js的API,例如文件读取(fileReader)、fetch、Promise、Web Sockets等等内容,可以去caniuse上面看一下有哪些新的东西。

上面我所说的这些只是一些比较笼统的概念,把前端html、css和javascript所需要掌握的部分内容列举了一下,在前端领域还有很多需要我们知道的知识,这需要大家在学习工作的过程中去自己总结。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用BlockingExecutor限制任务提交

JDK的java.util.concurrent.ThreadPoolExecutor允许您将任务提交到线程池,并使用BlockingQueue来保存提交的任务。 如果您要提交数千个任务,请指定一个“绑定”队列(即最大容量的队列),否则JVM可能会耗尽内存。 您可以…

[校内模拟题2]

水题 但是原地螺旋炸裂 都不好意思贴代码了QWQ enc 【问题背景】 zhx 和他的妹子聊天。 【问题描述】 考虑一种简单的加密算法。假定所有句子都由小写英文字母构成, 对于每一个字母, 我们将它唯一地映射到另一个字母。 例如考虑映射规则:a-&g…

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一、什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式。JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数据交换格式JSON具有自我描述性,更易理解JSON使用JavaScript语法来描述数据对…

python保存为xlsb_Read XLSB File in Pandas Python

问题There are many questions on this, but there has been no simple answer on how to read an xlsb file into pandas. Is there an easy way to do this?回答1:Hi actually there is a way. Just use pyxlsb library.import pandas as pdfrom pyxlsb import open_workboo…

内存不足而没有OutOfMemoryError

这实际上是最初发布于2010年的帖子的转世。 昨天,当听到我们的工程师咒骂一个特别令人讨厌的错误时,闪回发生了。 当诅咒停止时,我走过去核实我的怀疑。 瞧,我是正确的–情绪波动是由应用程序用尽了堆空间导致的,但死于…

人工智能第二星期总结-------纵里寻它千百度

2018-07-28 第二周: 此时此刻我怀着无比沉重的心情在这里做一周的学习检讨工作 这星期依此就开始讲到了函数,话说函数可是python里面的钟头戏,不仅可以节约代码,还可以把代码重复使用,只要后面轻轻松松就可以搞定啦&am…

个人作业——软件产品案例分析

个人作业——软件产品案例分析 第一部分 调研,评测 评测: 第一次上手体验 第一眼看上去功能很全面,但是到点开来发现功能大部分没有实现,体验不太好。 缺陷Bug情况 课表查询 bug描述:课表查询没有课表结果,点进去当前周…

java hashtable put_Java Hashtable put()方法与示例

哈希表类put()方法put()方法在java.util包中可用。put()方法用于将给定的键元素(key_ele)放入给定的值元素(val_ele)。put()方法是一个非静态方法,只能通过类对象访问,如果尝试使用类名访问该方法,则会收到错误消息。put()方法在放置键/值对时…

HTML之表单

表单&#xff1a; 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如&#xff1a;文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> . input 元素 . </form>…

将AspectJ与NetBeans平台开发集成

您是否正在使用NetBeans平台开发项目&#xff1f; 您愿意使用AspectJ来使用AOP吗&#xff1f; 您不知道如何将AspectJ编译器集成到NetBeans的内部版本中&#xff1f; 如果您的回答是“是”&#xff0c;则此帖子适合您。 我决定写这篇技术文章&#xff0c;是因为我在寻找该解决…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明&#xff0c;默认jdk指我们安装完CentOS后系统自带jdk&#xff0c;自己下载安装的jdk只需要下载&#xff0c;解压即可&#xff0c;之后步骤与此文一致 1.查看我们默认…

第二阶段冲刺10

基本的代码已经编写完成&#xff0c;游戏的功能已经完善&#xff0c;基本上已经是一个合格的软件了&#xff0c;这次为期10天的冲刺很充实&#xff0c;我们切实的完善了软件&#xff0c;学会了很多&#xff0c;也可以更好的融入团队中了。团结就是力量&#xff0c;十天前我们还…

java如何找重复数字_Java如何找出数组中重复的数字

题目描述&#xff1a;找出数组中重复的数字&#xff0c;具体内容如下在一个长度为n的数组里的所有数字都在 0~n-1的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。例如&…

页面中添加锚点的几种方式

本文档创建时间:2018-11-7 15:52:28 方法一,使用a标签添加 通过设置a标签的href属性,跳转到页面中指定id标签的位置a标签的href属性值前要增加#来作为标识,表示是在当前页面的内部跳转 简单的案例: 1 <html>2 <head></head>3 <body>4 <!--设置锚点…

休眠事实:有利于双向集vs列表

Hibernate是一个很棒的ORM工具&#xff0c;它极大地简化了开发&#xff0c;但是如果您想正确地使用它&#xff0c;则有很多陷阱。 在大中型项目中&#xff0c;具有双向父子关联非常常见&#xff0c;这使我们能够浏览给定关系的两端。 在控制关联的持久/合并部分时&#xff0c…

ue正则

1 删除含某些内容的行,例:含有PTTAddress 使用替换功能&#xff0c;勾选正则表达式(Regular Expressions)&#xff0c;查找为%*PTTAddress*^p&#xff0c;替换为空 2.替换大写字母为_大写字母 替换功能&#xff0c;查找为 ^([A-Z]^)&#xff0c;替换为 _^1转载于:https://www.c…

20 存储过程

一、存储过程的定义 存储过程是存储在数据库目录中的一坨的声明性SQL语句。 Java&#xff0c;Python&#xff0c;PHP等应用程序可以调用存储过程。 MySQL是最受欢迎的开源RDBMS&#xff0c;被社区和企业广泛使用。 然而&#xff0c;在它发布的第一个十年期间&#xff0c;它不支…

微信小程序下拉框

微信小程序组件里没有下拉框&#xff0c;正好要用到&#xff0c;记下来以后参考 wxml代码 <view classtop><view classtop-text> 选择接收班级</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}&l…

int最大值java_Java 中一个int型数组的求最大值最小值 | 学步园

小友今日看单元测试&#xff0c;发现的一个测试用例的代码。而测试的是某个类的最大值&#xff0c;最小值方法。在此把测试类发上来。保留此地&#xff0c;如有人对此有兴趣&#xff0c;看以看下。闲话少说&#xff1a;public class MaxMinTool {public static int getMax(int[…

使用Maven实施自定义JSF 2.0组件

前一段时间&#xff0c;我编写了自己的定制JSF组件。 但是在那个时候&#xff0c;JSF 1.0仍然是最新的&#xff0c;并且该项目没有使用maven作为构建系统。 因此&#xff0c;我一直想用maven编写一个自定义JSF2组件。 因此&#xff0c;让我们开始&#xff1a; 首先&#xff0c…