零基础学习Web前端开发

技术背景

什么是前端开发?

前端开发是创建Web页面或App等将界面呈现给用户的过程。通过使用 HTMLCSSJavaScript,以及它们衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。

随着互联网技术的发展和HTML5、CSS3、Node.js等各种层出不穷的应用,现代网页更加美观,交互效果显著,功能更加强大。

HTML5

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技术之一。

HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

与传统的技术相比,HTML5 的语法特征更加明显,并且结合了SVG(可缩放矢量图形)的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

CSS3

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后CSS的扩展奠定了基础。另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂。

Javascript

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

JavaScript的标准是ECMAScript 。截至2012年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为ECMAScript 2015,但通常被称为ECMAScript 6或者ES6。

浏览器内核

浏览器内核通常又称为渲染引擎,负责读取网页内容,整理讯息,计算页面的显示方式并渲染显示页面。

五大常用浏览器,其中Chrome浏览器占据了30%以上的市场份额:市场份额查询

  • Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
  • IE浏览器内核:Trident内核,也是俗称的IE内核;
  • Firefox浏览器内核:Gecko内核,俗称Firefox内核;
  • Safari浏览器内核:Webkit内核;
  • Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;

其他国产浏览器:

  • 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
  • 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
  • 百度浏览器、世界之窗内核:IE内核;
  • 2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

开发环境

Sublime Text

轻量级,打开快,有各种高级功能和扩展。

Visual Studio Code

Visual Studio Code是美国微软公司的一个项目:运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器(像Notepad++之类)。

与Visual Studio Code不同,Visual Studio(简称VS)则是美国微软公司的开发工具包系列产品,是一款编译器(IDE),两者不要混淆了。

WebStorm

WebStorm 是Jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为"Web前端开发器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

学习过程

  1. 小马技术-Emmet爆速开发
  2. 会打字就能学会的前端Web基础教程HTML5+CSS3
  3. LESS | SASS基础 | Stylus
  4. JavaScript从零基础入门到精通
  5. JavaScript核心 DOM BOM操作
  6. Javascript高级编程视频教程
  7. Javascript数据结构与算法
  8. jQuery网页开发案例精讲
  9. 阮一峰ECMScript 6 入门教程
  10. 廖雪峰Javascript教程

参考资料

  1. Sublime Text 3破解方法(文中提到的hexed.it网站可能打不开,找一个Hex Editor工具即可)
  2. 知乎:Web 前端怎样入门
  3. Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文
  4. HTML5中sublime Text3的常用插件的安装及使用
  5. html5的崛起之路
  6. 五大主流浏览器及四大内核
  7. 在VSCode中如何做代码格式化

结束语

你的对手在看书,你的仇人在磨刀,你的闺蜜在减肥,隔壁老王在练腰。

与其在意别人的背弃和不善,不如经营自己的尊严和美好。

原文地址:https://www.cnblogs.com/zenronphy/p/WebFrontLearning.html