52.1- 前端开发概述

作者: BeautifulSoulpy | 来源:发表于2020-03-19 18:41 被阅读0次

你的时间有限，所以不要为别人而活。不要被教条所限，不要活在别人的观念里。不要让别人的意见左右自己内心的声音。最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要的。

总结：

通过前端历史发展，让你了解前端编程究竟是怎么回事，最重要的东西是什么，以及在使用过程中，我们要注意什么东西；

HTML是解决数据的格式问题的；XML是解决数据的传输，数据的类型问题（数据的描述）的；现在异步传输慢慢使用Json，XML开始退出了；

V8引擎非常重要；最应该了解的是动态网页技术；流行的布局大多采用 DAV+css技术；

1. Web前端基础——HTML

html5 的时代，我们可能都不需要操作系统了；

1.1、HTML 概述

HTML（HyperText Markup Language）超文本标记语言，它不同于编程语言。
超文本就是超出纯文本的范畴，例如描述文本的颜色、大小、字体等信息，或使用图片、音频、视频等非文本内容。

HTML由一个个标签组成，这些标签各司其职。有的提供网页信息，有的负责图片，有的负责网页布局。

<marquee behavior="alternate">
<font size="50" color="blue">爱倒腾电脑的神奇小四</font>
</marquee>

可以运行在本地,和服务端
1.html 标签一般成对出现 <标签名></标签名>
2.单独标签不需要配对的标签 <br /> <hr />
3.一个标签其中的内容 = 一个html 元素
4.标签中可以有一个或多个属性 ,属性名=属性值,属性值可以用单引号或双引号引起来,也可以不引
5.标签名和属性名大小写不敏感

不同的浏览器之间存在着不兼容的问题（一般情况下，我们验证火狐、谷歌和IE，这三大浏览器）

制定规范的,有 IETF(Internet 工程任务组) 和 w3c (www 联盟)两个组织, 当前正在使用的版本是 HTML 4.01。

1.2 、HTML 全局构架标签

<html>
    <head>
     //这里的内容通常不会在浏览器中显示

     //通常用来引入脚本文件(javascript 文件),或css样式等

    </head>

    <body>

    //这里的内容一般都是要显示在浏览器中

    </body>

</html>

body 标签的属性
1.Text :设置网页中文字的颜色
2.link:设置一般超链接文本的显示颜色
3.alink:鼠标移到超链接上时,超链接显示的颜色
4.vlink:访问过的超链接的颜色

颜色属性值有两种表示方式:
1.十六进制RGB 颜色码, 用一个 # 后跟六位16进制数例如: #FF0000
2.HTML 的颜色常量名 :Red

--background:设定背景墙纸所用的图象文件,可以是gif 或 jpeg ,可以是绝对路径或相对路径 //background="lengtu.jpg" 后,平铺,挡住了背景
--bgcolor:背景色,当已设置 background时,它会失去作用,除非background有透明的地方

--leftmargin:网页显示画面与浏览器左边的间隙,单位为象素 //本例中原来文字和左边还有一定的空隙,但加上 leftmargin=0 后,直接贴上了

--topmargin:上面的

--class,name,id,style等属性

用myeclipse 新建一个网页,可以看到顶部有这样一句话

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

它称为文档类型定义语句

注释

使用这样的方式注掉的文本,浏览器在解释的时候将会忽略它们,但它们会被发送到客户端,查看源码是可以看到的(注意,它不能嵌套)

html 编码:（前三个比较常用）

&gt;   >

&lt;   <

&nbsp  空格

&amp   &

&quot  "        ”

1.3、格式标签

<p></p> //段落标签

<p  align="right">

这是一段文本
</p>

<p align=center  >
这是中间的一段文本

</p>

<p align="left">

这是下面的一段文本

</p>
<br /> //换行
<nobr></nobr>

<blockquote></blockquote> //缩进 在它中间加入的文本,会按缩进的形式显示 用它的结果好象设置了 leftmarign,实验发现是两端缩进

<center></center> //居中  html5中过时了

<marquee></marquee> //动感

<marquee behaiver=scroll direction =up></marquee>

behaiver: slider,alternate,scroll

direction:up ,down,left, right

<dl></dl> //创建列表

<dt></dt>

<dd></dd>


<dl>
   <dt>小标题</dt>
       <dd>aaa<dd>
       <dd>bbb<dd>
       <dd>ccc<dd>
    <dt>小标题</dt>
       <dd>xxx<dd>
       <dd>vvv<dd>
       <dd>bbb<dd>
</dl>

<ol></ol> //有序列表创建带有数字序号的列表 o 就是order的意思,它有 type =1,a 这类属性

<ol type="a">

<li>这是内容</li>

<li>这是内容</li>

<li>这是内容</li>

<li>这是内容</li>

</ol>

<ul></ul>//无序列表

