你的位置:首页 > 网页设计

[网页设计]第 1 章 HTML5 概述


学习要点:

1.HTML5 的历史
2.HTML5 的功能
3.HTML5 的特点
4.课程学习问题

主讲教师:李炎恢

  HTML5 是继HTML4.01 和 XHTML1.0 之后的超文本标记语言的最新版本。 它是由一群自由思想者组成的团队设计出来,并最终实现多媒体支持、交互性、更加智能的表单,以及更好的语义化标记。
  HTML5 并不仅仅是 HTML 规范的最新版本,而是一系列用来制作现代富 Web 内容的相关技术的总称,其中最重要的三项技术分别为:HTML5 核心规范(标签元素)、CSS(层叠样式表第三代)、和 JavaScript。

一.HTML5 的历史
  1993 年 HTML 首次以因特网草案的形式发布, 然后经历了 2.0、 3.2 和 4.0, 直到 1999年的HTML4.01 版本稳定下来。由于发展缓慢,逐渐的被更加严格的 XHTML 取代。

  XHTML 的兴衰史
  自从 HTML4.01 版本之后,掌握着 HTML 规范的万维网联盟(W3C)组织没有再发布新的标准,而是围绕着 XHTML1.0 以及之后的 XHTML2.0 展开工作。XHTML 是基于   可是,越是想往好的方面发展,往往可能是带来的却是毁灭性的灾难,世间万物就是如此。XHTML2.0 规范了更严格的错误处理规则,强制要求浏览器拒绝无效的 XHTML2 页面,强制 Web 开发者写出绝对正确规范的代码,同时不得向下兼容,摒弃 HTML 遗留的怪异行为和编码习惯。按理说,取其精华、舍其糟粕应该是好事。但是,这样的话,数亿的页面将无法兼容,Web 开发者的难度又被加大,并且制定这个标准又太过久远,最终被抛弃。

  HTML5 的回归
  2008 年W3C 发布了 HTML5 的工作草案,2009 年停止了 XHTML2 计划。又过去大概一年, HTML5 规范进一步解决了诸多非常实际的问题, 各大浏览器厂商开始对旗下的产品进行升级,以便支持 HTML5。这样,得益于浏览器的实验反馈,HTML5 规范得到了持续的进步和完善,从而迅速融入到 Web 平台的实质性改进中。
  和 XHTML2.0 不同, 制定 HTML5 规范的一群人并不想挑出以往 HTML 的各种毛病为其改正,而是尽可能的补全 Web 开发者急需的各种功能。这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画(Canvas)、Web通信等等。

二.HTML5 的功能
  HTML5 到底涵盖了哪些功能?这些功能到底在主流的浏览器支持情况如何?
  1.HTML5 核心:这部分主要由 W3C 官方的规范组成,涉及新的语义元素、新的增强的Web 表单、音频和视频、以及通过 JavaScript 绘图的 Canvas。这部分大多数主流浏览器均得到很好的支持;
  2.曾经的 HTML5 标准:这部分主要来自于最初制定的 HTML5 规范,其中大多数功能需要 JavaScript 且支持富 Web 应用开发。比如:本地数据存储、离线应用和消息传递;3.非HTML5 标准:这部分通常指下一代功能,虽然从未进入 HTML5 标准,但人们还是会把它认做 HTML5 的一部分。这些包括最为常见的 CSS3,以及很热门的地理定位。

  对于最为常用且实用的部分, 基本上主流的浏览器都支持的比较好。 而那些特殊需求的部分,则需要根据不同的浏览器检测才能知道是否支持自己想要的功能。

三.HTML5 的特点
  在 HTML5 发展的同时,XHTML2.0 也在不断发展,那么到底是哪些特点导致 HTML5 取得最终的胜利呢?

  1.向下兼容
  对于 XHTML2.0 要求遵循规则,否则不予显示的方式,HTML5 却实行“不破坏 Web” 的原则。也就是说,以往已存在的 Web 页面,还可以保持正确的显示。
  当然,面对开发者,HTML5 规范要求摒弃过去那些编码坏习惯和废弃的标签元素;而面对浏览器厂商,要求它们兼容 HTML 遗留的一切,以做到向下兼容。

  2.用户至上
  HTML5 遵循“用户至上”的原则,在出现具体问题时,会把用户放在第一位,其次是开发者,然后是浏览器厂商,最后才是规范制定者。比如,开发者在编码时不严谨导致本该出现警告或错误时,却正常显示了页面。

  3.化繁为简
  HTML5 对比之前的 XHTML,做了大量的简化工作。具体如下:
  (1).以浏览器的原生能力代替复杂的 JavaScript;
  (2).DOCTYPE 被简化到极致;
  (3).字符集声明被简化;
  (4).简单强大的 API。

  4.无插件范式
  在 HTML5 出现之前,很多功能只能通过插件或 hack(如绘图 API)来实现,但 HTML5原生提供了这些支持。使用插件有很多问题,具体如下:
  (1).插件安装容易失败;
  (2).插件被浏览器或软件禁用屏蔽(如 Flash 插件);
  (3).插件经常会被爆出漏洞被利用攻击;
  (4).插件不容易与 HTML 文档其他部分集成(比如整体透明化等)。 

  5.访问通用性
  这个原则分为三个概念:
  (1).可访问性:比如更加利于残障人士的阅读方案;
  (2).媒体中立:比如 HTML5 的媒体播放在不同设备或平台均能正常运行;
  (3).支持所有语种:比如新元素<ruby>。

  6.引入语义
  HTML5 引入了一些用来区分不同含义和内容的标记元素。 这种方式极大的提供的编码人员的可读性和代码区域查询的便利性。

  7.引入原生媒体支持
  HTML5 的一次大改进救生衣支持在浏览器中直接播放视频和音频文件, 以前都需要借助插件才能实现此类功能。

  8.引入可编程内容
  HTML5 最大的变化就是引入了需要通过 JavaScript 编程才能完全的各种效果, 而这些很多都是 HTML5 原生的。那么现在 HTML5 可以理解为 HTML + CSS + JavaScript 的总称。

四.课程学习问题
  学习 HTML5 需要一些测试用的浏览器、编码用的开发工具、以及建议推荐的学习方法。

  1.浏览器选择

    IE9+
    Firefox 3.5+
    Chrome 3.0+
    Safari 3.0+
    Opera 10.5+

  这里重点要说明一下 IE 浏览器。由于历史和系统绑定原因,还有相当一部分电脑残留IE9 以下版本的浏览器。虽然微软已经开始发表声明逐步不再维护 IE8,但这部分群体还占有一定的份额。所以,是否要迎合这部分用户,取决于个人对市场的判断和成本的考量。

  2.开发工具
  本课程我们使用 Sublime Text3 作为 HTML5 课程的编码工具。使用了 Soda Dark 3作为软件界面的主题。

  3.学习方式
  本课程原则上是零基础、初学者可学,但如果你已经有 XHTML 课程基础,那么学习起来将非常轻松。当然,虽然我们已经录制了 XHTML 基础,在录制 HTML5 课程时,还是将所有学员当作刚接触的初学者来对待。 再当然, 这里所说的零基础和初学者也是需要一定经验,因为长期的教学工作,我们接触到很多连 QQ 不会用、邮件不会发送、迅雷不会下载的学员。这些学员是初学者之前的、负基础的学员,所以,如果是初学者一般问题不大。