html5和css3

在你开始前

本教程假定您具有HTML，CSS和JavaScript的一些基本经验。 它假定您了解HTML元素或标记是什么，属性的含义，HTML标记的基本语法，网页的一般结构，等等。 就CSS而言，您应该熟悉基于元素，类和基于ID的选择器，CSS属性的语法以及如何使用内联或外部样式表将CSS包括在Web页面中。 最后，假定您具有一些JavaScript的使用知识，例如什么是变量，函数，if语句和for循环，以及如何在网页中包含JavaScript代码。 如果你觉得你需要刷上了这些技术开始之前，直接跳到了相关主题的一些有用的教程和文章，将带给你加快速度HTML，CSS的基础知识部分，和JavaScript开发。

关于本教程

在过去十年左右的时间里，诸如Web 2.0，富Internet应用程序（RIA）和语义Web之类的概念都将HTML，CSS和JavaScript推向了极限，甚至超出了它们的极限，它们通常依赖于Adobe®之类的插件。闪存可为视频和音频等组件以及高度图形化和交互式的应用程序供电。 Adobe Flex开发框架，Microsoft®的Silverlight平台和JavaFX都希望在HTML的弱点使开发人员的生活陷入困境时提供支持。 但是，使用HTML5时，标记语言开始大行其道，提供全面的多媒体支持，本地存储和脱机应用程序支持，本机2D绘图API和许多新的应用程序开发API，所有这些都旨在证明HTML，CSS ，JavaScript可以为您的网站和应用程序提供丰富的前端。

HTML5被广泛认为是计划于2010年出现的最重要的新技术之一，并且已经有数本关于该主题的书正在撰写，其中一些书预定于今年3月出版。 多年来，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代码。 任何基本的文本编辑器都可以执行此操作（例如记事本，vi，emacs等）。在本教程中，假定源代码存储在本地计算机上的目录中-无需使用Web服务器或将文件上传到Web托管服务。

HTML5的新功能

在本节中，您将发现HTML5必须提供的一些很棒的新功能。 首先，您将学习旨在为现代网页的各个部分赋予含义的新语义元素：页眉，页脚，导航栏，侧栏等。 接下来，您将了解重要的新<canvas>元素和可用于创建形状，文本，动画，过渡等的2D绘图JavaScript API。 接下来，您将看到新的<audio>和<video>元素打算如何取代Web当前对Flash作为多媒体交付平台的依赖性。 接下来，将向您介绍本地存储API和脱机应用程序支持，即使在未连接到网络或Internet的情况下，也将使Web应用程序在功能上与桌面应用程序保持一致。 本节最后简要概述了当前HTML5规范中提出的其他新元素，属性和API。

语义元素

HTML5规范包括一系列新的语义元素，用于为网页的各个部分或部分赋予一些含义，例如页眉，页脚，导航等。 在以前HTML版本中，通常将使用<div>元素来创建这些部分，并使用ID或类属性将它们彼此区分开。 这样做的问题是，这没有语义含义，因为没有定义任何指定要使用的类名或ID的严格规则，这使得软件很难确定特定区域在做什么。 HTML5应该有助于减轻这些问题，使Web浏览器更容易解析文档的语义结构。

值得指出的是，继续在HTML5中使用<div>元素是完全有效的，但是为了将来对您的工作进行验证，建议您在相关时使用语义元素。 另一方面，也建议您避免将这些新元素用于其预期目的以外的目的。 例如，<nav>元素不应仅用于任何链接组； 它旨在包围页面上的主导航块。

HTML5引入的主要语​​义元素是：

<标题>

此元素用于为网页的某些部分定义标题，可以是整个页面，<article>元素或<section>元素。

<页脚>

与<header>元素一样，此新元素为页面的某些部分定义页脚。 页脚，文章或节的末尾不必包含页脚，但通常会包含页脚。

<导航>

这是网页上主要导航链接的容器。 此元素并非旨在与所有链接组一起使用，而应仅用于主要导航块。 如果您的<footer>元素包含导航链接，则无需将这些链接包装在<nav>元素中，因为<footer>元素本身就足够了。

<文章>

<article>元素用于在页面上定义一个独立项目，可以独立分发，例如新闻项目，博客文章或评论。 通常使用RSS提要来联合此类项目。

<部分>

此元素表示文档或应用程序的一部分，例如文章或教程的一章或一部分。 例如，您正在阅读的部分可能被HTML5中的<section>元素包围。 尽管不是严格要求，<section>元素通常具有标头。 例如，您正在阅读的部分的标题将包含文本“语义元素”。

<aside>

此新元素可用于标记侧边栏或一些其他内容，这些内容在某种程度上与其周围的内容分开。 例如广告块。

<hgroup>

在某些情况下，页面，文章或部分可能需要多个标题，例如您拥有标题和副标题的位置。 例如，本教程的标题为“使用HTML5和CSS3创建现代网站”，副标题为“在HTML5中实现画布和视频元素”。 您可以将它们包装在<hgroup>元素中，对主标题使用<h1>元素，对字幕使用<h2>元素。

