[转] [HTML5] HTML5开发入门--第1回 何为HTML5？

http://bbs.9ria.com/thread-80129-1-1.html

 

第1回 何为HTML5？


最近经常会看到“HTML5”一词吧。本系列就是学习HTML5基础知识的入门连载，包含了JavaScript的API、CSS3、SVG等内容，定叫你耳目一新。文中会讲解到“使用HTML5能干什么？”、“要实现它，需要写怎么样的代码？”等问题。

 HTML5包含哪些内容？

    近来，“HTML5”一词的出现频率惊人地增长。几乎无日不出现在新闻和博客上。在开发者同仁的学习会上以HTML5为主题的情形亦为数不少。
    不过，也经常会听到“HTML5涵盖的内容范围极广，没有足够的学习时间。”　这样一种声音。
    诚然，HTML5可以称得上是当今世界最火热的议题。全球著名的开发者们和企业正如火如荼地对它的规范进行着提案和改善。因此，被称为“HTML5”技术的范围越来越广，要学习的东西也随之不断扩大。
    在本连载中，就来向大家介绍一下如此急速成长的HTML5的“现状”。假定读者为“具备了HTML/CSS/JavaScript的基本知识，但尚未开发过真正的富客户端/RIA应用程序”的开发者。文中会以“使用HTML5能干什么？”、“要实现它，需要写怎么样的代码？”等议题为主旨，加上急速发展中的HTML5的最新信息，向大家进行说明。
    本文，作为连载的第1回，我想先向大家介绍一下“HTML5”技术整体性的概要说明及其意义所在。

 初识HTML5框架结构
    HTML5，顾名思义就是HTML（Hyper Text Markup Language）的最新版。（现在广泛使用的HTML详细版本是HTML 4.01。）
    虽说如此，现在所谓的HTML5技术，实际上也包含了与HTML并无直接关系的JavaScript API。除此之外，甚至连CSS3（Cascading Style Sheets, Level 3）的相关技术、XML由来的其他标记语言（SVG、MathML等）也一并称为“HTML5”。
    这样一来，要为“HTML5究竟包含了哪些内容？”下定义就变得毫无意义。或许可以认为所有“基于开放标准的Web平台化”的行为都是HTML5。
    如下图所示，
    小框包含内容： HTML5的狭义范围。
    大框包含内容： HTML5的广义范围。

 HTML5解决了Web领域的哪3个问题
    HTML5对于Web领域来讲，是具有无可计量的巨大意义的升级。
    为何这么说呢？因为它一举解决了迄今为止Web领域的各种问题，是一个相当有针对性的升级。
    那么，这些问题分别是什么？HTML5是如何解它们的呢？

□ 【问题1】Web浏览器间的兼容性低
    首当其冲的是Web浏览器间的兼容性低的问题。
    在一个浏览器中能正常运行的Web程序（由HTML/CSS/JavaScript构成），放到其它浏览器中就不能正常运行，这可是家常便饭了吧。
    究其原因，当属 “规范和实现的背离”吧。如规范定义不明确、没有形成标准化规范、Web浏览器没有遵循规范等各种原因引起的。

→ 【解决】提高Web浏览器间的兼容性
    HTML5为了解决这一问题，广泛地进行了“详细分析现有Web浏览器功能实现，从中提取规范”的工作。由此，
便可将现有Web浏览器所具备的功能视为“遵循标准”的。
    如果根据这个规范来写程序，无论在哪个浏览器上都能提高正确运行的可能性，这对Web开发者和 设计 师来说是皆大欢喜的事。而且，对于今后要实现该功能的Web浏览器厂商来说，由于存在着明文的规范，实现起来会变得非常轻松。

□ 【问题2】藏在文档中的“意义”不明确
    下一个问题就是，以前的HTML缺少表现文档结构“意义”的功能。
    例如，要表现“目录”、“正文”等文档结构，一般会使用<div>元素。但是，<div>元素严格来讲，是“没有意义”的元素。
    使用<div>比较多的HTML文档，开发者通过目视或许能比较容易地把握文档结构。 但是，倘若对于搜索引擎等程序来说，它是不会知道“从哪里到哪里是重要的正文？”、“这个<ul>元素是表现导航菜单还是文档中的条目？”等问题的。

→ 【解决】将藏在文档中的“意义”明确出来
    HTML5为了解决该问题，添加了许多有意义的元素（称为“语义元素”）。不仅如此，还整合了各种周边技术，例如提高Web文档辅助功能（方便残疾人士）的规范（WAI-ARIA）、明示文档 数据 意义的规范（Microdata）等。

□ 【问题3】Web应用程序的功能受到限制
    最后一个问题是，Web应用程序的功能贫乏。
    由于Web应用程序具有从网络 下载 并运行的特性，需要对可能威胁到用户安全的功能加以限制。
    但这样一来，Web应用程序可以实现的功能也就相当有限了。甚至连选择上传的 文件 时，都不能同时选择多个文件。
→ 【解决】可以构建更丰富的Web应用程序  
    为了增强该功能，现在提出了各种新的API。各Web浏览器的实现工作也紧锣密鼓地进行着。“Web应用程序不可能做到的”功能，在不远的将来会变为可能。



 今后将介绍HTML5军团的使用方法
    如上所述，HTML5克服了Web领域中存在的问题，将Ｗｅｂ引领到新的舞台。在不远的将来，或许会迎来“无论什么样的ＵＩ（用户接口）都能理所当然地用HTML5来实现”的时代。
    仅仅是如此一个有意义的升级，就让HTML5的规范壮大了起来，并不断地进行着持续改进。以这样的速度，至少在今后1,2年内是不会消停的吧。
    本连载将以“HTML5及其周边技术能够实现什么”为切入点，对下列主题进行解说。

• HTML5标记
  • HTML5的描述方法
  • 段落相关元素
  • 增强的表单元素
  • 注音
  • IFrame的沙箱化
  • 菜单和命令
  • ……
• HTML5相关API
  • 操作Bitmap图形（Canvas元素）
  • 操作矢量图形（SVG）
  • 播放视频、音频（Video/Audio元素）
  • 实现在线Web应用程序
  • 实现跨域通信
  • 使用本地存储（Web Storage、Indexed Database API）
  • 后台运处理（Web Workers）
  • 实现服务器发布（Server-Sent Events）
  • 实现socket通信
  • 文件读写（File API/File Writer API）
  • 取得位置信息（Geolocation）
  • 信息通知（Web Notification）
  • 性能检测（Web Timing、Resource Timing）
  • 移动设备用的API
  • ……
• CSS3相关
  • CSS3 Selector
  • CSS Transitions
  • CSS Transforms
  • CSS Animations
  • Web字体
  • MediaQuery
  • Box Layout
  • ……

    不过，考虑到各个Web浏览器的HTML5实现方法不同，我想优先介绍一下让Web应用程序更多地在各个浏览器中运行的相关功能。因此，本连载的顺序并不与列表相一致。
    下回将介绍HTML5基本的描述方法和语法。敬请期待吧！