20200221前端入门怎么学【必备技能】

本文为转载后整理,仅供初学者学习~

需要掌握的必备技能

  1. HTML
    这个是最简单的,也是最根本的。要谙练把握html中的div、formtable、ulli、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于构造、table也可以用于构造,可是不矫捷,根基table是用来和数据打交道。
  2. CSS
    这里说的css不网罗css3,一样平常我们看到web前端开发工程师的要求里面,有一个会使用css+html或者css+div来停止界面构造,所以css是用于辅助html来构造和展现的,我们称之为“css款式”,为什么会说css+div呢?由于我上面说了div就是html首要用于构造的工具,所以div就是焦点把握的工具!那么css必定必需要配合div来使用才好。css要谙练把握float、position、width、height,以及对付的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟构造有关系的款式,必定要把握。
  3. JavaScript
    可能前两个大师感受还过的去,看到js就蛋疼了,其实吧,js入门很简单的,不必要会良多工具的,只需会按照某个id、或者name拿到网页dom或者款式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的把持,然后数据逻辑断定,了局方面的,无非就是跳转、弹框、潜匿什么的,把这些全数连系其他就是实际用处了,代码一点都不难,会了这些根本js,其他的直接百度就好了。然后看多了,用多了,就什么都不是问题了。
  4. jquery【暂时不学】
    jquery是相称于把js封装了一套的一个js插件,目的就是把持起来更便当,代码写的更少,jquery入门也很简单,那些是入门必要学的和js一样,只是换成了jq的代码。其他的一样百度就够了。
  5. vue和react(框架)【暂时不学】
    目前这两个框架对于许多公司来说已经是必要掌握的,而且对于想要进入行业的人来说,确实是必不可少的。

什么是「页面渲染」

页面渲染都是浏览器的工作。大致分为以下几步:

加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。

解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)

渲染:构建渲染树,对各个元素进行位置计算、样式计算等等,然后根据渲染树对页面进行渲染(可以理解为“画”元素)

这几个过程不是完全孤立的,会有交叉,比如HTML加载后就会进行解析,然后拉取HTML中指定的CSS、JS等。

★★★在浏览器端发生了什么?★★★
有一道经典的面试题是说:从浏览器输入url到页面渲染完成这一过程都发生了什么?这个问题可以说是一个非常常见的场景,足以涵盖大量的计算机知识,可深可浅。我们来简单的了解一下在浏览器端发生的过程,以此来学习前端的一些概念。一般情况下,一个url会对应了服务器上的一个HTML文件(这个叫网页文件,格式类似于XML),浏览器获得HTML文件后,开始解析并渲染HTML文件,遇到带有src的link标签,或带有src的script标签时,就会再去下载对应的CSS文件或JS文件。style和script标签,也可以直接包含相应的语言内容,这样浏览器就直接解析或执行了。什么是CSS文件呢?CSS(层叠样式表)的内容是一些样式的规定,规定了什么?HTML文件的主体内容其实是网页的结构化的表示,其中的标签都有一定特殊的含义,相当于网页内容的骨架,而CSS文件则是骨架上的装饰语,告诉了浏览器这些 结构内容的外貌。什么是JS文件呢?即Javascript脚本文件,JavaScript是一门运行在浏览器端的脚本语言,生动的网页靠的就是JavaScript。所以浏览器发生的过程大致应该是,渲染HTML所声明的网页结构内容,根据CSS的规定来修饰这些结构,执行JavaScript来修改结构或赋予其中一些结构一些动作功能(白话,非真实过程)

三剑客的学习链接

①——W3school

②——菜鸟教程

③——百度前端技术学院

菜鸟教程 看起来更有眼缘~~

HTML + CSS这部分建议在在线教程上学习,边学边练,每个属性后还有在线测试。然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练、多练、多练!JavaScript要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先通过在线教程学习一些基本语法和定义。然后你必须要看书,然后实践(好多人问有没有快速捷径,我只能告诉你:如果有捷径,码农们就不用天天如此苦逼了吧)。

注:要买参考书的话,先上知乎啥的搜搜,好多人在网上推荐好书、各种奇淫技巧!

前端框架

目前流行的三大前端框架:React、Vue、Angular,三大框架各有特点,Vue易上手,Angular大而全,React生态好,总的来说都能胜任开发工作,具体对比可以自行搜索。框架虽然有好几个,但他们解决的问题其实是一个问题,即通过Javascript控制网页。现代的JS框架都是MVVM框架了,在这些MVVM框架以前还有MVC框架如backbone.js,更简单的就是直接一把梭,jquery来操作DOM,拼接HTML字符串这种来控制网页。现代的MVVM(Model-ViewModel-View-Controller)主要改善了如何更新视图(即操作网页的DOM),通过操作数据,数据的变化映射到DOM的改变。避免了直接修改DOM。我们知道浏览器内部是有一个DOM树来表示网页的结构,前端框架一般会有一个虚拟DOM,来与之对应,当JS修改数据时,可能会影响虚拟DOM的变化,虚拟DOM变化后,会将其变化通过JS的DOM的API应用到浏览器的DOM树上,进而触发网页的变化。前端框架还有一个特点就是组件化,通过将能重复利用的DOM结构封装成可复用的组件来提高开发效率,但这种组件的封装都跟框架有关,只适用于同一种框架。框架无关的WebComponent还在发展中。

发布了26 篇原创文章 · 获赞 8 · 访问量 4795

猜你喜欢

转载自blog.csdn.net/RickieLim/article/details/104421338