<ul type="square">  //前面的小点变成方块了
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

<li></li> 只能在上两者中使用.用于创建具体的列表项
<pre></pre> //预格式化保持其中内容的格式不变

<pre>
    这
     是   一
      段   
             文本
</pre>

超文本的诞生是为了解决不能格式显示的问题，是为了好看，到那时只能通过过网络才能分享超文本的内容，所以制定了HTTP协议；

2.浏览器

2.1历史

1980年代，Tim Berners-Lee为CERN（欧洲核子研究中心，当时欧洲最大的互联网节点）设计基于超文本思想的ENQUIRE项目，以促进科研人员之间的信息共享和更新。1989年他编写了《信息化管理：建议》一文，并构建基于Internet的Hypertext系统，并在CERN开发了World Wide Web项目，同时他还写了第一个网页服务器httpd。世界上第一条http: //info. cern. ch/于1991年8月6日上网。

世界上第一个网页

1994年MIT他创建了W3C。W3C万维网联盟，负责万维网持续发展。他提出W3C的标准应该基于无专利权、无版税。

浏览器的发展史并不久远，只有短短的20多年，但是却不断更迭。

表1.主流的浏览器发展历史

Marc Andreessen于1993年发明了Mosaic浏览器，看到这个技术的前景，他随后不久就成立了Netscape。1994发布了己的公司——网景。

1995年微软发布IE，开启第一次浏览器大战，最终后来者居上；

由于IE的捆绑销售行为，网景的单一浏览器市场萎缩，从1990年代的90%下降至2006年的1%。1999年网景被AOL收购，收购后不久，Netscape公开了浏览器代码，并创建了Mozilla组织。Mozilla组织使用
Gecko引擎重写浏览器。
Mozilla组织使用Gecko引擎发布了几款浏览器，最终于2004年更名为Firefox浏览器。
2003年5月，网景被解散。AOL于2007年12月宣布停止支持Netscape浏览器。

Apple的Safari于2003发布第一个测试版。

2008年Google的Chrome浏览器带着 V8 引擎横空出世。

网景公司的技术:（开源的）
HTTP Cookie，解决HTTP无状态
JavaScript
SSL协议
JAR格式文件，将Java的class文件打包压缩，并加上签名；

2012年4月9日，微软以10亿5千6百万美元购买800项美国在线的专利或专利授权，专家们认为网景的SSL、Cookie等专利可能是微软愿意出高价的理由之一【摘自wiki百科】

2.2 浏览器技术

浏览器是一种特殊的客户端，能够基于HTTP(s)、FTP等协议和WEB服务器进行交互，呈现网页内容的软件。

可以简单的认为浏览器软件分为2个部分：

外壳
外壳提供用户交互的界面

内核(引擎Engine)
提供HTML、CSS、图像的渲染引擎，提供DOM编程接口
提供JavaScript引擎
提供浏览器内建对象

常见浏览器内核信息

其他国内浏览器，一般都是采用了以上的一个或两个内核加上外壳实现。

JS引擎
不同浏览器内核中也使用不同的JS引擎，常见的JS引擎有JScript、TraceMonkey（Firefox）、V8等。
这些引擎差异不小，实现ECMA标准不同，甚至有不按照标准实现的。
使用jQuery等框架来解决兼容性问题，抹平平台差异。

JavaScript

JavaScript与JAVA 没什么关系；
Javascript 简称JS，是一种动态的弱类型脚本解释性语言，和HTML、CSS并称三大WEB核心技术，得到了几乎主流浏览器支持。

1994年，网景Netscape公司成立并发布了Netscape Navigator浏览器，占据了很大的市场份额，网景意识到WEB需要动态，需要一种技术来实现。

1995年9月网景浏览器2发布测试版本发布了LiveScript，随即在12月的测试版就更名为JavaScript。同时期，微软推出IE并支持JScript、VBScript，与之抗衡。

1997年，网景、微软、SUN、Borland公司和其他组织在ECMA确定了ECMAScript语言标准。JS就成为ECMAScript标准的实现之一。

ES

ES，ECMAScript是由ECMA国际通过ECMA-262标准化脚本程序语言，该语言用于互联网；

JavaScript是商品名，目前商标权在Oracle手中，ES是标准名；

1997年，制定首个版本ECMA-262。
1999年12月，ES 3，支持更强大的正则表达式等。ES4太激进，最终放弃。
2009年（移动互联网时代带来），ES5发布，得到广泛支持。支持严格模式，支持Json。
2015年，ES6发布，引入非常多的新的语言特性，还兼容旧版本特性。ES6之前按照版本号命名，从ES6开始使用年份作为版本号，ES6即ECMAScript 2015。

V8引擎