本教程结尾的示例Web站点包括这些新的语义元素中的几个，在这一点上，我将详细解释它们的语法和用法。

<canvas>元素

<canvas>元素最初由Apple®开发，用于Mac OS X仪表板小部件和Safari，但后来在Mozilla®和Opera®的Web浏览器中被采用。 该元素已经过标准化，并已包含在HTML5规范中，以及一系列2D绘图API，可用于在元素内部创建形状，文本，过渡和动画。

许多人认为<canvas>元素是HTML5的最重要方面之一，因为它可以方便地动态生成图形，交互式游戏，绘画应用程序和其他图形，而无需使用外部插件（例如Adobe Flash）。

<canvas>元素本身非常基本，它定义了对象的宽度，高度和唯一ID。 然后，开发人员必须使用一系列JavaScript API在画布上实际绘制对象，通常是在Web页完成渲染之后。 这些API允许开发人员绘制形状和线条。 应用颜色，不透明度和渐变； 创建文本； 转换画布对象； 并执行动画。 这些API还允许<canvas>进行交互并响应用户输入，例如鼠标事件和键事件，从而有助于在画布上制作游戏和Web应用程序。 您将在本教程稍后的示例HTML5 / CSS3网站中看到<canvas>元素的示例。

播放<音频>和<视频>

近年来，诸如YouTube之类的视频共享网站和诸如Hulu之类的内容交付平台的流行，已经使Web用于多媒体流的使用发生了巨大的爆炸。 不幸的是，在构建Web时并未考虑到此类内容，因此，Flash Video（.flv）文件格式和Adobe Flash平台在很大程度上促进了视频和音频的提供。

但是，HTML5包含对两个新元素<audio>和<video>的支持，这两个元素使Web开发人员可以包括多媒体内容，而无需依赖用户安装其他浏览器插件。 如果用户选择使用Mozilla Firefox，Apple Safari和Google Chrome等几种浏览器，它们已经开始支持这些新元素并提供标准的浏览器播放控件。 此外，还提供了一组标准JavaScript API，以允许开发人员在需要时创建自己的播放控件。 本地多媒体播放的一个关键优势是，从理论上讲它需要更少的CPU资源，这可以节省能源。

但是，这些新的多媒体元素的一个关键问题是每个浏览器支持的文件格式以及与这些文件可用于编码的各种编解码器一起的专利许可问题。 Mozilla和Opera希望使用开源的Theora视频容器和编解码器，它们不需要专利许可即可将编解码器包含在Web浏览器中。 另一方面，苹果和谷歌对Theora的质量并不满意，尤其是在像YouTube这样的高清晰度（HD）内容交付方面。 他们喜欢通常包含在MP4，MOV或MKV文件中的H.264编解码器。

然而，问题不仅仅在于视频，因为音频编解码器也存在同样的问题。 MP3和AAC格式受专利限制，而Vorbis格式不受限制。 Vorbis音频的问题在于它没有得到广泛使用，因为便携式媒体播放器和许多媒体软件应用程序不支持它。

在不久的将来，将对HTML5 <video>和<audio>做出许多决定，很有趣的是，最终建议中将促进哪些编解码器和格式。 同时，您可以尝试通过提供各种格式的视频并通过提供Flash视频作为后备来支持所有浏览器。 让我们希望做出最终决定，不要让浏览器供应商来决定要支持的格式，因为这实际上会使这些新元素变得无用。

再次，您将在本教程的后面看到<video>元素的作用。

本地存储和离线应用程序

传统上，Web开发人员使用cookie将信息存储在访问者的本地计算机上，从而允许Web页稍后再读取此信息。 尽管cookie对于存储基本数据非常有用，但是它们受以下事实的限制：不需要Web浏览器在每个Web服务器上保留20个以上的cookie，或在每个cookie中包含4KB的数据（包括名称和值）。 另外，它们与每个HTTP请求一起发送到Web服务器，这是浪费资源。

HTML5通过本地存储API提供了针对这些问题的解决方案，这些内容在独立于HTML5主文档的规范中进行了介绍。 这套API允许开发人员将信息存储在访问者的计算机上，同时保持合理的信心，以确保他们以后仍会在那里。 此外，该信息在任何时候都可以访问（即使在呈现页面之后），并且不会随每个HTTP请求自动加载。 该规范包括同源限制，这些限制阻止网站读取或更改其他网站存储的数据。

大多数浏览器将网页存储在本地缓存中，即使用户处于脱机状态也可以查看它们。 这对于静态页面效果很好，但不适用于通常由数据库驱动的动态内容，例如Gmail，Facebook或Twitter。 HTML5提供了对脱机应用程序的支持，其中浏览器下载了脱机使用该应用程序所需的所有文件，并且当用户脱机使用该应用程序时，当他们重新连接到该应用程序时，浏览器可以允许将过程中所做的任何更改上传到服务器。互联网。

Web表单增强

