首页 > 网页教程 > HTML > HTML30年进化史:从前端框架战争到小程序爆发

HTML30年进化史:从前端框架战争到小程序爆发

时间:2019-08-26    作者:司徒正美   来源:CSDN公众号

黑客 代码 安全漏洞 程序员

随着近年来,前端框架战争的白热化,战斗溢出到后端、移动端、小程序端等层面……大家似乎不像以前那么关注底层,HTML、JavaScript、CSS 被一些更高级的语言所转译,成为了前端的汇编语言。

或许在许多年后,培训公司将会教授新人:TypeScript 怎么写,Sass 怎么写,JSX 怎么写,这时可能会出现 jQuery 时代的荒诞问题——jQuery 与JavaScript 哪一个更快?这是一种悲哀,也是时代的进步吧。正如我们开?#37027;?#30528;电脑,不用关心底层的芯片是如何运作的。这是文明建立在极度脆弱的生态下的至高产品。

而我们浏览的复杂页面的底层是 HTML+CSS+JavaScript 构建的,其中HTML 是基础中的基础,但它经常被人所忽视。要不想页面文明轻易湮灭,我们需认真封存这部?#31181;?#35782;,就像亚述人把他们的知识楔入到泥板中一样。

HTML 的前身 SGML

战争驱动文明发展,互联网是美国军队为了快速传送情报而发明的。如果单纯传送文字,当时的电报就可以实现,但显然像地图上的图像信息,电服就不行了。这时候需要一种语言来组织这些文字与影像,最好还能存在交互性。交互虽然不能实时,但总好过没?#23567;?#20110;是学者们找到当时最流行的文档描述语言 SGML。

SGML 是国际上定义电子文档和内容描述的标准。它?#20174;?1969 年 IBM 公司开发的文档描述语言 GML,GML 主要用来解决不同系统中文档格式不同的问题。后经过多年发展,1986 年经 ISO 批准为国?#26102;?#20934; ISO8897,并被称为 SGML。

它有许多 HTML 的特征,如内容与样式分离。在 SGML 中,标记?#33267;?#31181;:一种用来描述文档显示的样式,称为程序标记;另一种用来描述文档中语句的用途,称为描述标记。一个 SGML 文件通常分三个层次:结构、内容和样式。结构为组织文档的元素提供框架,内容是信息本身,样式控制内容的显示。正因为如此,它的使用范围很广,被许多大型公司用来创建和发布信息。诸如布告、?#38469;?#25163;册、章节目录、设计规范、各种信函等,都可以用它来设计描述。

但是 SGML 有致命的缺憾,并且它的优点成为了它的缺点。SGML 设计精良,规范严谨,导致?#20284;?#22797;杂性也高,在军情紧急的情况下,需要快速交换情报,不能慢吞吞写好每个标签,因为当时每秒几个比特的网速也是一个问题。

因此它需要裁减,于是有了HTML。

http://info.cern.ch/ 世界第一个网站,非常简洁。

浏览器大战对 HTML 的影响

当时大家原本要的是一个精简版的 SGML,但最终他们得到的一个完全不同的东西。

这要从解析网页的浏览器?#28783;穡琖eb 之父 Tim Berners Lee 设计的浏览器WorldWidWeb 过于简单,于是让商业浏览器有可乘之机。

在刚开始时,浏览器商还?#21069;?#29031; W3C 的制定的规则,如 Mosia、Netscape,但微软介入之后就发生改变。微软制定自己的浏览器语法与标准,于是导致了?#25945;?#26631;准的出现。

在规划中,HTML 也是一门严谨的语言,是高度有组织性、规范化、模块化。例如,规范化是有一个文档类型声明 DOCTYPE 来指明它怎么解析的。模块化,是说各种标签其实也是有组强性的,几个几个地划分地不同的族群,合起来实现一个功能,最著名的是表单与表格。

但是后来出现了一些意外,一些用来装饰用的标签(s、b、i、u、font)因为 CSS 的出现,被人们诉之败作,渐渐被边缘化与废弃。一些用来模拟 Excel 功能的标签(table、tbody、tr)被人们用来布局,弄得页面难以维护。

在 CSS 标准化时代,又矫枉过正,硬生生地用 DIV 来模拟表格。一些用来实现广告功能的标签,导致会?#26032;?#23631;飘动、不让用户关闭的乱象。在这几个大事故中,许多标签就是被胡乱使用或边缘化。

我个人认为最大原因是 W3C 没能自己开发一个浏览器,一直倚重某一个方,导致造成 HTML 的失控。

