# 第 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 是基于 XML、致力于实现更加严格并且统一的编码规范的 HTML 版本，解决之前 HTML4.01 版本时，由于编码不规范导致浏览器的各种古怪行为。所以，Web 开发者对 XHTML 非常的拥护。XHTML 极大的好处，就是强迫开发者养成良好的编码习惯，放弃 HTML 的凌乱写法，最终降低了浏览器解析页面的难度，方便移植到更多平台。 可是，越是想往好的方面发展，往往可能是带来的却是毁灭性的灾难，世间万物就是如此。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 不会用、邮件不会发送、迅雷不会下载的学员。这些学员是初学者之前的、负基础的学员，所以，如果是初学者一般问题不大。