站长之家首页 > 评论 > 前端最新资讯 > 正文

HTML 30 年进化史

2019-08-26 08:36 · 稿源:CSDN公众号

黑客 代码 安全漏洞 程序员

声明:本文来自于微信公众号CSDN(ID:CSDNnews),作者: 司徒正美,授权站长之家转载发布。

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

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

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

HTML 的前身 SGML

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

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

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

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

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

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

浏览器大战对 HTML 的影响

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

这要从解析网页的浏览器说起,Web 之父 Tim Berners Lee 设计的浏览器WorldWidWeb 过于简单,于是让商业浏览器有可乘之机。

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

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

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

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

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

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

HTML 标签是包在小括号里面,没有人规定标签名是大写还是小写。开标签中,标签名旁边有一些属性,这些属性的属性值没有人规定它是否能引号,引号是单引号还是双引号,没有规定标签是否一定要闭合。

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

此外,还有更厉害的传输优化,比如页面源码是这样的:

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

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

<P title=aaa><INPUT READONLY >

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

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

HTML 的版本

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

下面是一个简单的路线图:

  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操作系统上;CERN的一位数学实习生 Nicola Pellow 开发出 Line-mode 浏览器,能运行在 UNIX 和 MS-DOS 上;Erwise 是第一个带图形界面的浏览器,支持搜索网页中的单词,由四名芬兰大学生开发,在 1992 年发布;加州伯克利的 Pei-Yuan Wei 在1992 年4 月发布了 ViolaWWW,这个浏览器受到了 Mac 程序 HyperCard 的启发,但他没有 Mac 只能接触到 UNIX 机器,1992 年夏天,斯坦福线性加速器中心物理学家 Tony Johnson 为斯坦福的物理学家发布了图形浏览器 Midas;与此同时,CERN 的 Nicola Pellow 和 Robert Cailliau 发布了第一个Mac浏览器 Samba;基于 Viola和 Midas 的 Mosaic 在 1993 年发布;堪萨斯大学发布了 Lynx;康奈尔大学法学院学生 Tom Bruce 发布了 Cello。——节选自《被遗忘的早期浏览器》

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

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

https://validator.w3.org/

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

image.png

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

HTML的模块介绍

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

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

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

文档模块

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

功能模块

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

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

<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。最有用的就是设置页面的字符集。

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