HTML 在语法上设计得非常简单易学。

HTML 标签?#21069;?#22312;小括号里面,没有人规定标签名是大写还是小写。开标签中,标签名?#21592;?#26377;一些属性,这些属性的属性值没有人规定它是否能引号,引号是单引号还是双引号,没有规定标签是否一定要闭合。

可能当初是有规定的,但无法遵循。浏览器需要最快地将内容呈现给用户,但当时的网速不太可能,于是浏览器大厂允许用户可以不用闭合标签,不用严格括起属性值,?#26448;?#36305;起页面。这种纵容在当时成了优势,被其他浏览器争相模仿。

?#36865;猓?#36824;有更厉害的传输优化,?#28909;?#39029;面源码是这样的:

<p title='aaa'><input readonly="true" /></p>

实际在 IE6~8 的控制台下看到的源码是这样,通过大写化与对?#32423;?#23646;性的特殊处理,一点点地减少传输内容。

<P title=aaa><INPUT READONLY >

在 Google 早期的首页中,html、head、body 标签是刻意省?#32536;簦?#22240;为它知道浏览器会支持这样残缺的页面。在自然界中,这是不可想象的,残缺的东西会被淘汰。

?#26434;?HTML 的失控,W3C 决定开发另一种标签语言,于是 XML 诞生了。但 XML 出现得太晚了,无力回天。它一直作为数据的传输载体而存在,而不是描绘界面用。它其实是能描绘界面的,两个明证是 SVG 语言,及安卓里面的 XML 模板。

HTML 的版本

HTML 发?#23478;?#26469;,迭代过许多版本,现在是小步快跑的第 5 版,但 HTML5 已经不是 W3C 所规范的了,是由一个浏览器大厂们组成的俱乐部 WHATWG 发布的。

下面是一个简单的?#24223;?#22270;:

  1. 不存在 HTML1.0, 各自为战

  2. HTML2.0,从 1995 年 11 月到 2000 年;

  3. HTML3.2,  从 1996 年 1 月到现在;

  4. HTML4.0,从 1997 年 12 月到现在;

  5. HTML4.01,从 1999 年 12 月到现在;

  6. XHTML 1.0,从 2000 年 1 月 20 日到现在;

  7. HTML5.0,从 2014 年 10 月 29 日到现在。

可以看出几个断层,HTML1.0 还没有准备好时,大家就争先抢后地开始做,于是当时相当地混乱。

早期的浏览器包括了:Tim Berners 的 WorldWideWeb 浏览器,兼具浏览器和编辑器功能,但只能运行在NeXTStep操作系?#25104;?CERN的一位数学实?#21543;?Nicola Pellow 开发出 Line-mode 浏览器,能运行在 UNIX 和 MS-DOS 上;Erwise 是第一个带图形界面的浏览器,支持搜索网页中的单词,由四名芬兰大学生开发,在 1992 年发布;?#21448;?#20271;克利的 Pei-Yuan Wei 在1992 年4 月发布了 ViolaWWW,这个浏览器受到了 Mac 程序 HyperCard 的启发,但他没有 Mac 只能接触到 UNIX 机器,1992 年夏天,斯坦福线性加速器中心物理学家 Tony Johnson 为斯坦福的物理学家发布了图形浏览器 Midas;与?#36865;?#26102;,CERN 的 Nicola Pellow 和 Robert Cailliau 发布了第一个Mac浏览器 Samba;基于 Viola和 Midas 的 Mosaic 在 1993 年发布;堪萨斯大学发布了 Lynx;?#30340;?#23572;大学法学院学生 Tom Bruce 发布了 Cello。——节选自《被遗忘的早期浏览器》

HTML3. 0 时,改了?#25351;模?#37027;时五大浏览器的四个玩家已经全场(IE、Netscape、Opera、Safari),要满足四家的喜好非常?#36873;?#36825;也是目前还在支持的早期标准。

XHTML 是 W3C 最后一次赌博,想用 XML 的规范来修正 HTML 一直以来松散的编写?#38382;劍?#21363;要来闭合的地方必须闭合,属性?#24403;?#39035;要括起来,废弃的标签不能再使用,还要求对 script 标签的内容使用 CDATA 包裹起来,DOCTYPE 变得很长……它们还专门编写一个网站给大家做校正:

https://validator.w3.org/

下面这段 XHTML 标准模式代码,符合 W3C XHTML 语法,能够执行(保存为 itworks.xhtml 文件,用 Firefox 打开):

