零基础学习Web前端开发

目录

• 技术背景
  • 什么是前端开发？
  • HTML5
  • CSS3
  • Javascript
  • 浏览器内核
• 开发环境
  • Sublime Text
  • Visual Studio Code
  • WebStorm
• 学习过程
• 参考资料
• 结束语

技术背景

什么是前端开发？

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

随着互联网技术的发展和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中如何做代码格式化

结束语

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

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