从web的历史看起来,说不定会有收获哦!

2018-02-03 10:26:42来源:https://hello2dj.github.io/2018/01/30/从web的历史看起来/作者:hello2dj人点击

分享

啥都不说先上图



题目有些大,我肯定cover不住,只是最近了有这么个想法,看看能不能梳理一下。


其中多是猜测臆想,见识浅陋还请担当。接下来带领大家看看当年的牛人是有多凶残!!


别跟老夫说什么语言说什么技术,说什么计算机理论,老夫做东西那都是原创的都是独自发明!!!
前期哥都做了啥
我是谁?

我是大名鼎鼎的蒂姆·伯纳斯-邓,我工作在CERN,这是哪呢? 欧洲核子研究组织 。


我要做啥呢?

刚开始我也不知道,反正我在那里工作着工作着,我就发现了可以把 超文本系统 与互联网结合在一起, 具体是干啥呢?就是把超文本系统, 传输控制协议 , 域名系统 给结合起来。


我为啥发现我要做这个呢?

哎,还不是为了那帮不争气的人儿啊?那么的文档,咋才能让大家都共享阅读使用呢?这是个问题!


我要先准备点儿啥呢?
话说我知道一个东西叫 超文本 ,可这些东西都是大家自己写的啊?也没个规范啥的,呃:joy:,这群不省心的人儿啊!不怕,哥无敌啊,于是哥-DD发明了HTML(HyperTextMarkupLunguage)-超文本标记语言,咳咳,你们这群鳖孙往后都用这个标记语言来写你们的文档(一种Markdown的即时感)。不过有点儿low的是哥这是 1.0 的标记不多先凑合用吧啊。
我还有另外一个东西要做呢,就是得把这群鳖孙写的HTML,显示出来给大家看啊?于是呢,DD哥魔性大发有写了个软件来阅读我发明的html(说白了我其实写的是个html阅读器:sunglasses:)。
哎呦哟,我好像还忘了另外一个事儿?我写个html阅读器,然后html问价我咋传输呢?哥哥要的可是超文本系统,可以随意跳转查看的哦!
嗯,定了,DD哥再给这群鳖孙写个服务器端的软件让他们可以从服务器获取html文档,正好可以用到我另一个发明的 uri 。坏了,那怎么招也得来个html文档的传输协议吧?嗯,机智如我这个也不能少,哦了,那个DD哥我在造个传输协议吧,有了就它了 HTTP(HyperTextTransportProtocol) 。哦了,这就彻底ok了!

终于给那群鳖孙搞定了,那我就可以把这个玩意儿给他们用了,妈妈再也不用担心他们看文档费事儿了。(因为得到处找,共享也不方便)


带领大家看看我的第一个website, 是的website我管我发布的那个域名 http://info.cern.ch/ 。哦我还给我的html阅读器取起了名字叫WorldWideWeb, 可惜后来改名了叫Nexus,来再给你们看看他的 源代码 ,不用说谢谢。


哥做了个伟大的决定

我把我发明的所有的东西都无偿开放出来了,为哥 点赞 吧!向 蒂姆·伯纳斯-李 ,脱帽致敬。(提供岗位并不一定伟大的,但创造岗位的一定是伟大的-不准跟哥叫板)


前期哥都是咋做的
哎,创新力爆棚,不要问我为什么就会有这些想法,一句话哥就是厉害。
先说说我是咋做的html阅读吧(现在都叫浏览器了,哎,得持续学习啊)

其实大家看看我的1.0规范会看到里面其实没啥太多的标签,都是基本常用的,比如a, plaintext,title, ul/li, h2等等。我既然要做规范,那我也得让我的阅读器显示是规范的哦了,走起。(以下纯属臆想,如有冒犯,删,图形库代码以skia(blink使用gui2D库)函数名字为例(就像用canvas画图是一样的))


那哥这个阅读器得用GUI编程了,可哥最烦的就是这个了。。。呃好吧,我决定了,我要把我的没个标签长啥样都给定死咯,大小,我定,宽度我定,统统都放进长宽固定的盒子里就像乐高似的,为啥,好实现啊。。。就是。。。厉害


a,标签加个下划线就行了,:sunglasses:可以,这样我只需要调用gui接口的drawText,drawPath就好了,哎,机智
plaintext,就直接drawText就好了,别跟我说什么字体,系统用啥字体我就用啥字体,服不服!还有也别和哥说什么baseline,说什么行高,说什么大小,哎,大小可以说,我都固定就14px吧。 哥用的gui库咋处理,哥都随他,谁让哥这会懒了呢? 都不听,哦了plaintext标签页搞定了, 哦 对了,听说你们想换色,嘿嘿,哥不支持,谁让这是哥写的浏览器呢。

最后再举一个栗子吧,比如ul列表,嗯,这个吗我给你们个前缀图形吧,就圆吧,黑色,不允许再挑了,要不连这个都没有!


