前端入门科普

163 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第16天,点击查看活动详情

前端是什么

  • 狭义上的前端:以HTML/CSS/JS为基础,实现Web界面
  • 广义上的前端:人机交互层的实现

前端现状

  1. 目前前端正处于工程化开发的阶段
    • 使网页制作的更加规范,更加流水线
  2. 以H5为主的移动端开发正在兴起
    • 微信二次开发,微信小程序,ReactNative.js(手机端安卓和苹果的差异、版本
  3. 逐步成长的全栈开发(node.js)
  4. 拥抱虚拟现实VR/AR(webGL)

前端历史

Tim Bernes Lee 发明了HTML。蒂姆·伯纳斯·李为了方便世界各地的物理学家能够进行合作研究与信息共享,创造了HTML语言。他是英国计算机科学家、万维网的发明者。

2017年,他因“发明了万维网、第一个浏览器和使得万维网得以扩展的基础协议及算法”而获得2016年度的图灵奖。蒂姆为他的发明正式定名为World Wide Web(万维网),即我们熟悉的WWW。

万维网联盟(W3C)由蒂姆·伯纳斯·李于1994年10月离开欧洲核子研究中心(CERN)后成立。该组织试图通过W3C制定的新标准来促进业界成员间的兼容性和协议。由于不兼容的HTML版本由不同的供应商提供,导致网页显示方式不一致。因此,联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

第一次浏览器大战:网景首次公开募股获得巨大成功。该公司的收入每季上升一倍,网景的浏览器市场占有率达到70%。 网景更多次尝试开发一种能够让用户通过浏览器来访问和修改他们的文件的网络应用系统。这引起微软注意,因为那概念跨越操作系统界线,微软视为对Microsoft Windows的直接威胁。 微软发布Internet Explorer 1.0,该版本是基于Spyglass开发的Mosaic版本。 此后,微软迅速迭代出了几个Internet Explorer新版本,将它们都捆绑于Windows操作系统中,并宣布用户可免费使用(网景当时是收费的)。

image.png

web前端开发常用语言

  • html,css,js三剑客

html——定义页面内容

image.png

css——定义页面样式

Cascading Style Sheets层叠样式表 image.png

js——负责控制页面的行为

image.png

  • jquery:javascript框架,javascript函数库,极大简化了javascript。   
  • bootstrap:一个用于快速开发 Web 应用程序和网站的前端框架。  
  • AngularJS: 是一个 JavaScript 框架。  
  • JSON: 是存储和交换文本信息的语法. 
  • Ajax: 可以用于创建快速动态的网页。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 
  • Angular 2:是一个开源的JavaScript框架 
  • React: 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI . 
  • LESS:是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表。是一种动态样式表语言,扩展了CSS的功能 
  • Vue.js :是用于构建交互式的 Web 界面的库。 
  • Node.js :是运行在服务端的 JavaScript。

推荐的书籍

image.png

此书的作者是Nicholas C.Zakas,雅虎的前端工程师,YUI的代码贡献者,本书的含金量可想而知,事实上他出的书也确实广受好评,拥簇者众多。 阅读本书只要有JS基础语法知识和DOM基础知识就行,而且本书开始阶段还是介绍JS和DOM的语法知识。笔者这里重点推荐一下第五章(类型),第六章(OOP),第七章(匿名),个人感觉这几章是本书的精华所在,多看几遍,至少要完全看明白,能为以后进阶打好基础。

推荐的学习网站

菜鸟教程:www.runoob.com/

Css概览:zh.learnlayout.com/column.html

W3school:www.w3school.com.cn/

推荐网课的网站

● bilibili ● 慕课网 ● 网易云课堂