首页 > 评论 > 关键词 > 前端最新资讯 > 正文

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 中,导致你的选择器失灵。

  • 相关推荐
  • 大家在看
  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • 和平精英SS10赛季手册奖励内容汇总 SS10赛季手册全部内容一览

    和平精英在10月13日上线了SS10赛季的赛季手册,很多玩家还不清楚这次的赛季手册的奖励内容是什么,下面就来为大家详细的介绍一下。

  • RHFITNESS任和参展第38届体博会,诚邀您的莅临

    2020 年 9 月 28 日,第 38 届中国国际体育用品博览会(以下简称“ 2020 体博会”)将在国家会展中心(上海)举行。本届体博会是疫情防控工作进入常态化后国内举办的首场综合性国际体育用品展会,吸引了超过 1000 家企业共聚上海。 RHFITNESS任和品牌将携带旗下多款智能跑步机、走步机,参展本届体博会,为观展人员带来更智能、澎湃的健身体验。升级机型、智能触控……汇聚各类智能特色新品。 RHFITNESS任和品牌定位于中高端家用运动?

  • Chrome正在启用HTTP/3,支持IETF QUIC

    QUIC(Quick UDP Internet Connections)是 Google 推出的一个项目,旨在降低基于 TCP 通讯的 Web 延迟。QUIC 非常类似 TCP+TLS+SPDY ,但是基于 UDP 实现的。它是 HTTP/3 的基础协议。

  • HTC折叠屏智能机设计专利曝光

    ​在规划 5G 智能机产品线的同时,HTC 似乎也在酝酿折叠屏的选项。荷兰科技博客 LetsGoDigital 报道称:2019 年底的时候,该公司在美国申请了一项“可折叠显示设备”的专利申请,并于 2020 年 8 月 20 日正式被世界知识产权组织(WIPO)的数据库所收录。与市面上的同类产品一样,得益于可半开或摊平的灵活铰链设计,该机也能够在智能机 / 平板电脑模式之间进行变换。

  • 长安CS55 PLUS新增车型售9.29万元起:发动机热效率达40%

    9月23日消息,长安汽车官方宣布,旗下紧凑型SUV——CS55 PLUS蓝鲸版新增3款车型,提供手动和自动可选,售价区间为9.29-11.39万元。CS55 PLUS蓝鲸版可以看做是CS75 PLUS的缩小版,

  • Bluehost SSD VPS主机真实详细评测数据

    VPS主机其价格优势相对独立服务器来说是非常有吸引力的,很多站长一般都会将VPS主机作为建站的首选,尤其是外贸行业,站群推广行业。虚拟主机可能在权限方面没有VPS主机高,独立IP配置可能也相对来说比较少,这也导致VPS主机成为了主流的建站空间。那么我们在选择VPS主机时,应该要考虑哪些因素呢?本文针对VPS主机做一个详细的评测,主要选择的产品是Bluehost SSD VPS云主机,下面具体分析。1、价格外贸行业目前压力也比较大,尤?

  • Uber Freight正在进行5亿美元融资

    Uber将向投资者Greenbriar Equity Group LP出售Uber Freight的部分股份,作价达5亿美元。消息人士称,这一交易将在本月完成。资料显示,去年9月份,Uber Freight在芝加哥成立了总部,Uber表示将在该地区每年投资超过 2 亿美元,并雇用数百名员工。(完)

  • 玖富受邀香港银行学会(HKIB)和香港电脑学会(HKCS) 主持网络研讨会

    2020年9月14日,玖富集团受香港银行学会(HKIB)和香港电脑学会(HKCS)邀请,参与主题为“虚拟银行如何在传统银行模式下突围而出”的网络研讨会。玖富集团、玖富国际董事总经理陈颖峰为活动进行全程主持。本次网络研讨会由香港银行学会(HKIB)和香港电脑学会(HKCS)在香港举办,围绕“虚拟银行如何在传统银行模式下突围而出”的主题展开线上研讨,分享了虚拟银行如何在金融科技时代满足客户需求,如何在不断探索的商业模式中保持灵活性?

  • 苹果中国应用商店下架RSS阅读器应用

    据外媒报道,苹果正在从中国区应用商店中下架的两款RSS阅读器应用,分别为Fiery Feeds 和 Reeder ,以遵守旨在阻止非法内容的有关规定。

  • 《自然》子刊发表金斯瑞cPass™ sVNT Kit重要数据

    日前,全球著名科学杂志《自然》子刊Nature Biotechnology上发表了一篇重大技术创新发明论文。该文章领衔通讯作者是美国杜克大学医学院和新加坡国立大学Duke-NUS联合新发传染病研究所主任、全球领先的病毒传染病研究科学家王林发教授。凭借国际领先的蛋白和抗体试剂研发能力,金斯瑞已与王林发教授团队达成全球商业化合作,并从Duke-NUS获得全球独家性商业授权,还为王教授在研究阶段提供了所有重要的试验试剂,论文中对金斯瑞全球

  • HTC 申请可折叠手机专利:外翻版 Moto Razr

    DoNews 9月29日消息(记者 刘文轩)可折叠智能手机似乎有内翻就会有外翻,比如三星的 Galaxy Z Fold 和华为的 Mate X。另一种采用类似翻盖机形态的可折叠智能手机也有了“外翻派”。LetsGoDigital 发现 HTC 在 2019 年底向 WIPO 申请了一款折叠手机专利,今年 8 月正式公开。根据这份专利,HTC 这款折叠机采用类似三星 Galaxy Z Flip 和 Motorola Razr 5G 的翻盖形式,但方向却相反,也就是向外翻折,把原本竖直的屏幕分为两块更小

  • SpaceX、蓝色起源和Dynetics的月球着陆器通过美国宇航局审查

    9月27日消息,据国外媒体报道,美国太空探索技术公司SpaceX、蓝色起源和Dynetics的月球着陆器通过了美国宇航局(NASA)的审查。完成对蓝色起源、Dynetics和SpaceX拟议的月球着陆器的“认证基准审查”,对于人类着陆系统(HLS)和Artemis项目来说是重要的一步。据悉,美国宇航局的Artemis项目旨在2024年前将宇航员送回月球,而月球着陆器是该项目的关键部分,该着陆器将携带两名宇航员(其中一名是女性)前往月球。本周

  • WordPress.com新功能:可将所有博文内容转换为推文

    今年早些时候通过推文风暴(tweetstorms)这种更轻松的方式,WordPress.com 宣布允许用户以“折叠”的方式将多条推文嵌入到博文中。今天 WordPress.com 再推出了双向通道,用户只需要轻松点击几下,就能将现有的 WordPress 博客文章转换为推文风暴。

  • PC党喜迎春天:SSD还要再跌价至少两成

    过去快两年时间,SSD的价格一直在走低,很多用户借此机会用上了大容量固态盘。而根据统计机构TrendForce的最新预测,上述趋势还将延续,至少到圣诞采买季前都会如此。报告称,SSD主要部件闪

    PC
  • 企业想要吸引“回头客”?天威诚信SSL证书为您助力

    众所周知,对于企业来说,用户的个性化体验是其提高客户满意度的关键,但想要成功做到这一点,吸引更多的“回头客”,就必须访问个人数据。近年来,围绕第三方积累和使用个人数据的隐私问题已成为消费者关注的焦点。据Privitar的一项调查结果显示,虽然消费者依旧担心与公司共享个人数据,但企业仍然有机会发挥领导作用,通过保护客户数据来建立品牌忠诚度。调查显示,43%的消费者不知道他们是否曾与受数据泄露影响的企业合作过。?

  • Facebook Messenger迎来全新彩色新图标并增加新功能

    Facebook正在对其Messenger应用进行改造,为该应用引入了一个新的采用多彩渐变色的图标,而不是至今为止使用的简单的蓝色标志。新图标的灵感似乎来自于Instagram的图标,而Instagram的图标也是由Facebook拥有的。

  • PS5的SSD焊死在主板上 坏了就报废?别担心了 很难写死

    索尼PS5、微软XSX两款新一代主机已经发布,价格也基本一致,PS5在性能上这次要输一点,但PS5的SSD性能是个亮点,5.5GB/s的速度比XSX的2.4GB/s高出一倍。然而,大家有了新的担心。这两天天索尼

    PS5
  • Facebook在Instagram和Messenger上推出跨平台信息传递功能

    Facebook在整合旗下各个消息平台方面迈出了迄今为止最大的一步,允许Messenger和Instagram上的部分用户在应用之间互相发消息。除了推出跨平台消息,Instagram还将对其DM系统进行重大改革,将扩展从Messenger中获取的功能。

  • DNF真理的意识之棺超详细攻略 真理的意识之棺boss处理机制

    DNF的希洛克的P2阶段的无形之棺1界中有个真理的意识之棺地下城很多玩家还不清楚怎么打,下面就来为大家分享一下真理的意识之棺地下城中的三个boss处理机制攻略。

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