就在浏览器市场一家独大的时候，Firefox、chrome异军突起。
2008年9月2日，Google的chrome浏览器发布，一并发布的Js引擎，就是V8引擎。V8使用BSD协议开源。
V8引擎使用 C++ 开发，将JavaScript编译成了机器码，而不是字节码，还用很多优化方法提高性能，因此，V8引擎速度非常快。
V8引擎还可以独立运行，可以嵌入到其他任何C++程序中。
V8引擎的诞生，使得服务器端运行JS成为了可能且方便的事情。

2009年，基于V8引擎，诞生了Nodejs，这是服务器端运行JS的运行环境。(JS全栈开发时代)

CSS（Cascading Style Sheets）层叠样式表（样式美工）

HTML本身为了格式化显示文本，但是当网页呈现大家面前的时候，需求HTML提供更多样式能力。这使得HTML变得越来越臃肿。这促使了CSS的诞生。

1994年，W3C成立，CSS设计小组所有成员加入W3C，并努力研发CSS的标准，微软最终加入。
1996年12月发布CSS 1.0。
1998年5月发布CSS 2.0。
CSS 3采用了模块化思想，每个模块都在CSS 2基础上分别增强功能。所以，这些模块是陆续发布的。

不同厂家的浏览器使用的引擎，对CSS的支持不一样，导致网页布局、样式在不同浏览器不一样。因此，想要保证不同用户使用不同浏览器看到的网页效果一直非常困难。

动态网页技术（后端技术）

JS的引入使得浏览器可以显示动态的效果，但这不是动态网页。

发明WEB技术的初衷是为了分享文档，而这些内容是静态的，就是写好的不变的文件。通过URL定位到这些文档，将内容下载到浏览器上，由浏览器呈现。

互联网发展，网民的需求增加，大家希望提供交互式访问。用户提交需求，服务端找到需求匹配的资源并发回浏览器端显示。这就是动态网页；
动态网页指的是网页的内容是动态的，URL不变，里面的内容变化。例如访问一个查询页面，提交的关键字不同。下面的表格内容变化；

动态网页，表现的是浏览器端内容的变化，而本质上他是一种服务器端动态网页技术；

最早诞生的动态网页技术有 ASP、JSP、PHP等，后来几乎所有流行的高级语言都提供了开发动态网页的能力；

网页布局

早期的网页只需要标题，使用 <P> 标签分段。

后来有人大量使用表格标签，可以做到很好的内容布局，也出现结构化的布局方案。但随着页面内容的堆积，出现了成百上千个表格嵌套的情况，浏览器绘制很慢。

后来出现了Div + CSS布局风格（目前主流布局），舍弃了表格，加上JS，使得前后端开发分离，而且可以做到很好的自适应布局。例如流式瀑布一样的布局。

同步和异步(同步是老古董了；异步次啊是主流)

同步（全部重新下载）

早期，网页就是一页页的文本，没什么图片、样式。
后来，互联网时代到来，网页内容越来越大。

浏览器渲染HTML，需要先下载CSS加载为的是好渲染网页。之后，下载网页内容，并逐步渲染。还要构建DOM树，加载JS脚本并执行，JS可能需要修改DOM，网页就要重新渲染。

如果JS放在网页HEAD中，还需要等待JS下载并加载。

图片使用 <img> 标签，是发起新的请求的，如果图片返回，需要重新绘制网页。

好不容易，一张网页绘制完毕，交互式网页：用户提交了请求，就是想看到查询的结果。服务器响应到来后是一个全新的页面内容，哪怕URL不变，整个网页都需要重新渲染。例如，用户填写注册信息，只是2次密码不一致，提交后，整个注册页面重新刷新，所有填写项目重新填写（当然有办法让用户减少重填）。这种交互非常不友好。

从代价的角度看，就是为了注册的一点点信息，结果返回了整个网页内容，不带浪费了网络带宽，还需要浏览器重

新渲染网页，太浪费资源了。

上面这些请求的过程，就是同步过程，用户发起请求，页面整个刷新，直到服务器端响应的数据到来并重新渲染。

异步（前端必须掌握的技术）

1996年微软实现了iframe标签，可以在一个网页使用iframe标签局部异步加载内容。

1999年微软推出异步数据传输的ActiveX插件技术，太笨重了，但是也火了很多年。有一个组件XMLHttpRequest被大多数浏览器支持。

A JAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），使用XMLHttpRequest组件，结合JS，数据格式采用XML（可扩展标记语言），将这三者结合，实现网页的异步请求。A JAX是一种技术的组合，技术的重新发现，而不是发明，但是它深远的影响了整个WEB开发。

2005，google在Gmail和地图中应用Ajax，使它大受欢迎并推广开来。

有了异步请求，就可以动态的从浏览器发起请求到服务器端，服务器端返回响应的数据封装成XML（JSON）返回给浏览器，浏览器只需要使用JS把内容加入到DOM中，局部渲染就可以了。这个过程中，整个网页不用重新刷新，只需要局部动态改变即可；