zoukankan      html  css  js  c++  java
  • 零基础学习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中如何做代码格式化

    结束语

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

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

  • 相关阅读:
    make menuconfig出现乱码
    内存中的变量和值
    is&==
    python小整数池
    生成器
    GIL
    grub rescue问题修复
    期末考试
    期末要求
    选课练习
  • 原文地址:https://www.cnblogs.com/zenronphy/p/WebFrontLearning.html
Copyright © 2011-2022 走看看