最后总结一下啊,就是我看到plaintext标签呢,我就drawText,不序调色,不许换字体,总之啥都不许。然后看到a标签呢?我就drawText,和drawPath就好了,其他都不许,没有事件,没有颜色。。。其他同理

请看1.0版预览图

看到没有我的第一个html阅读器就在这样的思想下完成了,yes! 哎我好想少了点儿啥?我的这些标签的展示顺序是啥啊?呵呵,哥会忘么,自上之下,就行了,yes!呵呵空格统统忽略,哥就是任性。




接下来是我怎么拿到html文档了,我按照http协议像后台服务器发起一个tcp连接,然后把http协议内容发送到后台,后台再把html返回给我,我再解析,遍历html每个标签生成一个标签树,然后在我的浏览器按照1的步骤遍历标签树,画出整个html。 ok。
好了该哥的服务器端了

呃,这个还要说么?要得,哥的浏览器按照我的http协议向我发起tcp连接我收到内容得解析啊,看看请求的是哪个html,然后在文件系统中找到再返回回去就好了。


大功告成

嗯,哥的浏览器,后台服务程序都成功完成了,可以给那帮鳖孙使用了。哎,不对啊,那html文件谁来写呢,呵呵,他们的文档让他们自己写去,前提得用的标记语法!什么嫌我的标记语法太简单了要更多功能,呵呵,哥没时间。


接下来哥发明创造发光发亮的历程啊!!!
第一个普遍可用的使用GUI的网页浏览器是Erwise
接下来是Mosaic浏览器,紧接着是Netscape

这个可以多说几句


这货嫌哥的html标签不够多还添加了几个
他还觉得哥设计的http是无协议,还来了个cookie
更甚至他还来个js,放到浏览器里,方便与用户交互(mmt,哥只是想让大家好好的分享文档啊!!!!,瞎说的,文档也是可以交互的文档啊!)
呃,他还嫌我的协议没有保密性,于是又来了个ssl ie(浏览器的届无耻流氓,很显然,我也没办法)opera, safari, firefox, chrome等等。

web 到底如何改变了我们生活想必大家都有感受


那么这么厉害的netscape,吃瓜群众现在为啥都看不到了呢?请参考 浏览器大战,哥痛心啊
呵呵哥才是朕

鉴于这么多中的浏览器,他们都有自己随意添加的html标签,以及标签样式也有可能实现的不一样。于是哥牵头成立了w3c-万维网联盟,来制定各种标准,你们都得按照哥说的来做ok?


比如html标准,我说有哪些标签就得有哪些,功能是啥样交互是啥样也得听哥的,长啥样么?这个可以交给你们!(当然这不是真的,哥还得考虑各大浏览器厂商的实现,以及一线开发人员的需要)


哎嗨,此时就会有群众问了,我们经常见的css呢?js,cookie是netscape, 那么css呢?

惭愧啊,他们这些鳖孙都嫌我设计的样式不好看,我就想说了,看个文档要啥样式,要啥样式?不过我是大度的,好啊,我给html标签加点儿属性,比如:width, 让你来告诉我我的标签有多夸好吧,mmt的,不对啊,你要是不给我,我还得自己设置宽度,又得自己干了,mmt的。啥这样写不好维护?结构与样式分离? 你咋不上天去呢? 文档还要维护啊?mmt的。(显然我们doctor 李肯定不是我这样,人肯定是开放包容的态度。。。)


此时有人站出来了 , 吃瓜的你们看看去吧

你别说,这玩意儿也还凑活着用。


嘚吧嘚吧的也差不多了,web的历史就是这么一步一步的走过来了。


小总结一下:我觉得web的核心思想还在于李博士创建的初期思想,共享与开放!而不是现在的某鹅或者其他什么的动不动就屏蔽啥的!他有屏蔽的能力并且做了,那就说明他已经在违背的道路上开始行走了,他若是走的越远,那我们的世界就真越窄。


ps: 下面是附带的关于在构建我的第一版浏览器时对css的一些总结。当我开始思考我的浏览器的实现的时候就发现了一些问题诸如元素怎么计算宽度,怎么定位,怎么布局?在联合css一想发现这些属性的存在都是很有道理的。


接下来我想接着上面我的那版粗糙的浏览器实现讲讲css的一些东西
布局,什么是布局,我觉得得是页面的整体框架

我们的1.0版本啥都不支持,其实css中目前也没有哪个具体说就是用来布局的除了grid还有flexbox,这两个对布局来说是利器,可是要是有浏览器兼容性问题的话就惨喽。那么flexbox在我们的版本中如何实现呢?我不知道,得先看看flexbox的规范:innocent:,那么我们以前的布局都用的啥呢?都是再用定位来做布局的工作。


定位

