前端技术概述

目录

一、开发框架

1、C/S架构(Client-Server)

2、B/S架构(Browser-Server)

二、前端术语

1、渲染 

2、Front-end(前端开发)

 3、Back-end(后端开发)

三、HTML的DOM结构

四、HTML的初衷和特点

五、浏览器(Browser)大战

 1、NetScape(网景)和IE的竞争

 2、IE 和Firefox的竞争

 3、Firefox和Chrome的竞争

六、浏览器内核

七、开发工具(IDE)

      1、HBuilder

      2、WebStorm

      3、VS Code

八、开发框架(Framework)的演变


一、开发框架

1、C/S架构(Client-Server)

C/S架构示意图

           【介绍】:

     C——Client,客户端计算机安装特定【客服端程序】

                                   可以帮助客户端计算机向指定服务器发送请求

             S——Server,存放【公共资源】

                                    在服务器安装一种特定【资源调度软件】

                                     接收特定客户端程序发送请求,将请求需要资源文件推送回客户端计算机上【客户端程序】

            【应用场景】:

              银行、保险类对安全性能要求比较高的客户群

            【优点】:

               安全性高

             【问题】:

                 部署困难、维护困难             

2、B/S架构(Browser-Server)

B/S架构示意图

           【介绍】:

      B——Browser,读取网页内容,通过浏览器的内部机制把界面呈现给客户

                                 可以帮助客户端计算机向任意服务器发送请求

                                 类似于服务器和客户之间的中介

             S——Server,在服务器安装一种特定【资源调度软件】

                                     接收所有浏览器发送请求,将请求需要资源文件推送回客户端计算机浏览器上

            【例子】:

              普通的企事业单位和普通个人用户

            【优点】:

             部署容易、更新容易、操作容易

            【问题】:          

       1、浏览器兼容问题:不同的浏览器处理来自服务器的同一界面,会有不同的表现

       2、安全性低

二、前端术语

1、渲染 

                【浏览器】接收请求来的HTML、CSS、javascript等资源

                  解析、构建树、渲染布局、绘制,呈现给客户能看到的界面

            扩展内容

                   服务器编程的目的:

         1、客户逻辑的实现

         2、数据库访问(实现数据持久化)

               数据库语言的种类:MySQL、Oracle(这两种都是关系型数据库语言)

                                               MongoDB(非关系型数据库语言,使用Json块的形式访问数据)

2、Front-end(前端开发)

                     面向用户的用户接口:HTML/CSS/JavaScript

                     前端框架:jQuery、Bootstrap

                     前端编程语言:Vue

            举例说明:HTML就像一只没有羽毛的鸟,是网页的结构

                              CSS就像一只有五颜六色羽毛的鸟,是网页的修饰

                              JavaScript就像用猎枪打中鸟,鸟从书上掉下来,是用户和界面之间的交互

    3、Back-end(后端开发)

      服务器端的公共资源         

      后端编程语言:Java

      数据库语言:Oracle、MySQL、MongoDB

      开发框架:SSM

三、HTML的DOM结构

HTML的DOM结构

四、HTML的初衷和特点

1、独立于平台

2、超文本标记语言(Hyper Text Markup Language)

3、精确的结构化文档

五、浏览器(Browser)大战

浏览器的发展史

 1、NetScape(网景)和IE的竞争

         主要问题是JavaScript,竞争的结果是JavaScript的发展和微软的胜出

 2、IE 和Firefox的竞争

                 主要问题是开发者工具,竞争的结果是Firefox的胜出

      3、Firefox和Chrome的竞争

                 主要问题是开发者工具的使用性和实用性,竞争的结果是Chrome的胜出

       发展路线:

       1、技术发展:从C/S弱势到B/S盛行,再到多端的兴起(Mobile-First)

       2、商业路线:四个公司的商业开创性路线

六、浏览器内核

仅作了解:Trident (['traɪd(ə)nt])、Gecko (['gekəʊ])、Webkit、Chromium/Blink、Presto (['prestəʊ])

七、开发工具(IDE)

      1、HBuilder

                轻量级 前端开发工具

      2、WebStorm

                重量级 插件式前端开发工具

      3、VS Code

                微软、开源、轻量级前端开发工具 

八、开发框架(Framework)的演变

      ExtjS——>EasyUI——>Bootstrap/jQuery——>Angualar.js/React.js/Vue.js

     大前端出现的背景:

      1、前后端分离:后台程序员只写后端,但是要了解前端

      2、前端工程化:将前端整个看成一个项目

发布了17 篇原创文章 · 获赞 15 · 访问量 894

猜你喜欢

转载自blog.csdn.net/abc701110/article/details/104544504