您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> Html5 >> 正文

使用HTML5 和CSS3创建现代Web站点

作者:佚名    责任编辑:admin    更新时间:2022-06-22

开始之前本教程假定您具有 HTML、CSS 和 JavaScript 的一些基本经验。假定您知道什么是 HTML 元素或标记、属性表示什么、HTML 标记的基本语法、Web 页面的常规结构等等。关于 CSS,您应该熟悉元素、类、以及基于 ID 的选择器、CSS 特性的语法以及如何使用内嵌或外部样式表在您的 Web 页面中包括 CSS。最后,假定您具有一些 JavaScript 的工作知识,例如什么是变量、函数、if 语句和 for 循环以及如何在您的 Web 页面中包括 JavaScript 代码。如果您决定需要在开始之前先复习一下以上任何技术,请跳至 参考资料部分,查找一些有用的教程和文章,它们将帮助您快速了解 HTML、CSS 和 JavaScript 开发的基础知识。

关于本教程

在过去的十年左右,Web 2.0、富因特网应用程序(RIA)以及 Semantic Web 等概念都将 HTML、CSS 和 JavaScript 推到了它们的极限以及极限之外,建成依赖 Adobe® Flash 等插件来支持视频和音频等组件以及高度图形化和交互的应用程序。Adobe Flex 开发框架、Microsoft® 的 Silverlight 平台和 JavaFX 都似乎在 HTML 的缺点使得开发人员犯难时来提供支持。但是,使用 HTML5,标记语言将具有完整的多媒体支持、本地存储和脱机应用程序支持、原生 2D 绘图 API 以及承载新应用程序开发 API,提供所有这些都是旨在证明 HTML、CSS 和 JavaScript 可以为您的 Web 站点和应用程序提供一个丰富的前端。

HTML5 被广泛认为是计划在 2010 年出现的最重要的新技术之一,已经有几本关于该主题的书正在编写过程中,其中一些将最早在今年三月初出版。在过去许多年,Web 都是依赖于外部插件来提供 Web 浏览器自己无法支持的功能,特别是在 2D 绘图、动画以及多媒体方面。HTML 和 CSS 规范的最新版本目的是不再需要这些额外的浏览器组件来促进此类功能,以及减少进行以下细小操作所需的 JavaScript(或者在某些情况下完全不再需要 JavaScript):行拖放、行条带化等等。请按照本教程学习如何使用 HTML5。

 

先决条件

HTML5 是一种对象较新的规范,因为浏览器支持是非常有限的(在编写本教程时)。本教程中提供的代码尽可能是跨浏览器兼容的,但是一些功能将无法在所有浏览器中使用。当前为浏览器特定的任何功能都会在本教程中明确指出。为了确保您可以体验所有这些新功能,建议您在开发 HTML5 和 CSS3 应用程序时在您的系统上安装以下 Web 浏览器的最新版本:

  • Mozilla Firefox(版本3.5+)
  • Apple Safari(版本 4.0+)
  • Opera(版本 10.0+)
  • Google Chrome(版本 3.0+)

您不需任何特定软件来编写 HTML 和 CSS 代码;任何基本文本编辑器都可以(例如 Notepad、vi、emacs 等等)。在本教程中,假定 源代码 存储在您本地计算机上的一个目录中 — 您不需要使用 Web 服务器或将文件上载到 Web 承载服务。

 

HTML5 中的新功能

在本部分,您将了解 HTML5 提供的一些很好的新功能。您将首先学习一些新的语义元素,这些元素用来提供现在 Web 页面的各个部分的意义:页眉、页脚、导航栏、边栏等等。然后,您将学习重要的新 <canvas> 元素和 2D 绘图 JavaScript API,可以用来创建形状、文本、动画、过渡等等。接下来,您将看到新的 <audio> 和 <video> 元素如何用来替代 Web 当前对 Flash 作为一种多媒体交付平台的依赖。接着,将向您介绍本地存储 API 和脱机应用程序支持,它们将进一步使 Web 应用程序在功能方面与其桌面对应项相一致,甚至在未连接到网络或互联网时也是如此。本部分结尾部分将简要概述 HTML5 规范中包括的其他新元素、属性和 API。