0626-H001
各位IT界的朋友大家好
很高兴和大家在这里
分享HTML5课程相关的技术
在这里我们要和大家讲到的是
互联网上最新潮
最热门的网络开发技术HTML5
让我们首先回顾一下
HTML5相关发展的历史和HTML的进程
把时间推回1996年
在1996年的时候 互联网方兴未艾
大量的互联网网站刚刚推出
那时候广大互联网媒体
对网站的理解只是
我们现在在这里
可以把数字媒体展示出来
简单地说 用户这时候关注的内容
只是把纸制媒体展现在网上
而网上所复现的内容
也是一些文字和图片的混排
和一些简单的信息
那个时代的互联网应该说是匮乏的
用户并不能从互联网中
得到一种新媒体的体验
看到的还是老时代的影子
在这种情况下
互联网上并不需要特别多的技术标准
来展示和修改相应的内容
互联网上的大部分标准
由两家公司制定
一家是网景公司 一家是微软公司
两家制作的浏览器IE和导航者
分别占领了市场上90%以上
和10%以下的份额
双方基本构成了第一代互联网标准
在1996年之后
微软通过发布Windows98系统
在桌面操作系统上占领了绝对的优势
其后又在Windows98系统上
绑定开发了IE4
这导致了广大互联网用户访问网站时
通常使用到的是IE浏览器
而IE浏览器中所兼容和制定的标准
基本上可认为是互联网上的广泛标准
所以事实上在1999年之前
这世界上其实并不需要所谓标准化组织
只需要由IE公司 IE4承认并接受
即可成为互联网上的专业标准
在这种大环境下
广大的互联网浏览器厂商
并没有兴趣建设自己的浏览器
也没有兴趣花更多的时间建立新的标准
如果一个市场只有一家厂商
进行修改和制定的话
那么这个市场必然是缺乏活力的
在这种情况下
国际标准化组织W3C开始介入
并且希望通过自己的努力
改变一家独大的现状
在1999年的时候 W3C通过收集整理
和修订其他浏览器厂商已制定的标准
推出了HTML官方标准
所以HTML 即超文本模型语言
这一标准推出
意味着广大浏览器厂商终于有标准可寻
并且可以在浏览器市场中
和微软产生竞争
而微软在IE6推出之后
由于其技术实力十分超前
所支持的标准基本在当时无出其右
所以微软基本上后来
放弃了在浏览器厂商竞争当中
继续努力的过程
可以想见
像龟兔赛跑游戏当中兔子一样
微软在推出IE6以后
已经遥遥领先于其他的市面上的厂商
于是微软重新调整了战略
放弃了在HTML标准上的进一步努力
而W3C作为国际标准化组织
势必希望引入更多的用户
来推广和修改标准
HTML4.0.1推出之后一直都被广泛诟病
主要有三个问题
第一个问题是语法结构松散和混乱
简单地说 HTML标准虽然视为标准
但并没为所有浏览器认可
如果一个HTML的浏览器
对于标准的兼容性不好的话
并不会影响到它市场份额的占有率
为什么是这样呢
简单地说
大部分的用户在开发网页的时候
只是使用记事本
或者是写字本一类的非智能感知
无光标提示
也没有可视化设计器的工具进行设计
所有的设计动作在很大程度上
凭借的是程序员自己的自身素养
这样设计出来的网页
浏览器怎么能够保证它的解析和执行呢
如果大家有兴趣
关注一下其它的编译型语言都知道
编译器的提示错误和编译错误信息报告
很大程度上帮助程序员
避免了自己的程序错误
而浏览器由于是解释性的解释语言
对HTML的所有操作都是解释和处理
那么在这种情况下
它根本就没有办法事先知道
办过来的数据是否正常
所以浏览器在很大一个程度上
要做大量的容错性的工作
他会花大量的时间和精力
去研究如何去兼容各种奇怪的模式
比如说用户在属性值当中
不使用双引号标注
比如用户使用成对出现标记的时候
并没有写封闭式标记
比如用户写单独标记的时候
明明可以使用CSS或其它的高级技术
来进行样式展示的时候
用户粗暴的用HTML标记来实现
所有的这些信息 浏览器都需要兼容
因为只有兼容才有市场占有率
才有更多的用户认可
在这种情况下
浏览器厂商的工作十分艰难
这是HTML4.0第一个非常严重的问题
第二个严重的问题就是
HTML4.0在布局和框架当中模糊
如果有兴趣的话大家可以关注
Document Type这个HTML的标签
Document Type DOCTYPE标签
在HTML中有三种说明方式
第一种是Strict严格的
第二是Transation灵活的
是第三种是Frame-set框架的
这三种标签定义含义
实际上是为了将就从IE3时代
过渡过来的各种网站
所具有的布局和框架方式
由于HTML4本身并非是创建性的设计
而是兼容其之前的各种设计的大成
这使得它在兼容性上势必失去灵活性
第三个HTML4主要问题是
它的可扩展性很差
HTML4试图加入一些新的标记
来解决一些新的问题
但在这过程当中
受迫于操作系统
和各大浏览器厂商的权限限制
一直没有寻求突破
举例来说
在浏览器视窗当中去播放视频
一直是广大用户的广泛要求
但HTML4标准推出的时候
由于是窄带式
广大用户根本没有那么高的网速
可以去响应更多的多媒体内容
所以使得用户在使用的时候
明显受限于各种各样的标记 怎么办呢
当时的解决方法就是
给它加上一些插件 Acting 5x组件
和Object这些标记插入到浏览器当中
首先破坏浏览器的优雅和美感
其次破坏浏览器的砂箱机制
第三代浏览器平台兼容性也不好
Acting 5x明显是IE平台亲和的产品
其它浏览器产品对它并不认可
而其它浏览器所使用的解决方案
比如Java小程序 或者是Flash插件
又对IE平台亲和度有限
在这种情况下
各浏览器厂商对HTML4基本上是采取
你制定标准 我大致兼容
但我自己还另搞一套
基本上是这么一种策略
W3C作为一个国际泛标准化组织
并没有强制执行要求各个浏览器厂商
遵循某一标准
它只能主动劝右 客观上引导大家
鼓励大家尝试着使用新标准
而没有办法强制统一
使得W3C内部产生各种各样的抱怨
团队在2004年左右产生了第一次分裂
W3C组织分裂成两个
一个是继续完成W3C的官方标准制定
一个是由一些激进的科学家
或者说前卫的科学家
形成的WHATWG组织
WHATWG组织旨在把浏览器当中
最为被人诟病的插件问题解决
把所有的浏览器中
需要插件才能完成的动作
分装成标准的HTML标记
这样一来在未来的浏览器当中
我们就可以不依赖于第三方插件
来完成所有的动作
WHATWG分裂以后
W3C继续尝试着
将HTML修改为语法严格的XHTML
并在XHTML标准上
推出XHTML1.0和XHTML2.0
望名生意 XHTML就是使用
XML这一严格的数据建模格式
对HTML进行整合
这种想法是很好的
但实际实施起来确实有各种各样的问题
另外XHTML2.0语法过于严格
各公司纷纷表示
对它的支持度有限
而微软在Windows IE6结束之后
由于对IE团队进行了大肆地调整
所以当升级到IE7和IE8的时候
又没有做出特别及时的跟进
这使得桌面平台中90%的用户
并没有体会到新的HTML标准
所带来的各种优势
在这种情况下
W3C不得不开始举行一次闭门投票
就我们是否需要一个新的HTML标准
来进行投票
闭门投票的过程是不可以知道的
但结果现在已经公开
第一次闭门投票失败了
各个浏览器厂商纷纷表示
暂时不需要一个新的标准
或者说基于现在的平台和技术
大家可以完成大部分的工作
W3C并未由此放弃
作为一个非常有信心 推广HTML纯洁化
并将互联网的标准化一推到底的组织
它又一次进行了投票
2006年的时候
W3C进行了第二次闭门投票
这次投票内容很有意思
第一次闭门投票中
所有的参商 参与投票者
都是互联网的浏览器制造厂商
浏览器制造厂商
实际上在市场上只有五家
第一家当然是IE
第二家是Google的Chrome
第三家是苹果Safari
第四家是Firefox Mozilla Founder
第五家是Opera
这五家市场占有按照我刚才说的顺序
来进行划分
基本上可以认为IE
占了75%以上的桌面控件
剩下几家分剩下25%
是这么一个情况
而在IE用户当中
2006年的时候Windows XP
和IE6这一组合
又牢固地占据了56%以上的平台
由此可知 在大部分的情况下
用户使用IE6这一落后时代标准
来进行浏览器解析的
即使在2006年Windows XP
推出了四五年之后
用户还是广泛的使用IE6
作为首选的互联网浏览器平台
而IE6支持的标准
是不能够适应新厂商和新标准
作为一个国际标准化组织
W3C不甘心于其第一次投票的失败
于是把大量的互联网公司
也纳入投票标准制定当中 其理由是
由于互联网中所有的技术标准
都是呈现给最终用户的
所以代表最广大人民群众声音的网站
才是参加制定标准组织最重要的人选
这一思路不能够被反驳
因为理论根据清楚 事实清楚
所以被请来的网站
就包括有国际上的雅虎 AOL
还有一些国际上著名的网站
国内也有两家网站被邀请
投票中的投票对象
由原来的十几个 变成了206个
投票结果 也呈现了一边倒的态势
广大浏览器的这个厂商
依然呈现出保守态度
而广大网站的厂商
由于要适应各种新特性
要做出各种新的炫的视觉效果
来吸引新用户
所以对推动新标准十分积极
在这种情况下 新的标准被制定出来了
那就是我们现在要讲到的HTML5标准
HTML5标准出来之后
W3C像早有预谋一样
突然和WHATWG宣布合并
而之前WHATWG所制定的各种新标准
被纳入了HTML5相应标准之中
这两者的合作使得HTML5内容
一下子就丰富和全面起来了
这个内容使得HTML5
很快就成为了广大浏览器厂商
制定的标准
但在桌面端 由于Windows操作系统
一直在升级过程当中
IE浏览器版本迟迟没有发布最新的版本
从2002年到2006年
只推出了Windows IE的6 7 8三个版本
这三个版本在本质上变化有限
所以HTML5对Windows的操作系统
影响是有限的
其他浏览器厂商虽然蜂拥跟进
但是所能适应的新标准
和所能影响的新用户数量也有限
当2009年的时候就了不起了
这个时代发生了一个巨大的变化
就是移动互联网时代到来了
用户再也不只是在桌面端访问网站
而是每个人都使用桌面端以外的设备
比如手机 比如平板电脑
比如iPad 比如各种各样的移动设备
来进行互联网的访问
这一过程使得网页设计产生了质的革命
第一件事就是必须要适应不同屏幕
第二件事就是
由于这个移动端的浏览器没有历史包袱
所以它可以很容易的兼容新标准
IE6想兼容新标准不太容易
因为它要兼容老的产品
它即使升级到各版本
依然要考虑老网站的效果
而移动端由于它基本上不需要考虑
老网站的视觉效果
因为老的网站是在大屏展示的
在我们这种小屏幕上展示效果
未必有多么适合我们这个需求
在这种新的时代下
用户可以完全适应新的浏览器标准
使得移动端的网页设计
变得既流畅又丰富
于是在2009
由于移动互联网的这个大浪潮
导致HTML5广泛的成为了视觉标准
同时伴生着HTML5
CSS也发布了它的三标准
这两者的配合
成为了移动互联网的官方配制
就是HTML5加CSS3的设置
是移动互联网的配制
由于移动互联网
对整个桌面端的广泛影响
使得用户会认为说
我们桌面端如果不兼容HTML5
那这个设计就失败了
所以导致网站中设计中
HTML5成为了事实的广域网互联网标准
在2012年的12月份的时候
HTML5发布预览版已经正式发布
各个桌面端的浏览器纷纷跟进
于是我们在今天 2014年的今天
我们已经看到 HTML5基本上成为了
互联网上的事实标准
各浏览器厂商或者各网页开发者
都会遵循这个标准 来做新的产品
那么新的HTML5标准
主要的设计宗旨是哪些呢
首先第一件事就是
提供新的JavaScript跟CSS的接口
新的JavaScript跟CSS接口
并不是为了设计上的方便
而是为了性能
我们后边会讲到
比如说CSS提供新的选择器
Query Selector
用它来代替原来CSS当中
原来常用的JavaScript的DOM选择器
getElementBy ID这个标签
getElementBy ID标签是性能会差一点
另外大量的API会诞生
我们原来HTML当中
广泛依赖于插件的动作会被去掉
还有一些新的内容就是开发过程
本身是希望向公众透明
我们待会儿讲的Video和Audio标签
视频跟音频的时候会告诉大家说
新的标签实际上很大程度上
影响了用户的设计和开发
而新的标签又在一定程度上提高了性能
在这个过程当中
谁成为新标签的事实标准制定者
谁就成为了最有商业利益的价值内容
在这种考量下
各厂商都希望自己的标签成为新的标准
在这个过程当中
各厂商使用了自己的办法来努力
我们待会儿来介绍这个部分