如果您以前创建过Web应用程序，那么您很有可能会熟悉HTML的一组表单控件，其中一些是使用<input>元素实现的。 在HTML 4中，支持以下输入类型：

• 纽扣
• 复选框
• 文件
• 隐
• 图片
• 密码
• 重启
• 无线电
• 提交
• 文本

另外，还有一些其他元素以诸如<select>和<textarea>之类的形式使用。 这些表单控件为基本表单字段（例如姓名，电话号码和地址）提供了很多功能，就像您在联系表单中可能会发现的那样。 但是，作为平台的Web已经远远超出了使用HTML表单提交联系表单的阶段-现在，它们已用于提交用于服务器端处理的应用程序数据。 结果，Web应用程序开发人员不断发现自己需要一些更复杂的表单控件，例如微调器，滑块，日期/时间选择器，颜色选择器等。

为了利用这些类型的控件，开发人员需要使用提供UI组件的外部JavaScript库，或者使用诸如Adobe Flex，Microsoft Silverlight或JavaFX之类的替代开发框架。 HTML5旨在通过提供一系列新的表单输入类型来填补其前身在此领域中留下的空白：

• 颜色
• 日期
• 约会时间
• 本地日期时间
• 电子邮件
• 月
• 数
• 范围
• 搜索
• 电话
• 时间
• 网址
• 周

目前，对这些新表格字段的支持非常有限。 iPhone上的Mobile Safari浏览器利用这些新类型中的一些来更改呈现给用户的键盘类型（例如，使用电子邮件类型，@符号和.com快捷方式）。 而且，Opera为许多这些控件提供了一些新的小部件，包括用于数字类型的微调器和用于与日期相关的类型的日历日期选择器。 这些新产品中使用最广泛的类型是范围类型，它由Opera，Safari和Google Chrome浏览器呈现为滑块。

除了这些新的输入类型外，HTML5还支持表单字段的两个主要新功能。 第一个是自动聚焦，它告诉浏览器在页面呈现后自动将焦点赋予特定的表单字段，而无需JavaScript代码这样做。 第二个增强功能是占位符属性，该属性允许开发人员定义当内容为空时将出现在基于文本框的控件中的文本。 这样的一个示例是搜索框，其中开发人员希望不要在框本身之外使用标签。 占位符属性允许开发人员指定在控件的值为空且控件没有焦点时将显示的文本。 图1中显示了一个示例。

图1.运行中的占位符属性

如图1所示，电子邮件地址和电话号码的占位符文本显示为灰色，而该字段为空并且没有焦点。 此屏幕快照还显示了一个范围输入类型的示例，在这里由Safari浏览器中的滑块表示。 该屏幕快照取自本教程后面讨论的示例Web页面。

其他新功能

HTML5包含了许多新功能； 在本教程中不可能涵盖所有内容。 本节简要概述了规范中的其他一些增强功能。

网络工作者

这样就可以将JavaScript代码设置为在后台进程中运行，以促进多线程应用程序的开发。 Web工作人员为开发人员提供的主要好处是，可以在后台处理密集的计算，而不会不利地影响用户界面的速度。

地理位置

HTML5包含一个地理定位API，该Web API允许Web应用程序确定您当前的地理位置，前提是您要定位的设备提供了查找此类信息的功能（例如，手机上的GPS）。 如果您没有支持此功能的设备（例如iPhone或基于Android 2.0的智能手机），则可以使用Firefox并下载一个插件，该插件可让您手动设置位置。

拖放

另一个有趣的功能是包含拖放API。 到目前为止，没有插件的拖放实现取决于一些非常复杂JavaScript或JavaScript库（例如script.aculo.us）的使用。

跨文档消息传递

这样一来，位于不同窗口（和iframe）中的文档就可以相互发送和接收消息。 对于开发托管在除主网页服务器之外的服务器（类似于Facebook应用程序）上的窗口小部件和应用程序，该功能可能非常有用。

和更多

HTML5引入的其他新功能包括MIME类型和协议处理程序注册，因此可以将Web应用程序注册为特定文件类型或协议的默认应用程序。 浏览器历史记录管理，直到现在仍需要手动或使用外部JavaScript框架来实现； 以及其他许多使Web开发人员的生活更加轻松的新元素和属性。

CSS3的新功能

本节向您介绍CSS级别3规范中可以找到的新功能-包括新CSS选择器，例如结构，基于状态和否定的伪类，以及其他新的选择器类型。 它还显示了CSS3提供的许多效果，这些效果以前需要使用单独的应用程序来创建图像并保存为GIF，JPG或PNG。 这样的效果包括文本和框上的阴影，边框上的圆角以及使用不透明性创建半透明外观。 这些功能中的许多功能（例如，不透明度和圆角）由于在传统的Web浏览器中会非常优雅地降级，因此在使用中相对广泛。 接下来，您将了解可以使用CSS3创建的新的多列布局。 这些布局是对报纸布局的回溯，在报纸布局中，文本将按规定的列数拉伸或按要求扩展到特定的列宽。 将要讨论的另一个功能是使用@ font-face标记包括非标准Web字体的问题。 最后，还将介绍CSS3的其他一些新功能，例如对HSL（色调，饱和度和亮度）和RGBA（红色，绿色，蓝色和Alpha）颜色模型的支持。

