人人都能看懂的全栈开发教程——HTML 的发展

人人都能看懂的全栈开发教程——HTML 的发展

Chris Yue No Comment
Posts

前面引出了 HTML 这个技能,大家也应该能对 HTML 具体是什么,有了一点『画面感』。现在说说在我从业这几十年,我所接触的 HTML 的变化历程。

我正式从业是 2007 年春夏季,但我接触 HTML 应当还要再早两年。可能很多年轻的读者不知道,那个时候没有现在这么多浏览器可以选择,基本上中国大陆 99% 的电脑操作系统都是 Windows XP,而浏览器都是 IE6。我那个年代自学编程,是去图书馆借书学。印象当中那个时候的教材,都没有一个会专门强调 HTML 的标准化和语义化,只告诉你各种标签怎么用。在这先说明一下,本教程不会跟大家挨个介绍各个 HTML 标签的语义和使用方式,我认为这些知识,都属于是参考书来负责告诉你的。这里我先推荐一个网站叫 MDN,是 Mozilla 也就是火狐的公司创建的一个供开发人员参考的网站。如果你通过我,对 HTML 有了点感知,那么你就可以开始通过 MDN,了解每个标签。

说到此,分享几个我认为对读者有帮助的学习意见:

  1. 强迫自己看英文资料和文档,毕竟好多第一手资料都是英文,习惯了会受益匪浅
  2. 看英文有困难的话,多将注意力集中在例子上
  3. 尽量看官方的文档,其他渠道的文档可能会过时,或者传达的意思不准确

说回十多年的那段时光,那个时候即使是教材,也是将 HTML 作为一个可以在网页上显示东西的一种语言来教的。这倒不能怪这些教材,前一篇我有说过,HTML 的作用是传递信息,长什么样子它是不管的。但当时 HTML4 不仅是用来传递信息,显示方面的工作它也管,比如下面纯配置显示的标签,可用来改变字体的颜色:

<font color="red">红色的字</font>

虽然那个时候,已经有专门用于修改样式的 CSS 技术,但使用 HTML 来管理样式,依然是一种很流行的做法,记得当时我最喜欢的一个网站,暴雪娱乐的官网及旗下魔兽争霸,星际争霸以及暗黑破坏神子网站,就是使用 table 来给网站布局的。这里要解释一下,HTML 里的 table 标签及其相关标签,是用来标识其内容为表格内容的,比如课程表就很适合使用 table,而当时的工程师觉得 table 用来给网页布局也很方便,能很轻松作出两列布局,三列布局,所以基本上大家都这么做。

另外一方面,大家估计猜也能知道,HTML 标签就好象一个装东西的容器,应当是需要闭合的(有一些不是『容器』的标签不用,后面再说)。而当时 IE6 可能觉得,将 HTML 的内容显示出来最重要,写的内容标准与否没太大关系,所以 IE6 对非标准的 HTML 写法非常的『包容』。之前我们在写列表的时候,使用了

<ul>
  <li>列表第一项</li>
  <li>列表第二项</li>
</ul>

的方式来标识列表,注意我们用了 <li> 来包裹任务的文字内容,但在『那个年代』,经常都不被闭合:

<ul>
  <li>列表第一项
  <li>列表第二项
</ul>

给人的感觉就好象是,<li> 只是代表了那个小黑点一样,是用来展示的。

同样的还有表示段落的 <p> 标签,以前大家也习惯不闭合,好像 <p> 就是用来表示折行似地。

HTML 将负责传达信息的代码和负责传达显示的代码纠缠在一块儿,一个最大的问题是,如果网页内容并没有变化,只是想把样式改改,那你得把表示内容的代码一块儿都得改了,当这样的代码数量到了一定量级,别说改了,看都很困难。

当一个事物明明大家都知道它有问题却还在用,那一定是没有找到更方便好用的替代方案,的确,那个时候的 CSS2 虽然也可以很好得控制页面的展示,但依然有一些问题和不方便之处,当然这也不能完全怪 CSS2,这根 IE6 本身也有很大的关系。

