Web前端开发概述（二）

😊Web前端开发概述（二）

- 👻前言
- 🪁前端开发背景
- 🔍当下前端开发要求
- 🔦Web前端开发技术
- - 🎭HTML
  - 🎭CSS
  - 🎭JavaScript
  - [🎭HTML DOM](#🎭HTML DOM)
  - 🎭BOM
  - 🎭Ajax
  - 🎭JQuery
- 🔧Web前端开发工具
- - ⚙️EditPlus
  - [⚙️Sublime Text](#⚙️Sublime Text)
  - [⚙️Visual Studio Code](#⚙️Visual Studio Code)
  - ⚙️WebStorm
  - ⚙️HBuilder
- 🌏浏览器工具
- - 🪐浏览器内核
  - 🪐常见浏览器
- 📖总结

👻前言

😊各位小伙伴们，新专栏新文章持续更新！！！

上篇文章我们详细介绍了Web发展起源、Web相关的基本概念以及与Web相关的知识点 ，这一节主要围绕前端开发由来以及主要的前端开发技术，让小伙伴们对Web前端开发有一个更深层次、全面的了解，同时也让小伙伴们知道现如今前端的迭代更新以及发展趋势，对于想要入行前端开发的小伙伴们，也应该有全方位了解Web前端的意识，俗话说"知己知彼，方能百战不殆"。只有清楚的规划好自己的发展方向，才能有利于自己学习更多新的知识，新的技术。

随着Web的不断迭代更新，前端开发技术的不断发展，前端开发由此发生了很大的变化，网站不再是承载单一的文字和图片的信息提供者，软件化的交互形式为用户提供了更好的用户体验，前端的发展也更注重用户的交互作用，用户称为了网站内容的浏览者和提供者，网站需要更简便，更快捷的前端技术来实现。

🪁前端开发背景

前端开发是创建Web页面或App等前端界面呈现给用户的过程 ，通过 H T M L ， C S S 及 J a v a S c r i p t HTML，CSS及JavaScript HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。随着移动设备的普及，响应式设计和移动应用开发也成为了前端开发的重要方向。前端开发人员需要关注不同屏幕尺寸和设备类型下的网页布局和性能优化。同时，前端工程化和构建工具的出现进一步提升了开发的效率和代码的可维护性。总而言之，前端开发起源于互联网的发展和人们对于网页设计、用户体验和交互功能的需求。随着技术的不断进步和应用的广泛应用，前端开发已经成为了一个独立且重要的领域。

🎯目前前端开发的趋势：

响应式设计：随着移动设备的普及，响应式设计已经成为前端开发的必备技能。开发人员需要能够根据屏幕大小和设备类型来调整网站或应用程序的布局和功能。
前端框架：前端框架如React、Angular和Vue等的流行度不断上升。这些框架提供了组件化开发的方式，简化了复杂的应用程序开发过程，并提高了开发效率。
移动应用开发：随着移动应用的广泛应用，开发人员需要掌握移动端开发技术，如React Native和Flutter等跨平台开发工具，以便同时为iOS和Android平台开发应用程序。
Web性能优化：用户对网页加载速度和性能的要求越来越高，开发人员需要关注网站的性能优化，包括减少HTTP请求、代码压缩和缓存、图像优化等。
前端工程化：前端工程化已经成为开发人员的标配，使用构建工具如Webpack、Gulp和Grunt等来管理项目、自动化工作流程，并实现代码的模块化、打包和部署等任务。

🔍当下前端开发要求

想要成为一名前端开发人员，首先自身要具备良好的编程基础，包括理解基本的编程概念、掌握常用的数据结构和算法，并具备解决问题和调试代码的能力。HTML、CSS和JavaScript作为前端开发的核心技术，需要熟悉并掌握 HTML、CSS 和 JavaScript。了解 HTML 的标签结构和语义化，熟悉 CSS 的选择器和样式应用，以及掌握 JavaScript 的基本语法、DOM 操作和事件处理等。其次，掌握至少一种前端框架或库，如 React、Angular、Vue 等。这些框架和库可以提高开发效率，实现组件化开发、状态管理和数据绑定等功能。了解响应式设计原理和技术，能够创建适应不同屏幕尺寸和设备类型的网页布局。

同时，具备移动优化的能力，保证网页在移动设备上的良好体验。了解不同浏览器的特性和兼容性问题，能够编写具有良好兼容性的代码，并进行跨浏览器测试和调试。熟悉使用版本控制工具如 Git，能够管理项目的代码版本、合并代码和解决冲突。了解性能优化的方法和策略，熟悉前端性能测试工具，能够优化网页的加载速度、资源压缩和缓存策略等。了解前端工程化的概念和流程，熟悉常用的构建工具如 Webpack、Gulp 和 Grunt 等，能够自动化项目的构建、打包和部署等任务。具备一定的设计理念和用户体验意识，能够与设计师和产品经理进行有效的沟通和合作，提供良好的用户界面和交互体验。随着技术的不断发展和前端领域的不断演进，前端开发的要求也在不断提高。想要学习前端开发，不仅需要持续学习和更新自己的知识，还需要具备解决问题和不断创新的能力。

🔦Web前端开发技术

随着互联网技术的飞速发展和普及，Web技术也在不断迭代更新，并且在应用领域越来越广泛。Web已经成为这个时代不可或缺的信息传播载体。全球范围内的资源互通互访，开发共享已经成为WWW最优实际应用价值的领域。而Web前端开发最基本也是最重要的HTML、CSS、JavaScript三大技术又被称为"前端三剑客"。

🎭HTML

H T M L （ H y p e r T e x t M a r k u p L a n g u a g e ） HTML（HyperText Markup Language） HTML（HyperTextMarkupLanguage）全称为超文本标记语言，HTML是一种标记语言，而不是编程语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体 。HTML是Web页面的结构。HTML使用标记来描述网页，网页的内容包括标题、副标题、段落、列表、表格、表单等。

自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术，通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。

HTML是 S G M L （ S t a n d a r d G e n e r a l i z e d M a r k u p L a n g u a g e ，标准通用标记语言） SGML（Standard Generalized Markup Language，标准通用标记语言） SGML（StandardGeneralizedMarkupLanguage，标准通用标记语言）下的一个应用（也称为一个子集），也是一种标准规范，它通过标记符号来标记要显示的网页中的各个部分。而SGML是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

HTML文档是用来描述网页，由HTML标记和纯文本构成的文本文件，Web浏览器可以读取HTML文档，并且以网页的形式显示出他们。

🎭CSS

由于Netscape和Microsoft两家公司在自己的浏览器软件中不断地将新的HTML标记和属性（例如字体标记和颜色属性）添加到HTML规范中，导致创建具有清晰的文档内容并独立于文档表现层的站点变得越来越困难。为了解决这个问题， H a k o n W i u m L i e Hakon Wium Lie HakonWiumLie（哈肯·维姆·莱）和 B e r t B o s Bert Bos BertBos（伯特·波斯）于1994年共同发明了级联样式表

级联样式表也称为层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

在设计Web网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者同一个网站的不同页面的外观和格式。再用CSS技术是为了解决网页内容与表现分离的问题。CSS语言是一种标记语言，不需要翻译，属于浏览器解释型语言，可以直接由浏览器解释执行，CSS标准由W3C的CSS工作组制定和维护。

🎭JavaScript

JavaScript（简称"JS"）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。同时，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛应用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，例如响应用户的各种操作。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成，是一种由Netscape的LiveScript发展而来、原型化集成面向对象动态类型的客户端脚本语言，主要目的是为服务器端脚本语言提供数据验证的基本功能。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程（Node.js）

🎯一个完整的JavaScript实现是由以下三个不同部分组成的:

核心（ECMAScript）
文档对象模型（Document Object Model，DOM）
浏览器对象模型（Browser Object Model，BOM）

🎭HTML DOM

DOM与JavaScript结合起来实现了Web网页的行为与结构的分离。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口，根据W3C DOM规范，DOM是一种与浏览器，平台语言无关的接口，使得用户可以访问页面上其他的标准组件。它可以动态地访问程序和脚本,更新其内容、结构和WWW文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容

DOM解决了Netscape的JAvaScript和Microsoft的JScript之前的冲突，为Web设计师和开发者提供了一个处理HTML或XML文档标准的方法，方便访问站点中的数据、脚本和表现层对象，借助与JavaScript可以重构整个HTML文档，可以添加、移除、改变或者重排页面上的元素。JavaScript需要获得对HTML文档中所有元素进行访问的入口，这个入口连通对HTML元素进行添加、移动、改变或者移除的方法和属性，都是通过文档对象模型DOM来获得的，HTML DOM定义了访问和操作HTML文档的标准方法。

🎭BOM

BOM（Borrow Object Model）也称为浏览器对象模型，是用于描述对象与对象之间层次关系的模型 。浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。由于没有相关的BOM标准，每种浏览器都有自己的BOM实现方法。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器都可以为这些对象或其他对象定义自己的属性和方法。

BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript拓展都被看做BOM的一部分，这些拓展包括：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
提供Web浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对Cookie的支持
Internet Explorer对BOM进行拓展已包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象

常见的BOM对象有Window对象、Navigator对象、Screen对象、History对象、Location对象等

🎭Ajax

Ajax（Asynchronous JavaScript and XML）也称为异步JavaScript和XML。Ajax是多种技术的综合，它使用XHTML与CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换和处理，使用XMLHTTPRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合，可以说Ajax已经成为Web开发的重要武器

传统的网页如果需要更新内容，必须重载整个网页页面，而使用Ajax则可以部分更新网页内容。通过Ajax，可以使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信，不在需要重载页面与Web服务器交换数据。Ajax在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可以使页面从服务器请求少量的信息，而不是整个页面。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象， JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

🎭JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。 jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，简化HTML与JavaScript之间的操作。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

🔧Web前端开发工具

在HTML基础上，使用JavaScript可以开发交互式Web页面。JavaScript的出现使得网页和用户之间实现了一种实效性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。而用于开发Web前端应用工具有很多，可以根据使用习惯进行选择。

⚙️EditPlus

EditPlus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

EditPlus（文字编辑器）汉化版是一套功能强大，可取代记事本的文字编辑器，拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，同步于剪贴板可自动粘贴进 EditPlus 的窗口中省去粘贴的步骤。另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，同时支持C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可节省一半以上的网页制作时间，若计算机有安装IE3.0 以上版本，它还会结合IE浏览器于 EditPlus 窗口中，让开发者可以直接预览编辑好的网页（若没安装IE，也可指定浏览器路径）。因此，它是一个相当棒又多用途多状态的编辑软件。

EditPlus是Windows下的一个文本、HTML、PHP以及Java编辑器。它不但是记事本的一个很好的代替工具，同时它也为网页制作者和程序语言设计者提供了许多强大的功能。对HTML、PHP、Java、C/C++、CSS、ASP、Perl、JavaScript和VBScript的语法有突出显示。同时，根据自定义语法文件它能够扩展支持其他程序语言，无缝网络浏览器预览HTML页面，以及FTP命令上载本地文件到FTP服务器。

⚙️Sublime Text

Sublime Text 是一个文本编辑器（收费软件，可以无限期试用），同时也是一个先进的代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

⚙️Visual Studio Code

Visual Studio Code（简称"VS Code" ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

该编辑器集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。

⚙️WebStorm

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

⚙️HBuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件 。通过完整的语法提示和代码输入法、代码块等，大幅提升了HTML、JS、CSS的开发效率。

🌏浏览器工具

使用HTML、CSS、JavaScript组合技术设计的Web网站，要使用浏览器打开才能看到网页所呈现的效果，也就是说，浏览器是网页运行的平台。基于某些因素，浏览器并不是完全都采用统一的Web标准，或者说不同的浏览器在渲染网页时的机制是不一样 的，因此不同浏览器打开相同的网页可能会得到不一样的展示效果，因此，Web前端开发一定要了解不同浏览器的使用性能和特点，了解它们的差异性，在编写Web网页代码时才能充分考虑到浏览器的兼容性，让网站在不同浏览器中显示效果与风格相同。

🪐浏览器内核

浏览器内核是用来渲染网页内容的，将网页的代码转换成为最终呈现在访客面前的页面。

（1） Trident 内核。Trident 内核代表产品是Internet Explorer，说起Trident，很多人都会越到陌生、但提起IE（Internet Explorer）则无人不知、无人不晓，由于其被集成在全世界使用率最高的操作系统Windows中，得到了极高的市场占有率，所以又经常称其为IE核心。其浏览器代表主要为Microsoft Internet Explorer 系列。

（2）Gecko内核。Gecko是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为火狐内核。Gecko是跨平台的，能在Microsof Windows、Linux 和Mac OSX等主要操作系统上运行。

（3）Webkit 内核。WebKit内核是最有潜力而且已经有相当成绩的新兴内核，性能非常出色，而且对 W3C标准的支持很完善，其浏览器代表主要有Chrome、Safari、360、搜狗等。

（4）Presto 内核。Presto 是一个由Opera Software开发的浏览器内核，供Opera7.0及以上版本使用。Presto 取代了旧版的Opera 4~Opera 6版本所使用的Elektra排版引擎，其中加人了动态功能，其浏览器代表有Opera、Opera Next等。

🪐常见浏览器

Internet Explorer

Internet Explorer又称为IE浏览器，是微软公司推出的一款网页浏览器，直接绑定在Windows操作系统中，无需下载安装，IE有6.0、7.0、8.0、9.0、10.0、11.0、edge等版本，但是由于各种原因，一些用户任然在使用低版本的浏览器，如IE6、IE7等，所以在前端开发的过程中，低版本一般也是需要兼容的。虽然自从2004年以来Internet Explorer丢失了一部分市场占有率，但依然是使用最广泛的网页浏览器。

Google Chrome

Google Chrome又称为谷歌浏览器，是一个由Google公司开发的开源网页浏览器。该浏览器基于其他开源代码软件编写，包括WebKit和Mozilla，目标是提升稳定性，速度和安全性，并创造出简单且高高效的使用者界面，软件的beta（测试）版本在2008年9月2日发布，提供43种语言版本，有支持Windows、macOSX和Linux版本并提供下载，Chrome也称为使用最广泛的浏览器。

Mozilla Firefox

Mozilla Firefox中文名通常称为"火狐"，是一个开源网页浏览器，使用Gecko引擎（即非IE内核），可以在多种操作系统如Windows、Mac和Linux上运行。Firefox由Mozilla基金会与数百个志愿者所开发，原名"Phoenix"（凤凰），之后改名为Mozilla FireBird（火鸟），再改为现在的名字，Firefox的市场份额在全球荣居第三位。

Safari

Safari是苹果计算机的罪行操作系统MacOSX中新的浏览器，用来取代之前的Internet Explorer for Mac，Safari使用了KDE的KHTML作为浏览器的计算和兴，目前该浏览器已支持Windows平台，但是与运行在MacOSX上的Safari相比，有些功能出现丢失。Safari也是IPhone手机，IPadTouch，IPad平板电脑IOS的指定默认浏览器

Opera

Opera浏览器是一款由挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台的浏览器，可以在Windows、Mac、FreeBSD、Solaris、BeOS、OS/2、QNX、Linux等多种操作系统上运行。

📖总结

以上就是Web前端开发概述的所有内容，本篇重点介绍了Web开发"三剑客"，目前常用的Web前端开发工具以及各大主流浏览器，帮助小伙伴们在学习前端开发时更好的选择自己惯用的开发工具，帮助自己提升开发效率，当然，"预先善其事，必先利其器"，想要正式学习前端开发，必须先掌握好基础的Web前端理论知识，以及熟悉各类开发工具，了解各类浏览器兼容问题，接下来的文章，将正式进入HTML部分的学习。

🎨觉得不错的话记得点赞收藏呀！！🎨

😀别忘了给我关注~~😀