★ FEATURED ARTICLE 1. 开篇为什么你学了那么久还是分不清HTML和HTML5说实话我在做前端这几年被问得最多的问题既不是JavaScript的闭包也不是浏览器兼容性而是这种看似基础到不能再基础的问题“HTML5和HTML到底是什么关系CSS3是不是就是CSS的第三个版本那我现在学的是哪个”不光新手容易懵甚至一些写了两年业务代码的同事遇到标签或者CSS动画时也会下意识说一句“这是HTML5的新特性吧”——然后我一看代码标签和属性用得都没有错但概念上完全对不上号。这个现象很有意思。HTML和HTML5的关系其实很像“微信”和“微信5.0”的关系微信一直叫微信5.0是它某个大版本阶段的代称你不能说微信5.0就不是微信了。同理HTML5是HTML发展到第五个主要版本阶段的简称它依然是HTML本身只是这个阶段引入了足够多的新能力大家为了表达方便干脆直接叫它HTML5。CSS和CSS3的关系也是类似的逻辑但更不用说——CSS3和CSS2之间有一个完全不同的设计思路CSS3走的是模块化路线根本不存在一个统一的“CSS3”标准文本。所以这篇博文的核心目的就是帮你把这条发展脉络彻底捋直HTML是怎么一步步走到今天HTML5这个阶段的CSS又是怎么从“小打小闹”变成“模块化大杂烩”的以及你在实际写网页时哪些能力是HTML5时代才有的哪些能力其实CSS2就已经支持了。这不是什么高深的技术剖析就是一份能让你真正建立起完整认知框架的“版本世系图”。如果你正准备做网页设计作业、想系统自学前端、或者只是被面试题里“HTML5新增了哪些特性”问到怀疑人生这篇文章都适合你。看完你会发现这些术语背后的逻辑其实特别朴素朴素的就像看一棵树的年轮一圈一圈长出来的。2. 版本号背后的真实含义HTML的“5”和CSS的“3”到底指什么先聊聊最让人困惑的版本号。HTML的版本演进路径大致是HTML 2.0 → HTML 3.2 → HTML 4.01 → XHTML 1.0 → HTML5。这里面有个小趣闻HTML 1.0从来没有正式成为标准因为最早期的HTML规范在IETF互联网工程任务组的草案阶段就直接被HTML 2.0取代了。所以严格来说HTML的第一份正式标准就是2.0版本但大家在口语里往往把1990年代初期蒂姆·伯纳斯-李发明的那个原始标记语言直接称为HTML 1.0。这也是为什么很多老教材里你会看到“HTML经历了1.0到5.0”这种说法其实不够严谨但也不难理解。HTML的版本号不是随随便便按顺序跳的。2.0是第一批标准化的标签集包括你熟知的 、、 这些基础元素。3.2在1997年发布加入了表格、applet、脚本支持等把网页从纯文本推向了富媒体同年年底12月HTML 4.0发布次年12月4.01修订版定稿这个版本引入了样式表CSS、框架页面、更丰富的表单控件算是桌面互联网时代最成熟的一个版本。很多老程序员直到今天写邮件模板的时候依然恪守HTML 4.01的规范——因为邮件客户端对HTML5的支持至今都很糟糕。而XHTML 1.0出现在2000年本质上是把HTML 4.01用XML语法重写了一遍规则更严格所有标签必须闭合、属性必须小写、标签必须正确嵌套。当时业界一片叫好觉得这是未来结果没想到这条路直接走死了——因为严格程度太高开发者怨声载道浏览器厂商也不愿意完全放弃对错误语法页面的宽容渲染。于是浏览器厂商和W3C之间的分歧在2004年爆发Opera、Mozilla和Apple联合成立了WHATWG组织开始编写一个更务实、向后兼容的HTML续篇这就是HTML5的雏形。再说CSS。CSS的版本演进比HTML清晰一些CSS1在1996年发布定义了最基础的字体、颜色、间距等排版属性CSS2在1998年发布加入了定位、浮动、z-index、媒体类型等强大的布局能力这条分支后来在2011年还推出了CSS 2.1修订版并成了支持时间最久的标准之一。但CSS3严格来说不是一个可以在W3C官网上直接下载的完整规范文档而是一个总称——它由几十个相互独立的模块组成每个模块单独推进、单独定级比如Selectors Level 3、Media Queries Level 3、Colors Level 3、Flexbox现在叫CSS Flexible Box Layout Module Level 1等。所以你会发现CSS3的“3”更像一个年代符号而不是一个统一的版本号2009年前后大部分浏览器开始引入CSS3的模块能力人们就把它统称为CSS3。3. HTML5的诞生故事为什么它不是HTML的“小改款”讲HTML5就不能不提它背后的标准之争因为这个版本的设计哲学跟前面所有HTML版本完全不同。此前的HTML版本方向始终是“如何用标签描述更多类型的内容”而HTML5要回答的问题是在移动互联网、富交互、视频音频大量普及的时代浏览器本身该具备哪些更底层的应用能力这个方向的转变是有现实原因的。2000年代后期Flash正如日中天网页视频靠Flash、网页游戏靠Flash、复杂动画还是靠Flash。但Flash有一个致命问题它不开放、不稳定、还不支持苹果的iOS设备。2010年乔布斯公开发表《Thoughts on Flash》宣布iPhone和iPad全面不支持Flash这一下子等于把整个Web平台逼上了绝路如果没有替代方案移动端的网页视频、游戏、动画全都做不了。HTML5正是在这个历史节点上扛起了这面大旗把、、这些原本需要插件才能实现的能力直接做成了浏览器原生支持的标准标签和API。这就是为什么总有人说“HTML5的出现和iPhone的流行有直接关系”这不是坊间八卦而是真实的技术史。HTML5在2014年10月28日正式发布为W3C推荐标准。这个“正式发布”你如果放在当时看其实已经不太重要了——因为等到2014年Chrome、Firefox、Safari、IE9以上版本早就把HTML5的大部分特性支持得差不多了。标准文件的落定更像是给一项已经大规模应用的技术补了一张身份证而不是发令枪。所以如果今天还有人跟你说“等HTML5标准全面支持之后再学吧”你可以直接告诉他HTML5不是你理解的单一标准而是一个持续演进的“大家族”你现在写的每一个语义化标签、每一次canvas绘图、每一个操作历史记录的API都属于这个家族的一员。关于HTML5的具体内容你只需要抓住几个结构性变化第一文档声明变得极其简单就一行 以前HTML 4.01那串冗长的DTD声明彻底退出历史舞台第二新增了一批语义化标签、、、、、这些标签没有太多样式效果却能让搜索引擎和开发者一眼看懂页面结构第三多媒体原生支持和直接干掉了Flash的命第四提供了一整套JavaScript API体系地理定位、本地存储localStorage、拖放、Web Worker、WebSocket、History API等等这正是“网页应用化”的基础。
阅读完成 · 觉得有帮助？
