Code前端首页关于Code前端联系我们
首页 后端开发数据结构与算法正文

HTML是怎么来的以及CSS的诞生和版本

terry 2年前 (2023-09-27) 阅读数 70 #数据结构与算法

HTML的诞生

HTML是怎么来的？

1982 年，万维网的发明者 Tim Berners-Lee 爵士创建了 HTML（超文本标记语言），以促进世界各地物理学家之间的协作和信息共享。

1991 年 3 月，Tim Berners-Lee 向他在 CERN（欧洲核研究组织）工作的朋友介绍了 HTML，当时网络浏览器正被世界各地的成员使用。世界浏览CERN 的巨大电话簿。

八年后，1990年，博士发明了世界上第一个浏览器万维网，推动了互联网的快速发展。

WorldWideWeb出现后，NCSA于1993年推出了Mosaic浏览器并迅速流行起来。它成为第一个世界级的应用浏览器，推动了互联网的发展。然后就是当时的两大王牌：NetscapeNetscape 浏览器和MicroSoft 的 Internet Explorer 浏览器。这两款浏览器在当时引发了一场互联网浏览器大战。大战。这场战争的结果是Internet Explorer彻底获胜。但也极大的推动了互联网的发展。

#CSS 的诞生

CSS 是如何产生的？

20世纪90年代，随着HTML的浏览器迅速发展，CSS（层叠样式表）也随之出现。不同的浏览器结合自己的HTML语法结构实现了许多不同的外部样式语法。但随着HTML的发展，增加了很多显示功能来满足设计者的需求。随着这些功能的增加，外部样式语法的作用变得越来越没有意义。

1994年10月10日，CSS之父Håkon Wium Lie在芝加哥的一次会议上介绍了最初的CSS，并正式提出了CSS用于HTML样式。

1996年12月，W3C经过多次讨论，推出了CSS1.0。这个规范一出现就引起了各方的关注，随后MicroSoft和Netscape都宣称他们的浏览器可以支持CSS1.0。

#CSS版本

CSS各个版本的更新

  1. CSS1.0由W3C于1997年发布。第一个版本主要指定了-选择器、风格特征、伪类/对象几个大部件；
  2. CSS2.0/2.1于1998年由W3C发布，CSS2规范是在CSS1的基础上设计的，扩展和改进了许多更强大的功能。包括 选择器 、 位置模型 、 布局 、 桌子样式 、 媒体类型 、 伪类、光标样式；
  3. 由于CSS2，花了9年时间（从2002年8月到2011年6月）才达到推荐状态。为了加快已确认没有问题的功能的标准化，W3C 此后做出了一项名为“北京主义”的决定，根据每个模块的进度对 CSS 进行模块化和标准化。从形式上来说，CSS3 已不复存在。现在CSS在完整的模块中包含了修订后的CSS2.1及其扩展，但模块中的级别数量不一致。 CSS 标准的快照可以随时定义。

下图展示了CSS模块化的发展过程，来自MDNHTML怎么来的及CSS的诞生和版本

#几乎成了CSS的语言

现在的CSS也是经过一番战斗才出现的

以下内容翻译自几乎成为CSS的语言

#第一个提案

是在1993年，在Mosaic浏览器1.0发布之前，当时现有的浏览器开始独立处理 HTML，但他们没有办法自定义标签的样式，这意味着你看到的标签就是它的样子，无法更改。

因此在 1993 年 6 月，Robert Raisch 向 www-talk 发送了一封电子邮件，建议创建“一个可以与 Web 文档一起交付的易于解析的样式表”。消息格式”，并称之为RRP。

格式如下：

@BODY fo(fa=he,si=18)

使用上面的代码是可以理解的在gzipping之前的时代，网络传输速度只有14.4K，所以尽可能压缩格式是合理的，这个特殊的规则是为了保护字体家族（fa） 至 helvetica (he) 和 字体大小 (si) 至 18 点 。 #Viola 和原始浏览器战争

与普遍看法相反，人们认为Mosaic不是第一个图形浏览器，而是ViolaWWW。由 Pei-Yuan Wei 在 4 天之内写成。

以下是Pei 创建的样式表语言- Yuan Wei : 

(BODY fontSize=normal
      BGColor=white
      FGColor=black
  (H1   fontSize=largest
        BGColor=red
        FGColor=white)
)

在这个例子中，我们为body添加了颜色选择器，并为body添加了颜色选择器为h1添加了样式在

值得一提的是，PWP还提出了引用外部样式表的方法，并且他提出的方法至今仍在使用。 

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">

不幸的是，ViolaWWW只能运行X Window系统，该系统只在Unix上流行。当Mosaic移植到Windows时，它很快就落后于ViolaWWW。

#Web 之前的样式表

早在互联网出现之前，就存在更改文档样式的语言要求。