还记得前面说用 table 来布局当时很流行吗?当时并不是没有 CSS2,而是因为 IE6 对 CSS2 的支持,有太多的 bug。这里具体不说什么 bug,我相信大家可能也没有这么大兴趣,总之,不仅仅是布局方面,IE 渲染出来的效果总是跟 CSS2 所描述的效果有差异。但用 table 的确是一个问题最少的布局方案。

大概是在 2005 年的时候,我也不知道为什么火狐浏览器一下就火起来了,总之火狐对 CSS 的支持比 IE 要好一些,不过毕竟两家浏览器最终显示效果不一样,就得做兼容,毕竟火狐再牛,IE6 的用户依然占了大部分,不可能放弃他们。我还记得当时的各种 hack 来解决多家浏览器的兼容问题,甚至是当时面试的考点(除了火狐之外,还要兼容 Opera 这个一直都很冷门的浏览器,但实际上 Opera 对 CSS2 实现得真是挺好的)…… 说真的,现在真的要感谢哪些除 IE 外其他所有浏览器积极拥抱标准化,以及移动网络加速了标准化的进程,现在 HTML5 + CSS3 做网站真的是比以前幸福太多。

就拿布局来说,现在回想起来,即使是后来流行过很长一段时间的使用 float 来布局,现在我回想起来都觉得只是 hack,因为 float 这个样式原意是设置文字漂浮在图片旁边那种样式,估计好多读者在书上都见过这种样式。如果要改变样式,比如修改显示的顺序,不动 HTML 代码是不可能实现的。而现在有了 flex 和 grid,那才是真的随心所欲修改,起码是布局上真正将 HTML 和 CSS 的职责标识清楚了。

刚才说到很多话题,其实都跟 CSS 有关,这没办法,本来 HTML 和 CSS 就是一对亲密无间好基友。

在 IE6 那个年代,因为写不合法的 HTML 的行为太普遍了,为了纠正这种行为,W3C 出了 XHTML 协议,并且建议 HTML 只负责内容,让 CSS 负责样式;另外也感谢当时众多国内外 XHTML 的布道者,让我们知道,原来 HTML 还有这么多学问在里头,原来易于维护的 HTML 代码应该这么写。

这里简单介绍一下 XHTML,XHTML 其实就是 XML 和 HTML 的结合,这里又在简单介绍一下 XML,毕竟做开发是免不了要跟 XML 文件打交道的。这里依然不提 XML 的定义了,反正网上到处都有,作为最有良心的教程,都直接给最接地气的例子。

首先说一个大前提,XML 就是一个,机器能读懂,人也能读懂的文本文件,没错,又是文本文件,而且这个文本文件第一眼看上去跟 HTML 很像,就是用来传递信息的,不管其他的别的事情。

举个例子,假如我想把一个网站的会员信息传给另外一台机器,那么我们可以约定,传递的字段包含一堆用户信息(users),每个用户信息(user)包含 id 和 name 两个字段,而 id 和 name 我们用标签来标识,则这个约定好的 XML 长下面这样:

<?xml version="1.0" encoding="UTF-8"?>
<users>
  <user>
    <id>1</id>
    <user>Kyo</user>
  </user>
  <user>
    <id>2</id>
    <user>Iroi</user>
  </user>
</users>

XML 本身就是一个比 HTML 更严格的语言,比如标签必须闭合(以及属性必须用双引号等,后面会跟大家说什么是『属性』),而且一般来说 XML 文件还会带一个 DTD 文件的地址(上面的例子里没有,但我们后面会看到),这个 DTD 文件也是一个 XML 文件,专门用于描述某个 XML 它应该是什么样的。读取 XML 文档的程序应当通过 DTD 的描述来验证 XML 是否是合法的,比如我规定上面的 XML 里每个用户有且只有 name 和 id 两个标签,但如果某个用户多一个标签叫 password,或者某个用户少了 id,都应该报错。

XHTML 就是这么一个带 DTD 的 XML 文件,也可以说 XHTML 是一个带自我校验功能的 HTML。