image.png

俗话说,由俭入奢易,由奢入俭?#36873;?#29992;户不习惯,如果写的页面不合格,浏览器不解析,意味着用户会跑去竞争对?#31181;小?#22240;此这闹剧草草收场了。浏览器商也看到自己的能量所在,把 HTML 的规范制定收归?#31181;小?/p>

HTML的模块介绍

在语义化时代,人家过于关注于单个标签所表示的意思,而忽略了组件是分群体的。只不过有的群体是弱联连,可以混杂其他标签,加之浏览器的自动?#26469;?#21151;能导致人们?#36816;?#20204;的误解。这些群体?#39029;?#20043;为模块。

我稍微归纳一下,当然在 W3C 的 HTML5.2 中它们也有另一套划分。那套划分很奇怪,某一种标签可能归类到多个类别?#23567;?/p>

https://www.w3.org/TR/html52/dom.html#content-models

文?#30340;?#22359;

文?#30340;?#22359;就是<html>、<body>、<head>、<title>这几个标签,我们可以在 document 上访问到它,document.documentElement、document.body、document.head、document.title。它们可以省略不写,浏览器魔术般地补全它们。这些标签只是提供一个框架,告诉人们一些内容性的东西应该放在 body 中,功能性的东西应该放在 head ?#23567;?/p>

功能模块

它是用来设置文档整体的功能或一些元信息,涉及的标签有<link>、<meta>、<base>、<script>与<style>。除了后两个,由于页面功能的膨胀,需要多人协作一个页面,于是出现一个页面存在多个<script>与<style>标签,它们可以分散到其他位置。<link>、<meta>、<base> ?#25216;?#20013;在head 标签内。我也尝试过将 div 放在 head 中, head标签会自动将它赶回body里面。

<link> 标签有两个作用:1. 定义文档与外部资源的关系;2. 是链接样式表。HTML5 新加的预加载,预渲染等功能就在这标签上添加。

<meta> 标签可提供有关页面的元信息(meta-information),?#28909;?#38024;?#36816;?#32034;引擎和更新频度的描述和关键?#30465;?#26368;有用的就是设置页面的字符集。

下面是简书的 meta 标签使用情况,它可以做许多事情,如百度 SEO、360 SEO、移动端的水滴屏设置、缩放设置,还有外国的一些社交网站的设置,需要有一些专门的知识才能玩得转。

image.png

<base>标签为页面上的所有链接规定默认地址或默认目标。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。在 IE6-8 中这标签有一个可怕的 Bug,会将整个页面装进它的 innerHTML 中,导致你的选择器失灵。

相关推荐
能让IE支持HTML5的解决方案
实用HTML标签语法大全
何为微格式? 附实例演示
正确理解XHTML标签的语义 有助适当使用标签
在网页中使用H1标记的须注意的事项
HTML网页的META标签常用写法与功能介绍
正确理解HTML的语义有助于搜索引擎优化
谷歌弃Gears浏览器插件 转重点开发HTML5
HTML的不同标签在SEO优化中的权重分数
采用HTML5搭建的多个网站尝鲜试用
体验HTML5 Canvas对象的强大 五款在线绘图应用示例
HTML语言中alt属性和title属性的作用与区别
HTML5新特性:用链接预取功能给网站提速
HTML标签的语义化概念、意义和实践
如何用HTML5制作网页?
神奇的HTML5动画效果演示网站
重视HTML和CSS中的视觉语义
网?#25104;?#35745;师必收藏的十五个HTML5资源
十三个网站案例让你提前体验HTML5和CSS3的魅力
基于HTML5的绘图程序Muro,支持Wacom手写绘图板
HTML5的一些的趣味小应用
HTML5、CSS和JavaScript与Web移动应用的未来趋势
十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
学好HTML5必备的七个在线资源推荐
HTML5教程之表单功能详解
四个HTML 5标签、属性、事件及浏览器兼容?#36816;?#26597;表分享
15个采用HTML5实现的网站界面设计欣赏
HTML5的革新:语义更明确简洁的结构
21款效果惊艳基于HTML5的应用程序欣赏
16个颇具创意的HTML5网站设计
能让IE浏览器也支持HTML5标准的办法
25个超炫的HTML5+CSS3网页应用案例欣赏
2012年Web开发有关HTML5的14个预测
新手入门:HTML5是什么?
35个WEB开发必备的实用HTML5教程
10个web开发常用的HTML虚拟Dummy内容生成器推荐

精彩推荐

热门教程

忍者法宝试玩