新选择器

CSS选择器是指使用样式表样式化HTML元素的方式。 例如，要在所有<div>元素周围放置边框，可以使用选择器div： div { border: 1px solid #000; } div { border: 1px solid #000; } 。

要将背景色应用于所有带有高亮显示的元素，您可以使用选择器.highlight： .highlight { background-color: yellow; } .highlight { background-color: yellow; } 。

最后，要更改ID属性值为myDiv的元素的宽度，可以使用： #myDiv { width: 250px; } #myDiv { width: 250px; } 。

当然，这些选择器可以被组合，从而选择所有的<div>与类元素highlight ，你可以使用div.highlight ，或选择<DIV>与ID myDiv元件应该使用div#myDiv 。

除了这些简单的选择器之外，CSS还包括（自从以前的版本以来已经做过）一系列更复杂的选择器。 例如，您可以使用选择器input [type =“ text”]来选择仅包含具有text值的属性类型的输入元素。 或者，当鼠标:hover在元素上时，可以使用伪类:hover为元素设置样式，例如： a:hover { color: red; } a:hover { color: red; } 。

这些选择器还有很多，提供所有这些选择器可以使选择要设置样式的元素更加容易。 借助CSS3，甚至还添加了更多新的选择器，所有这些选择器使开发人员的工作更加轻松，并减少了他们需要编写HTML和JavaScript数量。

属性选择器

E [foo ^ =“ bar”]

选择一个元素E，其foo属性完全以字符串bar开头

E [foo $ =“ bar”]

选择一个元素E，其foo属性完全以字符串bar结尾

E [foo * =“ bar”]

选择一个元素E，其foo属性包含字符串bar

结构化伪类

E：根

选择元素E，即文档的根（<html>标记）

E：第n个孩子（n）

选择元素E，其父元素的第n个子元素

E：倒数第二个孩子（n）

选择一个元素E，其父元素的第n个子元素

E：nth-​​of-type（n）

选择元素E，其类型的第n个同级

E：类型的倒数第（n）

选择元素E，其类型的最后第n个同级

E：最后一个孩子

选择一个元素E，它是其父元素的最后一个子元素（请注意，E：first-child先前是在CSS2中定义的）

E：第一类

选择元素E，其类型的第一个同级

E：最后一类

选择元素E，其类型的最后一个同级

E：独生子女

选择一个元素E，它是其父元素的唯一子元素

E：唯一类型

选择元素E，它是该类型的唯一同级

E：空

选择一个没有子元素的元素E（包括文本节点）

target伪类

E：目标

选择元素E，它是引用URI的目标

UI元素声明伪类

E：启用

选择一个启用的用户界面元素E

E：禁用

选择一个禁用的用户界面元素E

E：已检查

选择已选中或选中的用户界面元素E（单选按钮或复选框）

Negation伪类

E：没有

选择与简单选择器s不匹配的元素E

通用同级组合器

E〜F

选择一个元素F，之后是元素E

浏览器对新的属性选择器和常规的同级组合器的支持非常出色，因为它们可在几乎所有现代Web浏览器上使用。 大多数浏览器的最新版本均包含对新伪类的支持，但您可能需要包括旧浏览器（如Internet Explorer 6/7和Firefox 3.0）的后备功能。

新效果

尽管新选择器可能是最大程度减轻开发人员头痛的功能，但人们最想看到的增强功能是可用的闪亮新效果。 这些通过一系列新CSS属性得以促进，包括：

• 背景（现在支持多种背景）
• 背景剪辑
• 背景起源
• 背景尺寸
• 边界半径（圆角）
• 边框图像
• 边框颜色（渐变边框）
• 盒子阴影（在没有图像的盒子上投影）
• 盒子大小
• 不透明
• 轮廓偏移
• 调整大小
• 文字溢出
• 文字阴影
• 自动换行

您将在本教程结尾创建的示例HTML5 / CSS3网页将展示其中的一些新效果。

多列布局

CSS3多列布局允许文本分布在许多列中，就像您在报纸上看到的那样。 可以通过两种方式完成此操作，或者使用column-width属性（在此属性中定义每列的宽度）（列数由容器可用的空间确定），或者使用column-count（在其中定义）应该使用的列数。 然后，宽度将根据每列可用的空间而变化。

多列布局的其他功能包括column-gap属性，该属性允许开发人员定义使用column-width方法时列之间应存在的空间。 另一个有用的添加是column-rule属性，该属性允许在列之间放置边框样式的规则。 最后，还有column-space-distribution属性，该属性确定如何在列之间分配剩余空间。

Mozilla和WebKit浏览器当前支持多列布局。 目前，这些是通过分别以-moz或-webkit前缀的临时专有属性来实现的。 规范完成后，这些浏览器最终将移至CSS标准属性。

网络字体

Web字体实际上是为CSS2提出的，并且自版本5开始就可以在Microsoft Internet Explorer中使用。不幸的是，这需要使用专有的.eot（嵌入式开放类型）字体格式，并且没有其他浏览器供应商选择实现它。 结果，Web字体从未真正在基于CSS2的网站上流行。

但是，对于最新版本的Firefox，Safari，Chrome和Opera，您现在可以使用@ font-face规则在网页上使用任何许可的.ttf（TrueType）或.otf（OpenType）字体。 @ font-face规则的示例如下： @font-face { font-family: Alexa; src: url('Alexa.otf'); } @font-face { font-family: Alexa; src: url('Alexa.otf'); } @font-face { font-family: Alexa; src: url('Alexa.otf'); } 。

现在，您可以在自己CSS规则中使用此字体，例如： article p { font-family: Alexa, Arial, Helvetica, sans-serif; } article p { font-family: Alexa, Arial, Helvetica, sans-serif; } 。

请记住，字体就像图像，如果不是您自己的字体，则可能需要获得许可才能在Web上使用它们。 另外，您可以付费（或免费下载）一些免版税字体，这些字体可以根据需要包含在您的网页中。

其他新功能

CSS3还包括许多其他新功能，包括对新颜色值的支持，特别是HSL（色相，饱和度，亮度）和两个具有alpha属性的颜色值-RGBA（红，绿，蓝，阿尔法）和HSLA（色相，饱和度，亮度） ， Α）。 媒体查询可让您根据视口大小为不同的设备定义不同的样式。 例如，您可以为视口小于500像素的设备（例如智能手机，PDA或其他移动设备）提供特定样式。 CSS3的语音模块允许您控制屏幕阅读器的语音属性，包括语音音量，平衡，速率，压力等。

放在一起：示例HTML5 / CSS3页面

在此阶段，您必须着急处理并开始创建使用HTML5和CSS3必须提供的强大新功能的页面。 在本节中，您将创建一个包含许多这些新功能HTML页面。 本教程的这一部分将页面的开发分为以下几个小节：

• 基本HTML5页面结构
• 使用新的语义元素
• 介绍<video>元素
• Web表单增强
• <canvas>元素和2D绘图API

整个源代码将构建到一个名为index.htmlHTML文件中（请参阅可下载的资源 ）。 您可以从计算机上的任何位置打开此文件。 它不需要部署到Web服务器即可加载。 某些浏览器可能会向您发出有关在本地运行脚本的警告，因此请确保在询问时保持动态脚本功能不变。

在此过程中，页面CSS规则将添加到名为styles.css的外部样式表文件中。 您将在此示例页面中看到一些CSS3新属性的示例，例如border-radius，text-shadow和box-shadow。

无论如何，这足以完成客房整理工作，让我们开始使用一些HTML5！

基本HTML5页面结构

您可能已经知道，Web浏览器可以根据HTML文档中是否有有效的文档类型以不同的模式运行。 如果未找到有效的doctype，则浏览器将以怪癖模式运行，其中维护了一些非标准功能以实现向后兼容。 如果找到有效的文档类型，则浏览器将根据W3C和IETF标准以标准模式运行。

HTML5的doctype非常简单： <!doctype html> 。

您应该在创建的每个HTML5页面的顶部都包含此行。 让我们继续并定义index.html页面的基本轮廓。 清单1中提供了相关代码 。

清单1.基本HTML5文档结构

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>HTML5 Demo</title><link rel="stylesheet" href="styles.css" /><!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk
/html5.js"></script><![endif]--></head><body></body>
</html>

您可能会注意到，与最近的XHTML不同，HTML开头的<html>标记不再需要xmlns或xml:lang属性，仅lang属性就足够了。 同样，<meta>元素具有一个新的速记属性字符集，用于定义页面的字符编码。 值得指出的是，这些更改使它变得更容易并且减少了执行简单任务所需的代码量。 旧方法仍然完全有效。

您可能还想知道为什么<link>元素不具有type属性。 CSS是目前唯一受支持的样式表类型，如果未提供，则所有现代浏览器都将假定该类型为text / css，因此不是必需的。 同样，如果您愿意，提供type属性也是完全可以接受的。

清单1中的最后一点是<script>元素，该元素加载了外部托管JavaScript文件html5.js。 由于Microsoft Internet Explorer浏览器（甚至是版本8）不支持新HTML5元素，因此该浏览器无法识别<article>，<section>，<header>等。 它不仅不能识别这些元素，而且还可以防止对它们进行样式设置。 解决此问题的已知方法是使用JavaScript函数document.createElement()为每个标签创建伪元素。 该脚本将为每个新HTML5元素执行此操作，因此您不必担心它。 我强烈建议您在所有HTML5工作中都包含此脚本。

接下来，您将向页面添加一些新的语义元素，以创建页面的视觉结构。 您还将创建一些样式表规则，以使页面看起来更美观。

使用新的语义元素

为了说明应如何使用新的语义HTML5元素，现在将它们添加到index.html文件中。 The basic structure of these elements will adhere to the following outline:

• 标头
  
  • hgroup
• 导航
• 文章
  
  • 标头
  • 部分
    
    • 标头
• 页脚

As you can see, the page itself opens with a header, followed by a nav, then an article, and finally a footer. The header will have multiple headings using the hgroup element. The article itself will have a header as well as a section element, which too has its own header. The code for this is shown in Listing 2 , and should be added between the opening and closing <body> tag from Listing 1 .

Listing 2. Using HTML5 semantic elements

<header><hgroup><h1>Company Name</h1><h2>An example of HTML5 and CSS3 in action</h2></hgroup>
</header><nav><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li></ul>
</nav><article><header><time datetime="2010-01-12" pubdate><span>Jan</span> 12</time><h1><a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a></h1></header><p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p><section><header><h1>This is a section heading</h1></header><p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p></section>
</article><footer><p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

The code in Listing 2 should be relatively self-explanatory. The main <header> element consists of a <hgroup> element with two headings: a <h1> title and a <h2> subtitle element. The main <nav> element is an unordered list with three items, each a link to a fictitious page on the site. The <article> element contains its own <header>, with a <time> element for the publication date of the article. You will notice that this element contains an attribute datetime, which specifies a standardized form of the date of the post that is easy for computers to read. The content of the time element is "Jan 12," which humans will find easier to read. The pubdate attribute indicates that this is a publication date for the article in question.

Beneath the header is a normal HTML paragraph, and this is followed by a new <section> element, which contains a <header> with the section's title and a paragraph. You will create more sections for the additional areas of the page created in the remaining sections of this tutorial.

If you open this page in your browser, it won't look very pretty, as it has not yet been styled with CSS. Let's add some styles to make the page look a bit better. Add the code from Listing 3 to the styles.css file.

Listing 3. CSS styles for the new semantic HTML5 elements

* {font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}body {width: 480px; margin: 0px auto;
}header h1 {font-size: 36px; margin: 0px;
}header h2 {font-size: 18px; margin: 0px; color: #888;font-style: italic;
}nav ul {list-style: none; padding: 0px; display: block;clear: right; background-color: #666;padding-left: 4px; height: 24px;
}nav ul li {display: inline; padding: 0px 20px 5px 10px;height: 24px; border-right: 1px solid #ccc;
}nav ul li a {color: #EFD3D3; text-decoration: none;font-size: 13px; font-weight: bold;
}nav ul li a:hover {color: #fff;
}article > header time {font-size: 14px; display: block; width: 26px;padding: 2px; text-align: center; background-color: #993333;color: #fff; font-weight: bold; -moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px; float: left;margin-bottom: 10px;
}article > header time span {font-size: 10px; font-weight: normal;text-transform: uppercase;
}article > header h1 {font-size: 20px; float: left;margin-left: 14px; text-shadow: 2px 2px 5px #333;
}article > header h1 a {color: #993333;
}article > section header h1 {font-size: 16px;
}article p {clear: both;
}footer p {text-align: center; font-size: 12px;color: #888; margin-top: 24px;
}

Most of these CSS rules contain properties that have been available in CSS for a while now, but you may notice that the rule article > header time contains border-radius properties (including browser-specific properties for Mozilla and WebKit-based browsers). This adds a rounded corner to the date/time box on supported browsers, such as Firefox, Safari, and Chrome.

You'll also notice the use of the text-shadow property in the article > header h1 rule. Most modern browsers support this property.

The nice thing about both of the CSS3 properties introduced in this section is that they degrade gracefully. In other words, if the visitor's Web browser doesn't support these new properties, they will simply be ignored and the elements will be styled according to any other supported properties. The page including its current contents should look like the screenshot in Figure 2 (this is how it looks in Safari 4 on Mac OS X, at least).

Figure 2. Semantic HTML5 elements in action

Next, you will be introduced to the <video> element and how to use it to include a Theora video file in your HTML5 page.

Introducing the <video> element

Now you will add a video to the index.html page along with a set of browser-supplied playback controls. Please note that the video included in this sample is a Theora video, which can be played on Firefox and Google Chrome only. Safari currently only supports H.264 encoded videos. Add the code from Listing 4 beneath the last closing </section> tag from Listing 2 , but above the closing </article> tag.

Listing 4. Adding a video to the page

<section><header><h1>This is a video section</h1></header><p><video src="//www.double.co.nz/video_test/transformers480.ogg" 
controls autoplay><div class="no-html5-video"><p>This video will work in Mozilla Firefox or Google 
Chrome only.</p></div></video></p>
</section>

As you can see, you first create a new section where the video will be shown on the page. This has a header followed by the video itself. The video I'm using here is a trailer for the first Transformers movie and is loaded from an external Web site using the src attribute. The controls attribute tells the browser to display the browser's standard controls for video playback. And the autoplay attribute, well, tells the browser to start playing the video automatically.

Between the opening and closing <video> tags I have created a <div> element with the class no-html5-video , which will display a message to users who try to view the video in a browser that does not support the <video> element or does not support the Theora video codec.

Before you go and fire up the page in your browser, let's add some new rules to the styles.css page. Just add the rules from Listing 5 to the bottom of the file.

Listing 5. CSS rules for the video section

article > section video {width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {width: 480px; height: 40px; border: 1px solid #993333;text-align: center; color: #993333; font-size: 13px;font-style: italic; background-color: #F7E9E9;
}

These rules simply define the size of the video container element, as well as the error message for those visitors using browsers that do not support HTML5 video or the Theora format. If you open the page in Firefox or Chrome you should see something like the following (see Figure 3 ).

Figure 3. HTML5 Video in action

整洁吧？ Now try opening it in a browser like Internet Explorer or Opera. You should see an error like the one shown below in Figure 4 . Note that if you try to view it in Safari it may show the browser video player, but it will not play the video.

Figure 4. No HTML5 video support error

Next, you'll create a form that has some of the new Web form features such as placeholder text, autofocus, and the new input types such as range, datetime, and email.

Web form enhancements

One of the more underrated aspects of HTML5 is the introduction of several new form controls that will make developers' lives much easier when creating forms-based Web applications. At present, support for these new controls in terms of browser widgets and functionality is fairly sparse, but they degrade gracefully as regular text boxes so you can safely use them in your code now, and when browser support improves, the features will automatically enable.

Add the code from Listing 6 directly below the closing </section> tag for the video section you created in Listing 4 .

Listing 6. Adding a Web form

<section><header><h1>This is a feedback form</h1></header><p><form><label for="contact_name">Name:</label><input id="contact_name" placeholder="Enter your name" 
autofocus><br /><label for="contact_email">E-mail:</label><input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            <label for="contact_phone">Phone:</label><input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br /><label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br /><label for="contact_priority">Priority:</label><input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br /><input type="submit" value="Request Call"></form></p>
</section>

The first form element in Listing 6 does not have any type attribute, and as a result it will default to a text control. You'll notice that this has the placeholder text "Enter your name" and is set to autofocus. Supporting browsers will automatically switch focus to this element when the page has been rendered.

The next element is of type "email" and again contains a placeholder text value. The only browser that recognizes this type of input element as anything special is Opera, which displays a mail icon in the field to signify that it's an email field.

The next field of interest is the datetime field with the label "Callback on:". In supporting browsers, this will display a date and time picker. In Opera, this displays as two controls, a textbox with a datepicker and a spinner for the time.

Finally, you'll see a control of the type range, with min, max, and value attributes set. This control will be rendered by Safari, Chrome, and Opera as a slider, with a minimum value of 1, selected by default, and a maximum value of 5. Unsupported browsers will simply display this as a textbox with the text value set to 1.

Next, let's add some flair to what is otherwise a fairly dull and boring form. Add the following rules (see Listing 7 ) to your styles.css file.

Listing 7. Web form CSS rules

article > section form {border: 1px solid #888;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;    -moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;background-color: #eee;padding: 10px; margin-bottom: 30px;
}article > section label {font-weight: bold; font-size: 13px;
}article > section input {margin-bottom: 3px; font-size: 13px;
}

Looking at Listing 7 in more detail, you'll see that a border radius has been added to the form container to round the box corners. In addition, a box shadow has been added to this element as well as a soft grey background color and some padding.

First, let's look at the form as it appears in Opera, the browser that includes the most support for these new HTML5 Web form input types (see Figure 5 ).

Figure 5. Web form enhancements in Opera

You can see the mail icon next to the email field, and the new controls for the datetime field. Clicking the spinner drop-down field opens Opera's calendar widget, as shown in Figure 6 below.

Figure 6. Opera's calendar widget

You can also see a rather unattractive slider control as Opera has rendered it. Frustratingly, however, Opera does not support the border-radius or box-shadow properties, and as a result, neither of these effects has been applied to the form. Let's open it in Safari now to see what these CSS3 effects look like (see Figure 7 ).

Figure 7. Web Form enhancements in Safari

The WebKit-based Safari has correctly rendered the rounded corners and the box shadow effect, and it has a stunning but simple visual effect. The same effects would work in Mozilla Firefox and Google Chrome. You may notice that Safari supports the placeholder text feature and also implements a slider (a far prettier alternative to Opera's, it must be said) in place of the range input type. In the final section of this tutorial, you will learn how to use the <canvas> element and the 2D drawing API to create a simple smiley face bitmap image.

The <canvas> element and the 2D drawing API

To get started with <canvas>, you first need to add the element itself to the page. Directly beneath the code you added to index.html for the Web form in the previous section, add the code from Listing 8 .

Listing 8. Adding the <canvas> element to the page

<section><header><h1>This is an 2D Canvas section</h1></header><p><canvas id="my_canvas" width="480" height="320"></canvas><div id="no-canvas"><p>You need a Canvas-compatible browser to view this area.</p></div></p>
</section>

This code is relatively straightforward. You simply declare the canvas element, giving it a width, height, and a unique ID attribute. Mozilla and WebKit browsers have different opinions on whether the <canvas> tag should have a separate closing tag, but both will be rendered the same way so long as you do not place any code between the opening and closing tags. You will use JavaScript to display the no-canvas error message to those users who are using an unsupported browser in a moment.

Next, you need to add the JavaScript code that harnesses the 2D drawing APIs to create the image on the canvas. In the index.html file, just before the closing </head> tag near the top of the file, add the following code (see Listing 9 ):

Listing 9. Scripting the canvas element

<script>
function loadCanvas() {var canvas = document.getElementById('my_canvas');if(canvas.getContext) {var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(245,160,150,0,Math.PI*2,true);ctx.fillStyle = "rgb(255,255,204)";ctx.fill();ctx.stroke();ctx.fillStyle = "black";ctx.beginPath();ctx.arc(200,110,15,0,Math.PI*2,true);ctx.fill();ctx.beginPath();ctx.arc(280,110,15,0,Math.PI*2,true);ctx.fill();ctx.beginPath();ctx.arc(240,170,20,4,Math.PI*2,true);ctx.stroke();ctx.beginPath();ctx.arc(240,190,60,0,Math.PI,false);ctx.stroke();} else {document.getElementById('my_canvas').style.display = 'none';document.getElementById('no-canvas').style.display = 'block';}
}
</script>

Listing 9 adds a block of JavaScript to the page's head element, defining a function named loadCanvas . This function instantiates a variable named canvas by selecting the element with the unique ID my_canvas. It then uses an if statement to determine if it can get a canvas context from this element. If it can, then the <canvas> element is supported by the browser; if not, there is no support for the browser and the canvas should be hidden and replaced by the error message. This is taken care of in the else block of the if statement, towards the end of the function.

If canvas supported is detected, the function gets a 2D context named ctx, which is then used to draw shapes on the canvas. In this function, five shapes are created. First, the ctx.beginPath() function is called to start a path drawing. Next a full circular arc is drawn, with a radius of 150 pixels, near the center of the canvas, using the ctx.arc() function. The fill style is set to a yellow color, before the ctx.fill() and ctx.stroke() functions are called, creating a large yellow circle with a black outline. This is the main face.

The fill style is set to black as the next shapes to be drawn are the eyes. This time full circles are created using ctx.arc() which have a radius of just 15 pixels, and the ctx.fill() function is called to draw them.

The next block of code creates the nose, which is an arc that is not a full circle and is placed below and centered between the eyes that were just created. The nose is not to be filled, so the ctx.stroke() function is used instead.

Finally, a large semi-circle arc is stroked below the nose to create the mouth. The result should look the same in all browsers that support the <canvas> element (most modern browsers including Firefox, Safari, Chrome, and Opera—even Internet Explorer—can support it with the help of some clever JavaScript libraries).

The final change you need to make to index.html is to change the <body> element to call the loadCanvas() function when the window has finished loading. Simply replace the opening <body> tag with the following line: <body onload="loadCanvas();"> .

Finally, just add the following rules to the styles.css file to add some pretty box shadowing to the canvas container (see Listing 10 ).

Listing 10. Canvas CSS rules

article > section div#no-canvas {display: none;
}canvas {border: 1px solid #888;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;    -moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;background-color: #eee;
}

The final result looks like the image in Figure 8 .

Figure 8. The smiley face canvas

That concludes the sample page for this tutorial. In this section, you have used HTML5 and CSS3 to work with the new HTML5 semantic elements, harnessed some of CSS3's pretty new effects, watched video in the browser without any Flash plug-in, seen some new form widgets, and created a smiley face graphic on a canvas using JavaScript APIs.

摘要

This tutorial serves as a hands-on introduction to HTML5 and CSS3 development. HTML5 is very much at an early stage of development, and it will be interesting to see how the new features it proposes are adopted by the different browser vendors. At present, of the major browsers, Opera, Safari, Firefox, and Chrome are providing support for more enhancements with each release, and one would hope to see the bulk of HTML5 features supported by the end of 2010.

Several issues may stop HTML5 from becoming widespread in the near future, however. The first real issue is the lack of support of it from Microsoft's Internet Explorer, the most widely used Web browser on the market. It is unlikely that developers will be able to test any HTML5 features on IE until the first beta version of IE9 is released. At least for now, sites developed for HTML5 degrade quite gracefully on IE8, and with a bit of extra work, fallbacks can be put in place to provide workarounds for IE users.

Another major issue is the one surrounding video codecs and containers. The way things stand, the <video> element will not replace Flash video as the video standard for the Web. With different browsers backing different codecs, it's still much easier to use Flash than it is to encode your videos for Theora and H.264. Here's hoping that some kind of breakthrough is made this year on HTML5 video. In summary, HTML5 and CSS3 are exciting standards, and you can start future-proofing your Web sites to be compliant with these new specifications right now. Following the steps outlined in this tutorial, you should be well versed to move forward and explore some of the other interesting features HTML5 has to offer.

翻译自: https://www.ibm.com/developerworks/web/tutorials/wa-html5/index.html

html5和css3