欢迎来到一团铺 - 第三方源码交易平台!
网站地图   帮助中心

一团铺

全国首家C2C平台

站长交易服务一站式平台-一团铺

热门搜索: 帝国cms    网站源码   

Web前端基础怎么学?html、css、JavaScript 知识架构图

  • 时间:2019-09-07 12:33 编辑:源码交易 来源:源码交易平台 阅读:54
  • 扫一扫,手机访问
摘要:前端开发,web前端,网页制作,JavaScript,HTML5

以前开发者只要掌握 HTML、CSS、JavaScript 三驾马车就能胜任一份前端的工作了。而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端、跨平台实现功能,尤其是 AI、5G 技术的来临,都在加快前端技术的更新,也在逼促开发者要不停的学习,不能的接受新的技术标准。

“学什么”“怎么学”其实是我们要着重解决的问题。所以,今天给你梳理一下前端知识框架,帮你把知识点重新做个遍历,查缺补漏的学习更轻松。


Web前端基础怎么学?html、css、JavaScript 知识架构图



我们先来看什么叫做知识架构?

我们可以把它理解为知识的“目录”或者索引,它能够帮助我们把零散的知识组织起来,也能够帮助我们发现一些知识上的盲区。

本文包含了JavaScript、CSS和HTML以及浏览器的实现原理和API,这三个模块涵盖了一个前端工程师所需要掌握的全部知识。

JavaScript知识架构图


Web前端基础怎么学?html、css、JavaScript 知识架构图



在JavaScript的模块中,首先我们可以把语言按照文法、语义和运行时来拆分,这符合编程语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时。

运行时可以分为数据结构和算法部分——数据结构包含类型和实例(内置对象),算法是执行过程。执行过程应按照从最顶层的事件循环和微任务,到函数、再到语句级的执行。

语法和语义基本是一一对应关系,在JavaScript标准中有一份语法定义表,建议随时拿出来看一看。

HTML 和 CSS知识架构图


Web前端基础怎么学?html、css、JavaScript 知识架构图



在HTML的部分,我们按照功能和语言来划分它的知识,HTML的功能主要由标签来承担,所以首先要把标签做一些分类。图中元素后面的分类,便是我们按照承担的不同功能,把标签分成的几个类别。

除了标签之外,你还应该把HTML当作一门语言来了解下。较基础的HTML的语法和几个重要的语言机制:实体、命名空间,你一定要掌握。

CSS部分,可以按照语言和功能划分。

语言部分,@rule、选择器、单位是三个要关注的部分。

功能部分,可以重点关注布局(正常流和弹性布局)、绘制(图形和文字)以及交互类。

浏览器的实现原理和API


Web前端基础怎么学?html、css、JavaScript 知识架构图



浏览器的实现原理,是我们深入理解 API 的基础

从一般的浏览器设计出发,按照解析、构建DOM树、计算CSS、渲染、合成和绘制的流程来学习浏览器的工作原理。

在API部分,可以从W3C零散的标准中挑选几个大块的API来详细讲解,主要有:事件、DOM、CSSOM几个部分,他们分别覆盖了交互、语义和可见效果,这是我们工作中用到的主要内容。


  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【网络热点|IT业界资讯】送吗网,据消息称已被调查。送吗源码网,至今打不开!(2019-10-02 23:21)
【网络热点|IT业界资讯】送码网 - 国内领先的网站源码交易、网络推广、SEO、建站任务交易服务平台(2019-09-30 16:11)
【系统环境|】友价源码如何集成阿里云OSS功能(2019-09-07 17:53)
【系统环境|】如何备份或还原数据库(如何备份网站)(2019-09-07 17:50)
【系统环境|】关于如何商场安装教程(专业版)提供详细安装步骤!(2019-09-07 17:47)
【网络热点|IT业界资讯】零基础小白走Web前端之路是否可行?答案是yes!(2019-09-07 12:34)
【网络热点|IT业界资讯】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-09-07 12:33)
【网络热点|IT业界资讯】商业源码怎么买(2019-09-07 12:28)
【网页前端|JS】Tipso – 轻巧的jQuery提示框插件(2019-09-07 11:06)
【网络热点|IT业界资讯】商业源码,你了解多少?(2019-09-06 00:02)
联系我们
Q Q:11124779
客服:18577914131
邮箱:etp@etuanpu
营业:09:00 - 19:00