我们看了我的1.0版本中时不支持定位的就是说标签都是一行一个排列的,显然对于想要,左移一点儿右移一点儿的需求就实现不了了。那么我们定位到底咋来呢?按照规范来说就是使用flow算法来的。分为normal flow、float flow 和 absolutely flow。至于具体就得去啃规范了 这里有某人总结的 , 很不错,显然我们若是照着这个算法,咱们的1.0也行啊!!!!


插一个浮动的问题,加入我想让我的1.0实现文字绕着元素周围布局我该怎么做呢?思考一下我发现让他从常规定位中独立出来反而最好实现的了,我可以给他一个特殊标记,就好比float: left, 那么我就知道他要文字绕着他,那我就把他后面的文字绕着他呗,而且他不参与其他元素的属性计算,但是他还占着父元素的布局位置,只是不参与其他属性计算如高度等。很显然我的想法很幼稚,其实可以参考一下规范到底实现算法是咋样的!!! 参见张鑫旭关于float的看法
排版

这里的排版是指文字的排版,比如行间距,行高,我们1.0的版本就不支持你们设置这些东西,因为我们就不解析他们啊哈哈哈。这个要实现就好办了,在drawText的时候把这些属性都加上,但是我们是否应该直接给出行间距这个属性呢?显然现在的css中并没有。而是根据line-height, vertical-align等值计算出来的。那么baseline呢 所有的文本排版的时候得有个纵向的对比啊,大家纵向是不是得和谁对齐啊。等等等,这都在这里了


层叠和继承

我们第一版没有样式可供你调整的,但是有了css就不一样了,有html作者写的样式有我的浏览器自定义的样式,有css的样式,这么多的样式怎么处理呢,于是就有了层叠和权值的概念。我的浏览器可以根据这些来决定用哪个样式。那么还有我我希望我的所有的字体都是12px大小那么,我总不能每一个标签都去设置一边吧,我的浏览器可以实现一个继承的概念,我解读到顶层的font-size后我就设置他的子标签都继承他。


盒式模型

我们的1.0版本在实现时就没考虑这些,我们把宽度,大小统统都定死了。但是我们也可以从这里看到其实我们所有的元素最终都是有个大小的,在我们的版本里,其实我们把所有的元素都放进了相同的盒子,实现省事儿啊!css也是盒式模型的,感觉就和咱们的思想很像所有的元素都放进一个盒子里这样就都是矩形,实现时布局也省事儿啊!只是css的盒子比咱们的有些复杂,他还有margin,padding,border等。但最起码为啥是盒式的我觉得我的理由就很有说服力,好实现,易于理解。


块级元素和行内元素

为啥会有这些区别呢?在我们1.0里那全都是块级的,不也好好的啊,不是的,我们的1.0里两个文本是没办法放在一行的,多尴尬,我写了两个plaintext标签一个是‘我’另一个是‘你’,f**k他俩居然还换行。。。因此行内元素的左右就有了。有些标签我们总是不想让他们换行的。。。


块级元素和行内元素的嵌套问题

行内元素尽量不要嵌套块级元素语义不符合,而且浏览器的处理也不统一。尽量不要。但是块级元素可以嵌套行内和块级元素,并且这里有个知识点,块级元素内要是块级源,要么是一个ifc,显然这是在说要么里面全是块级要么全是行内元素,可事实我们可以两掺啊?为什么呢?因为若是两掺了,w3c规范规定,会为行内元素再生成一个匿名块级元素的。其实想想也可以的,好比让我们的1.0版来实现的话,显然也是按照规范的来走比较简单,当我们解析了块级元素那么他的内部布局就只有2种方式。


BFC和IFC

我们既然有了块级和行内很显然,咱们的1.0版本要想实现他俩,那就意味着我们看到不同标签就应当采用不同的绘制方式,因为我们的块级元素要换行,行内不换行,那我们就对不同的元素采用不同的渲染方式,于是就有了BFC和IFC,但事实也不一定所有的块级元素就会触发BFC,是要满足一定的条件的,在我看来就是我们的渲染方式不止只有BFC和IFC还有一中就是遇到块级元素时默认采取的。


值和单位

在我们的1.0里显然我是自己定义的,可若是用css的话,那么css的单位我们如何转换就又一个问题了,他的1px我们是否就要画1px呢?在pc端好像是的,但是在移动端就不一样了。一说到单位,那么我们的浏览器的画布宽度设置多少呢?是否是和设备宽度一致还是说要大一些,这方面我还有太多实践也就没有啥可说的。其实我们这里是有术语的 viewport 。显然我们的1.0升级时也得考虑这个问题,并且还有单位可不止只有px哦,rem,em,pt等等,我们在实现时又得考虑哪些问题呢?我是蒙了,再说吧!


参考:


css wiki
html wiki
浏览器大战
http wiki
netscape

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台