您可能知道，HTML源自互联网出现之前就存在的一种语言，SGML。早在1987年，美国国防部就决定调查SGML是否可以使文档的存储和传输变得更加容易。他们有大量文件需要处理。就像任何优秀的政府项目一样，他们没有时间浪费时间想出一个名字。该团队最初被称为计算机辅助后勤支持小组，后来被称为计算机辅助采办和后勤支持小组，最后被称为持续采办和生命周期支持计划。不管怎样，缩写是CALS。

CALS为SGML创建了一个名为FOSI的程序（这是一个四个字母的缩写，但由于年龄的原因我不记得它是哪四个单词）语言来格式化文档。示例如下： 

<outspec>
  <docdesc>
    <charlist>
      <font size="12pt" bckcol="white" fontcol="black">
    </charlist>
  </docdesc>
  <e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
  <e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
  <e-i-c gi="a"><font fgcol="red"></e-i-c>
  <e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
</outspec>

如果您对docdesc或charlist感到困惑，那么您应该知道www-talk的成员就像像你一样困惑。唯一提供上下文信息的是e-i-c，即上下文中的元素。 FOSI值得注意的是，em作为字体单位引入，现在已经成为很多熟悉CSS的人最流行的方法。

#图灵完备的样式表

由于其复杂性，FOSI 被认为是文档格式问题的解决方法。长期的解决方案是创建一种基于函数式编程语言Scheme的新语言，它可以执行您可以想象的任何文档转换。这种语言称为 DSSSL。

语法如下： 

(element H1
  (make paragraph
    font-size: 14pt
    font-weight: 'bold'))

由于它是一种编程语言，因此您可以创建以下功能： 

(define (create-heading heading-font-size)
  (make paragraph
    font-size: heading-font-size
    font-weight: 'bold))

(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))

并在样式中使用数学结构，例如“条带化”表格的行： 

(element TR
  (if (= (modulo (child-number) 2)
        0)
    …   ;even-row
    …)) ;odd-row

最后，只是为了让你嫉妒，DSSSL 可以把继承的值当作数学运算的变量： 

(element H1
  (make paragraph
    font-size: (+ 4pt (inherited-font-size))))

不幸的是，DSSSL 和所有 Scheme 类语言有同样致命的弱点：括号太多。此外，当它最终发布时，它可能会过于完整并关闭浏览器开发人员。 DSSSL 规范包含 210 多个可以设置样式的独立属性。

#为什么样式表脱颖而出？

CSS 没有父选择器（一种根据子元素样式格式化父元素的方法）。 Stack Overflow 上经常有人问这个问题（这是其中之一）。但事实证明，这个功能缺失是有原因的。特别是在互联网的早期，在网页完全加载之前渲染网页非常重要。这意味着大家都希望加载的部分能够在HTML加载之前渲染出来。

父选择器意味着样式必须在 HTML 文档加载时更新。如果像 DSSSL 这样的语言实现了此功能，它们不太可能没有用处，因为它们可以处理文档。

1995年3月，Bert Bos是第一个提出这个问题并提供可行解决方案的人。他的提案还包括一个早期的笑脸表情符号:-)。

这种语言在某种程度上是面向对象的：

*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A

使用.来指定直接子节点，并使用*来指定祖先节点。

他的语言还有一个很酷的功能，它在样式表中定义了一个超链接，如下所示：

*A.anchor: !HREF

在上面的示例中，他指定link的目标是HREF。 的值。这种类型的行为允许您控制链接等元素，在许多提案中都很流行。在Javascript出现之前，没有方法来检查元素，所以它们看起来很合理。

功能性提案，由一位名叫C.M.的绅士于1994年提出。 Sperberg-McQueen，表现出类似的行为。 