至于 DTD 是怎么描述文件规则的,这里也不展开了,这不是几段话能说明白的,可以单独开一个话题再说。

实际上,浏览器对 XHTML 还是很包容的,即使违反了一些规定,任务浏览器都是不会报错的,原因是,对于浏览器厂商来说,HTML 开发人员也是他们的用户,厂商毕竟还是不能对用户要求太苛刻是吧。

虽然 XHTML 感觉上还是一个君子协议(这么说是因为虽然 XHTML 分严格版和过渡版,但实际上用严格版的很少,而过渡版其实……也不是很严,在加上浏览器放水……)。但对推广标准的 HTML 代码还是有很积极的作用,很多开发工程师,包括我,也就是从那个时候知道正确的 HTML 代码应该怎么写。

又过了几年,HTML5 在发布中了,并慢慢推出一些新语义的标签,火狐,谷歌,Safari,Opera,甚至 IE 本身,也开始慢慢支持 HTML5 的新标签,但刚开始那段时间并没有很多人敢用这些标签,还是因为 IE6 那个时候的市场占有率还是太高了。

就在这个很尴尬的时期,发生了一件互联网历史上的大事,iPhone 诞生了,从 iPhone 开始,以及在 Android 的努力下,HTML5 用得越来越多,毕竟没有桌面操作系统的历史负担嘛。而且移动端有一个特点,比桌面的操作系统更愿意升级,所以不但 HTML5 用得多,而且发展得也很快(顺带受益的还有 CSS3),有新出的 HTML5 或者 CSS3 的新功能,对比桌面操作系统,都可以在相对较短的时间里得到支持。

HTML5 不是 XML,它只是 HTML4 的升级,增加了一些功能,同时也删除了一些功能,或者把一些原有的功能设置为可用但『不再推荐』,当然这些都要看浏览器是否能良好的支持。也就是在这段时间,谷歌奋起直追,依靠对 HTML5 CSS3 良好的支持(以及更重要的:更快的 V8 引擎。其实对标准的支持也不是最重要的,用户的感受才是最重要的,用户也不关心标准),最终将 IE 干趴下。

虽然 HTML5 依然不用写得那么严格,但经过了『那段时间』的磨砺之后,现在的开发工程师大都比以前规范很多。在这里我就来解释一下前一篇文章的代码里提现规范的部分:

第一行的 <!DOCTYPE html> 叫做申明,是为了告诉浏览器当前的文档,得按照 HTML5 的方式来渲染。其实在 IE6 的时候,就已经支持申明,可惜的是当时用的人很少。直到后来 XHTML 开始流行的时候,才知道不同的浏览器对不同的申明渲染方式是不一样的,包括 IE6。

说到这,还得再感谢 HTML5,把申明变短了,以前特别长,以 XHTML 为例子,本来 XHTML 本质上是 XML,需要引用 DTD,在加上申明本身也特别长,所以每次开头你就得写这么多:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

接下来是 html 标签。在 XML 里,一个文档必须有且只有一个根标签,HTML5 也借鉴这个规定,同 XHTML 一样必须是 <html>。实际上,<html> 作为一个容器还可以通过 CSS 改变它的一些显示特性,以后再说。

最后,HTML5 和 XML(以及 XHTML)还是有某些方面的差别,比如 XML 要求必须闭合标签,有些标签无需内容,比如 <input>,先不用管它是什么意思,如果是 XHTML,必须写成 <input></input>,当然,XML 也提供简写,即 <input />,但在 HTML5 里则无需这么做。

知识的掌握不是来源于别人告诉你,而是自己的实践。在文章最后我再给大家分享 W3C 官方的文档验证服务,通过此服务的校验结果,你就能了解到很多规范的知识(你可以现在就用前一章的 HTML 代码做测试)。另外还有些浏览器的扩展,比如火狐的 HTML Validator 也能做同样的事情。

人人都能看懂的全栈开发教程——HTML 的发展 by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

如果觉得文章还不错,就请扫码鼓励一下作者吧
天使打赏人

发表评论

+ 72 = 74