image.png

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

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

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

  • 大家在看
  • 相关推荐
  • 前端聊天视频云端手游托管 多多云小程序升级日常

    因为手游而耽误事在这几年时有发生,马上就要开展的一波团战时,女朋友打来了微信语音;约好的七点团队副本,却又想看准时更新的番剧。一幕幕谁生谁死的选择题让玩家们犯难。老话说得好:“一心不能二用”,手机也是一样,就算再大的内存,再好的CPU,能开再多的后台,也需要人来进行操作,尤其是对有着不断操作需求的手游而言。你可以在团战前快速切换应用回一句在忙,或者爽快的挂掉电话带领队友一波推塔;也可以和团长告假今天身?

  • 前端泛观察”自媒体权重排名,做自媒体怎么从零开始?

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。前端泛观察是当前百家号中的普通号,目前账号百家号权重为2,综合排名位列113560名,娱乐分类排名位列25476名,领先了89.8%的百家号。 前端泛观察百家号概况 前端泛观察的简介为分享全球最新创意,酷玩最黑科技,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过14篇的游戏内容,最近该

  • 从 .NET 到 JavaScript —— 纯前端报表控件 ActiveReportsJS焕新登场

    如今,一款优秀的报表工具,除了可以满足开发人员在不同的业务场景中,设计复杂结构报表和交互式报表的需求,还可以让开发人员将最大精力和时间投入到数据汇总、决策分析以及系统的UI表现层面。葡萄城的 ActiveReports 报表,正是这些优秀的报表工具之一。作为一款专注于 .NET 平台的报表开发控件,ActiveReports已经为全球超过 300,000 名开发者提供全面的报表解决方案。“经过二十余年发展历程,以及无数次版本更新迭代, Activ

  • 走在前端的精灵娱乐百家号最新权重排名-自媒体快速入门转正赚钱

    走在前端的精灵是当前百家号中的普通号,目前账号百家号权重为2,综合排名位列611249名,娱乐分类排名位列160587名,领先了45.0%的百家号。 走在前端的精灵百家号概况 走在前端的精灵的简介为分享精彩资讯,快乐每一天,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过27篇的游戏内容,最近该作者创作的文章中暂无热点词。 站长之家百家号传媒平台对走在前端的精灵的运营数据估算如下: 预估总阅

  • “翡翠教育南昌前端校区”百家号科技领域排行-百家号收益分析如何赚钱?

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。翡翠教育南昌前端校区是当前百家号中的普通号,目前账号百家号权重为2,综合排名位列780614名,科技分类排名位列36870名,领先了29.8%的百家号。 翡翠教育南昌前端校区百家号概况 翡翠教育南昌前端校区的简介为专注互联网技术人才培养,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超?

  • 时代驱动下的海尔开利,提供从前端到后端的一体化解决方案

    11 月 7 日,第 21 届中国零售业博览会(CHINASHOP 2019)在青岛世界博览城开幕。本次展会由中国连锁经营协会(CCFA)与北京智合联创展览公司主办,汇聚了中国零售连锁百强企业、国内外优秀设施设备、IT技术龙头企业、国内外知名快消品企业、海外商品以及地方特色商品企业,共同探索零售业新趋势,见证行业智慧与创新,助力行业新发展。海尔开利一站式冷链解决方案 值得关注的是,由海尔集团和美国开利公司于 2001 年共同出资组建的青?

  • SEO人员,需要HTML版本网站地图4个理由

    如果你长期运营一个独立网站,你会发现草根SEO人员,经常是在利用碎片化时间去更新站点内容,相对于一个独立博客而言,他的站内信息流动实际上是相对“混乱”的。

  • 助力智能听觉 声加科技携全场景语音前端拾音解决方案亮相深圳国际音响展

    9 月 20 日- 22 日,由深圳市音响行业协会主办、声学楼论坛支持的“2019 深圳国际音响展暨音频技术产业链展 &深圳国际声频技术研讨会暨声学楼十四周年年会”在深圳市会展中心隆重举办。本次大会汇聚中国/深圳电子音箱行业领袖、国内外知名高校院所教授博导、相关企业CEO及技术工程师、产业上下游厂商和上千名参展观众,共话声学领域的行业盛会。 其中,来自中科院声学所、专注于智能听觉领域的创新公司——声加科技,携其麦克风拾

  • CSS 2019腾讯安全探索论坛 (TSec) “突破奖”出炉

    7月31日,第五届互联网安全领袖峰会(简称CSS 2019)腾讯安全探索论坛(TSec)在京举办,八组演讲嘉宾接连登场,就时下热门的研究领域带来前沿技术分享。经过现场大众评委评审以及组委会的核对,本届TSec获奖议题正式揭晓。绿盟科技天机实验室负责人张云海凭借《Sorry, It is Not Your Page》议题摘取“突破奖”。在议题中,张云海首度揭秘了一种新型Windows内核漏洞——物理页面混淆(PPC),详细剖析其技术原理、攻击模型以及具?

  • CSS 2019腾讯安全探索论坛(TSec)“突破奖”出炉

    7月30日在北京国际饭店,迎来了备受网安圈关注的第五届互联网安全领袖峰会(简称CSS 2019)。作为峰会的主题特色论坛之一,本届腾讯安全探索论坛(TSec)以“前沿科技、尖端对抗”为主题,吸引了数学工程与先进计算国家重点实验室、清华大学、绿盟科技等产学研大咖,联袂首发诸多前沿信息安全议题,探讨全球信息安全领域前沿技术、研究成果及未来趋势。在致辞中,腾讯安全玄武实验室负责人于旸(TK教主)表示,希望以此次腾讯年度?

  • 四大关键词揭秘腾讯年度最重磅安全峰会CSS 2019

    7 月 30 日- 31 日,第五届互联网安全领袖峰会(Cyber Security Summit,简称CSS 2019)将于北京国际饭店召开。每届CSS峰会都会携手国内外企业领袖、安全大咖就当下前沿安全议题展开探讨,共商安全发展新机遇。今年,以“产业升级,安全升维”为主题的CSS2019 集结了哪些顶尖安全大咖?将围绕哪些领域的安全议题展开探讨?又将向产业释放出哪些强烈的指引信号?四大关键词带你揭秘腾讯年度最重磅安全峰会!关键词一:产业互联网要论

  • CSS 2019聚焦政企安全管理,腾讯安全打造一体化智能安全管理平台

    7月31日上午,腾讯年度最重磅安全峰会——第五届互联网安全领袖峰会(Cyber Security Summit,简称CSS)大中型政企通用安全专场在北京举行。围绕“企业数字化转型,网络安全先行”的主题,中国信息通信研究院(以下简称“中国信通院”)安全研究所所长魏亮,腾讯安全副总裁方斌,腾讯安全副总裁、无线安全产品部负责人吴宇,腾讯企业IT部安全运营中心总监蔡晨等嘉宾出席,共同分享产业数字化转型下政府企业的安全发展趋势和建设成?

  • 腾讯开放安全中台能力,与滴滴共建“互联网安全联合实验室”|CSS 2019

    在第五届互联网安全领袖峰会(CSS 2019)上,腾讯副总裁丁珂表示,腾讯要做产业互联网安全战略官,开放安全中台能力,降低企业客户的安全建设门槛。

  • IDC安全研究副总裁亮相CSS2019:数字经济将带动安全产业规模化发展

    一连两天的第五届互联网安全领袖峰会(Cyber Security Summit,简称CSS2019)在北京召开。此次大会以“产业升级,安全升维”为主题,结合产业互联网背景,聚焦前沿安全议题,邀请国内外安全专家及安全领袖,共同探讨新环境下的安全之道。IDC安全战略副总裁Pete Lindstrom基于数据视角,在主题演讲中分享了对安全行业的洞察和趋势预测,为企业的数字化转型提供了参考和指引。Pete Lindstrom在演讲中指出,随着数字化升级不断推进,全?

  • 听说,亚马逊CTO Werner Vogels将出席CSS 2019

    以云服务为代表的产业互联网引领了数字化升级的浪潮。全球领先的科技企业腾讯、亚马逊将在今年 7 月30- 31 日聚首第五届互联网安全领袖峰会(Cyber Security Summit 2019,简称CSS2019),探讨全球云安全新趋势。CSS最新议程披露,亚马逊副总裁和首席技术官Werner Vogels将出席今年CSS并进行主题演讲。Werner Vogels还将与腾讯公司云与智慧产业总裁汤道生展开对话,分享护航产业互联网“安全”升级的全球经验。亚马逊CTO来华分享全球

  • 腾讯最重磅安全峰会即将举行,CSS 2019展现产业安全新趋势

    第五届互联网安全领袖峰会(Cyber Security Summit,简称CSS 2019)将于 7 月 30 日- 31 日在北京召开,本届CSS以“产业升级,安全升维”为主题,探讨数字化升级过程中安全在各行业领域的最佳实践,解码产业互联网时代的安全之道。科技创新带来生产内容和生产模式的本质变化,每一次技术创新的应用,都对安全提出更高的要求。进入产业互联网后,再没有企业或机构主体置身于安全之外谈发展,安全升维为企业核心竞争力之一。在零售业?

  • CSS 2019召唤安全新锐力量,Future Power 50解读安全创投趋势

    近年来,随着信息安全市场的不断增长,众多新型网络安全企业如雨后春笋般蓬勃发展,他们是Future,拥有首屈一指的技术创新力,令人耳目一新的商业模式和未来广阔的蓝海市场;他们是Power,精耕复杂细分的网络安全领域和多元化的场景需求,手握业界典范的用户实例,推动我国网络安全产业的发展。7 月 31 日,第五届互联网安全领袖峰会将以“行业新担当,聚力赢未来”为主题,举办Future Power50 安全新锐力量专场(简称FP50),聚集

  • 腾讯年度最重磅安全峰会来袭,CSS七大专场带来产业安全最佳实践分享

    以“产业升级,安全升维”为主题的第五届互联网安全领袖峰会(Cyber Security Summit,简称CSS2019)将于 7 月 30 日至 31 日在北京举行。作为腾讯年度最重磅的安全峰会,CSS2019 将覆盖金融、交通、政企等不同产业领域,设置七大专场,基于安全实践案例,为产业互联网下的行业发展提供更多新思路。作为CSS的主办方,腾讯安全在拥抱产业互联网的实践过程中,面对新业务场景的安全挑战,为不同领域客户提供安全解决方案,助力企业构

  • 17家上市企业亮相CSS 2019 P17安全领袖圆桌,探讨产业安全新机遇

    第五届互联网安全领袖峰会(Cyber Security Summit 2019,简称CSS 2019) P17 安全领袖圆桌将于 7 月 29 日在北京举行,以“产业互联网安全新生态“为主题,共同探讨产业互联网背景下的安全新趋势与应对策略,为产业安全指明方向。此外,P17 还将联合出品《中国产业互联网安全发展研究报告》,解读企业数字化升级下安全新价值与新挑战,合力应对产业互联网时代的安全课题。CSS最新议程披露,基于过去两年生态共建的积累,此次P17 将?

  • 前端开发 20 年变迁史

    1990 年,第一个Web浏览器诞生,而WWW的诞生直接拉开前端史的序幕。从静态页面到JavaScript,从依赖后端到自主开发,前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高,从前端技术由国外开发者主导到如今国内自主产生的小程序技术,我们走了 20 年。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议