(style a
  (block #f)     ; format as inline phrase
  (color blue)   ; in blue if you’ve got it
  (click (follow (attval 'href)))  ; and on click, follow url

他的语言还引入了关键字 content 作为管理样式表中 HTML 元素内容的方法，这个概念后来在 CSS 2.1 中引入 中。

#还能有什么

在我讨论真正成为 CSS 的语言之前，还有另一种语言值得一提，因为它是早期 Web 开发人员的梦想。

是PSL96。按照当年的命名约定，1996年版的演示规范语言。从本质上讲，PSL 很像 CSS：

H1 {
  fontSize: 20;
}

不过，事情很快就会变得有趣。例如，您不仅可以根据元素的宽度来显示元素的位置，还可以根据浏览器的实际宽度来显示元素的位置。 

LI {
  VertPos: Top = LeftSib . Actual Bottom;
}

您甚至可以使用元素的左兄弟来自定义它。

您还可以向样式添加逻辑表达式。例如，如果您仅使用 href 来设置锚元素的样式： 

A {
  if (getAttribute(self, "href") != "") then
    fgColor = "blue";
    underlineNumber = 1;
  endif
}

这种样式可以扩展到我们今天使用样式的多种内容： 

LI {
  if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
    VertPos: Top = Parent.Top;
    HorizPos: Left = LeftSib.Left + Self.Width;
  else
    VertPos: Top = LeftSib.Actual Bottom;
    HorizPos: Left = LeftSib.Left;
  endif
}

如果支持此功能，则分离内容和样式的梦想可以成为现实。 。不幸的是，该语言的可扩展性太强，因此如果没有浏览器，实现可能会有所不同。此外，它以一系列文章的形式出现在学术界，并且没有在 www-talk 邮件列表中进行讨论，因此它永远不会出现在常规浏览器中。

#CSSSoul

至少在名称上，一种语言直接通向CSS。它称为 CHSS（层叠 HTML 样式表），于 1994 年提出。由 Håkon W Lie 提出。

像许多好主意一样，这个最初的提议是疯狂的。 

h1.font.size = 24pt 100%
h2.font.size = 20pt 40%

注意行尾的百分比。这个百分比指的是当前样式表所占据的值的“权重”。例如，如果之前的样式表将 h2 字体大小定义为 30pt，粗细为 60%，而此样式表将 h2s 设置为 20px 40%，则这两个值将根据其粗细百分比进行组合，即26点。

显然，这个建议是在基于文档的HTML页面时代提出的，基于滑块的设计在我们面向应用的世界中行不通。然而，基本思想是样式表应该是可堆叠的。换句话说，应该可以将多个样式表应用到同一页面。

原始形状被认为很重要，因为它让用户可以控制他们所看到的内容。该页面有一个样式表，并且 Web 用户有自己的样式表，并且这两个样式表一起出现在页面上。支持多个样式表被视为在网络上保留个人自由的一种方式，而不是支持开发人员（他们仍然手动编写单独的 HTML 页面）的方式。

用户可以控制本页面作者对建议的权重，以及提案中的ASCII图表。 

       User                   Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

与许多这些提案一样，它包含了几十年来 CSS 中无法实现的功能。例如，您可以根据用户环境编写逻辑表达式。 

AGE > 3d ? background.color = pale_yellow : background.color = white
DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style

在乐观的未来场景中，浏览器将允许根据与您的相关性以更大的尺寸向您显示特定的内容。 

RELEVANCE > 80 ? h1.font.size *= 1.5

#你知道后来发生了什么

håkon Lie继续简化他的提案，与bert Bos合作并于1996年11月发布了css第一版规格的。最终他在他的博士论文中写下了CSS的创作，也正是这篇论文帮助我写了这篇文章。

与许多其他提案相比，CSS 的一个显着事实是它的简单性。它易于分析、易于编写、易于阅读。与互联网历史上的许多其他例子一样，它需要初学者最容易学习的技术，而不是更强大的专业人士的技术。

它本身就提醒我们，这是一次偶然发生的创新。例如，仅添加了对上下文选择器的支持（body ol li），因为Netscape已经有一种方法可以从超链接图像中删除边框，并且似乎有必要实现流行浏览器的所有内容可以做。此功能本身显着减慢了 CSS 的实现速度，因为大多数浏览器在解析 HTML 时不会维护标签“堆栈”。这意味着必须重新设计解析器才能完全支持CSS。

诸如此类的挑战（以及广泛使用非标准 HTML 标签来定义样式）意味着 CSS 直到 1997 年才可用，并且直到 2000 年 3 月才有浏览器完全支持它。正如任何开发人员都会告诉您的那样，浏览器直到最近几年才真正实现标准化，即 CSS 首次发布 21 年后。

#FinalBOSS

IE 3以其（有点令人毛骨悚然的）CSS支持而闻名。为了竞争，Netscape 4也考虑了CSS。但我们决定通过将 CSS 转换为 JavaScript 并运行它来实现这一点，而不是第三种（想想 HTML 和 JavaScript）。此外，Web 开发人员应该能够访问这种中间语言“JavaScript 样式表”。

语法是直接使用JavaScript，然后添加一些特定于样式的API：

tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
  color = "green";
}

classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"

你甚至可以定义一个函数，每次遇到标签时都会执行一次：

evaluate_style() {
  if (color == "red"){
    fontStyle = "italic";
  } else {
    fontWeight = "bold";
  }
}

tag.UL.apply = evaluate_style();

我们应该简化样式 脚本与脚本之间划线的想法是合理的，现在 React 社区中也冒出了几个类似的想法。

当时，JavaScript本身就是一门非常新的语言，但是通过逆向工程，IE在IE3中添加了对它的支持（如“ JScript”）。更大的问题是社区已经围绕 CSS 联合起来，而 Netscape 目前被大多数默认社区视为恶霸。当 Netscape 向标准委员会提交 JSSS 时，它却被置若罔闻。三年后，Netscape 6 停止支持 JSSS，准备消亡。

#还有什么可能

由于 W3C 的公开羞辱，IE 5.5于 2000 年推出，几乎完全支持 CSS1。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：纯CSS实现表单验证，用到Level 4 选择器新属性：invalid 下一篇：灵活的CSS布局：高级界面的介绍砖
相关文章
terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白