HTML5、CSS3 及相关技术

新兴 web 标准的快速入门指南

目前有很多技术都集聚在 “HTML5” 旗帜之下。本文将会为您解释清楚,分清哪些属于 HTML 规范,哪些不属于。此外,本文还会介绍一些技术,例如众多的 CSS3 模型。

Rob Larsen, 界面架构师, IBM

http://www.ibm.com/developerworks/i/p-rlarsen.jpgRob Larsen 拥有超过 11 年的构建和设计网站和 web 应用程序经验。目前,他是 Isobar 的一名界面架构师,使用 HTML5、CSS3 和其他新兴技术为一些世界最大的品牌服务。Rob 在他的博客 HTML + CSS + JavaScript 上撰写关于 web 和 web 技术的文章。



2012 年 6 月 11 日

Web 标准发展和市场

现在是成为 Web 开发人员的绝佳机会。经过一段时间的休眠之后,标准机构和浏览器供应商在过去几年中显得异常繁忙,他们正忙于设计各种令人振奋的新兴技术。而开发人员则拼命抓住这次机会,稳步推出各种演示程序和成熟的应用程序。受此趋势影响,一些公司如 Google 和 Apple 推出了符合标准的移动浏览器,而这些浏览器的畅销又推动这些公司采用新技术来推广其产品和服务。还有一些媒体也乘此机会对标准进行大肆炒作,使其超出了普通 Web 开发人员和浏览器供应商的技术范畴。

当然,这样的争论也是有好处的。人们关注标准,这对业内每个人都有积极影响。从这个角度来看,持续使用统称,特别是 HTML5,作为 “新兴 Web 技术” 的简称就很有效。这能让不懂技术的人迅速了解(大致地)目前在标准方面开展的激动人心的工作。

有趣的是,甚至 W3C 也有所行动,使用 HTML5 及其标志(见 图 1)来宣传 “网络平台” 。

图 1. HTML5 标志
The HTML5 logo from the W3C

而不利的一面是,目前对规范方面所做的工作,加上这种快速而宽松的标记方式,已经在开发人员社区之中造成对规范本身认识的混乱。除非您对这项工作很了解,否则就根本搞不懂这些新出现的缩略词代表什么。

本文将为您澄清这些关于现存标准方面的混淆。本文概括了主要的标准,并提供了对技术本身的简易指南。


HTML5、“HTML5” 和 HTML:活的标准

关于本规范最重要的一点,毫无疑问,就是对 HTML 的最新版本。无论是好是坏,“HTML5” 已经成了所有新兴技术的统称。JavaScript 开发人员 Peter Paul Koch 在 2010 年 1 月的博客中简要描述了这种现象。“只要是又新又酷的,都叫 “HTML5”。

尽管这句话描述了很多人的想法,而且抓住了这几年以来发展的 HTML5 “品牌” 的本质,但对于构建网站的人来说,需要透过这个总称,深入挖掘炒作背后的实际技术规范。

这里说明一下,Web Hypertext Application Technology Working Group (WHATWG)(目前推动 HTML 标准的工作小组 )已经放弃了 W3C 长期实行的 “快照标准开发流程”。虽然该小组与 W3C 紧密合作创建 HTML5 快照规范,但他自身却主要关注将 HTML 简化为 “活的标准”。

先将语义命名在一边,我们深入看看 HTML5 快照规范中的实际技术。要全面深入了解相关文档,请查阅 参考资料 一节,其中包含本文中提到的所有其他标准文档的链接。对于此规范,由于最近 WHATWG 发布了 Web 开发者专门版本;由此删除了上百页仅供浏览器供应商参考的信息,这使得理解本文档变得更加容易。


HTML5 快照(snapshot)规范中的技术

在深入了解这些内容之前,要知道 WHATWG 将其称为活的标准并非玩笑之言。这是不断变化的目标。有一些技术,如 Canvas 2D API,已经包含在核心规范中,后来又形成自己的文档。

新的语义元素

在此规范的所有新内容中,最快得到采用的大多是新的语义元素,如 HeaderFooterSection 以及 Aside。其中很多是根据一名编辑 Ian Hickson 的网络调查中的通用模式设计出的。这在 HeaderFooter 中可以清楚看到,它们对应于网络中常见的 id="header"id="footer" 模式。还有另外一些,像 hgroupasidefigure,是现有 HTML 元素的逻辑附注和增强。

尽管具体浏览器对新元素的支持有限(例如,浏览器不会对 header 进行特殊处理),新语义元素的使用正变得越来越普遍。开发人员正在研究使用新元素的最佳实践和通用模式。例如,有些老版本的 Windows® Internet Explorer® 处理未知元素时会有问题,而一些库,如 Modernizr 或 HTML5Shiv 代码就能实现新元素跨浏览器使用。

新的大纲算法

在了解新语义元素之前,先介绍一个新的大纲算法,它能生成更加灵活的文档大纲。除了标准的从 H1H6header 元素,HTML5 还引入了几个新的分段元素,有 sectionarticleasidefooterheadernav。这些元素将文档大纲分成新的段落。除了熟悉的 header 元素和在页面上添加多个 H1 元素的能力,现在有了更多的选择可以创建语义丰富的结构化文档。

在开发过程中使用如 HTML5 outliner(h5o)书签的工具对于处理新算法会很有帮助。这些新的功能可以让习惯查看大纲的人在整个开发过程中看到大纲形式的文档,从而使问题变得更加清晰。

视频和音频

在浏览器中播放音频和视频非常普通,很容易被人遗忘,在 Web 发展历史中,却没有原生方法来完成这项功能。这时新的 HTML5 音频和视频元素出现了。

从规范角度看,用浏览器本身的 API 来播放音频和视频比较直接,又符合设计。所有熟悉替代元素,如 IMG 的工作方式的人都会知道如何嵌入视频和音频。相应的 API 也很简单,如 清单 1 所示:

清单 1. 一个简单的视频样例
<-- the HTML -->
<figure>
<video src="_assets/video/sample.webm" controls autoplay
	width="400"
	height="300"
	id="video-sample"
	data-description="sample web video">
	your browser does not support the video tag </video>
<legend>This is a nice, sample web video</legend>
</figure>
//the JavaScript
var video = document.getElementById("video-sample"),
	toggle = document.getElementById("video-toggle");
toggle.onclick = function() {
	if (video.paused) {
		video.play();
		toggle.className="playing"
	} else {
		video.pause();
		toggle.className="paused"
	}
};

不幸的是,使用以上代码在所有主要浏览器中播放同一段视频目前还很困难。浏览器供应商面对的是两方不同的代码,实际情况就变得复杂很多。目前的情况是 Apple 和 Microsoft 坚定支持有专利担保的 h.264,而 Google、Opera 和 Mozilla 则拥护免费开放无版税的视频格式,如 WebM,网络上的视频格式比过去只有 Adobe® Flash® 一家的时代复杂多了。

表单元素和输入类型

HTML5 提供了几个新的 form 元素来更好地支持常见的输入任务。像 EmailURL 这样的格式能够在浏览器中正常使用。全新的表单输入元素有 range(用于滑块)、date (用于日期选取器)和 color (用于颜色选取器)。

不幸的是,根据 Peter Paul Koch 的调查报告显示,除了 Opera 和 Research in Motion,其他浏览器供应商采用这些技术的行动缓慢。这很遗憾!

尽管有些元素,如画布,很华丽而且很 “酷”,但很多网站利润还是来自表单。对他们而言,好的表单代表好的网站。对用户见到的内容进行增强,会获得实际收益。

离线 Web 应用程序

离线 Web 应用程序定义了一个应用程序缓存声明,它允许网站或应用程序开发人员设置一组文件,可以在不连网的情况下运行应用程序。此规范与网络存储规范的数据存储功能相结合,能够提供强大的离线功能。

内联(inline)内容编辑

HTML5 定义了新的 API 以简化内容编辑。尽管已经有熟知的 JavaScript 实现,但本地 API 能提供连续的有效的用户体验。

拖放

新的拖放 API 可以通过从桌面拖放到 Web 的方式上传文件。此功能的实际示例可在 Google Gmail 产品中看到,在 Mozilla Firefox 和 Google Chrome 中都可以实现。

历史 API

Ajax 时代就有可用性一致的问题,富含 Ajax 的应用程序会破坏标准历史栈。尽管现在有基于脚本的解决方案和通用模式来处理动态状态,但 HTML5 历史 API 与这些临时方案相比,却是可喜的改进。HTML5 在以上功能的基础上还增加了导航历史的功能,它包含了一个方法,可以将条目添加到历史中,并在用户点击后退按钮时作出适当响应。

微数据(Microdata)

HTML5 定义了一个标准化方法来标记 HTML 文档主体的元数据。对于使用过微格式(如 hCard 和 hCalendar) 的人来说,对微数据会很熟悉,但其中还有一些重要的不同之处。最重要的是,微数据将相关信息从此前微格式控制的类移到了新的 itemprop 属性中。

另外,此标准添加了其他能精确定义微数据格式的属性,以及一个可以直接通过程序访问微数据的方法:

  • itemscope 设置微数据段的范围。
  • itemtype 提供了定义可用的具体数据格式的 URL。
  • document.getItems() 提供对顶层微数据条目的访问;此方法会返回一个 NodeList,其中包含对应于可选参数 itemType 的条目,如果没有参数,则返回所有类型。

HTML5 中属于单独的规范和工作组的技术

多项技术已经成熟,脱离了 HTML5 规范,形成自己的文档。还有其他一些,也从 HTML 脱离出来,归类为 “Web 平台”。

SVG

也许归类到 HTML5 大杂烩中最奇怪的技术就要算 Scalable Vector Graphics (SVG) 了。SVG 是用 XML 定义的矢量图形语法。自从 1999 年起,就由 W3C 开始开发 SVG,因此将它作为 “新” 内容或 HTML5 一部分的一个延伸。

但依然值得为重新发掘 SVG 而感到高兴,因为它实际推动了标准。主要浏览器的最新版本都提供或多或少的支持,而有些库,如 Raphael.js 中还有支持旧版本 Internet Explorer 的 API。

Canvas 2D 环境

HTML5 时代早期的明星,Canvas 元素和相关 API,作为 Apple 中对 HTML 的扩展,又有了活力。如前所述,它一开始作为主要的 HTML5 规范的一部分。在 W3C 中,它在单独文档中。

Canvas 2D 环境提供了可在浏览器中绘制二维图像和位图的脚本化接口。目前的应用已非常广泛,从图形库到游戏引擎,它已经成为用来发布用户前台的流行系统,甚至成为过程编程语言转换成 JavaScript 的转接口。由于目前对探索 Canvas 的关注,ExplorerCanvas 库已支持旧版 Internet Explorer。

地理位置

Geolocation API 是检索设备地理位置的标准接口。它提供了一个 window.geolocation 对象,此对象中又提供了通过使用地址信息服务器来找到设备位置的方法。位置信息可以从很多数据源获取,包括 IP 地址、设备 GPS、Wi-Fi 和 Bluetooth MAC 地址、无线射频 ID(RFID) 和 Wi-Fi 连接位置。

Web 存储

Web Storage 规范定义了一个 API,可对 Web 浏览器的中的键-值进行连续存储。 此规范与 cookies 的功能类似,但有了很大的改进。

存储有两种形式:sessionStoragelocalStorage。每一个都提供了类似的方法来管理条目(setItem()removeItem()getItem()) 和清除整个存储(clear())。Session 存储是用来保存当前浏览器会话。Local 存储用来对网站收藏或其他用户数据进行长期存储。还可以监听存储事件,以便监控存储活动并对存储活动作出响应。

对于现在就想体验此功能的用户,Persist.js 库提供了完善的跨浏览器解决方案可在所有主要浏览器中使用 Web 存储或等效的功能。

还有另外两个规范可与 Web Storage 同时使用:

  • IndexedDB 是一个相关的绿色规范,它提供了更强大的在浏览器中长期存储数据的功能,其中包括查询数据库,更重要是,能够保存复杂对象而不仅是简单的字符串。
  • Web Workers 是功能超强的规范,它定义了能在主页运行 JavaScript 同时让用户在底层运行脚本的 API。此功能可以让开发人员将时间较长的处理任务卸载到底层进程,从而释放浏览器,可在主要环境中进行持续交互。

文件 API

此规范提供了操作 Web 应用程序中文件的 API。加上其他一些新兴和成熟技术,如 XMLHttpRequest、拖放和 Web Workers,File API 能够提供比目前可用技术更强大的 Web 和桌面交互功能。 与简单文件上传输入元素将文件传递给 Web 服务器进行处理或复杂的 Flash 界面不同的是,File API 允许直接访问浏览器文件数据。

WebSocket

WebSocket API 可以通过一个 TCP 端口在 Web 浏览器和 Web 服务器之间同时双向通讯。在实现方面,WebSocket 还可以走得更远一些,它支持最新版本 Firefox、Opera、Chrome 和 Apple Safari,但已发现的安全漏洞使得它在 Firefox 和 Opera 中默认禁用。

服务器发送的事件

此规范定义了一个 API,可以打开一个 HTTP 连接,以 DOM 事件形式接收来自服务器的推送通知。本规范改变了目前在固定时间间隔轮询服务器进行更新的模式,节约了大量不需要的请求和相关的处理器时间和带宽。

WebGL

Web-based Graphics Library (WebGL) 增强了JavaScript,它具有在浏览器中创建三维交互图形的功能。WebGL 是 canvas HTML 元素的上下文。此规范与 2011 年 3 月推出 1.0 版,由非营利的 Khronos Group 管理。

XMLHttpRequest Level 2

XMLHttpRequest Level 2 规范通过一些新特性增强了核心 XMLHttpRequest 对象。其中最有趣的大概就是 Cross-Origin Resource Sharing 了,它一种绕过同源安全策略的安全方式,可以实现 XMLHttpRequest 与第三方服务器交互。目前,XMLHttpRequest 只能与相同协议的服务器通讯。

随着 JSON 和 JSONP 的流行,跨源共享的需要不再像以前一样紧迫,但这会在网站和 mash-up 架构方面显现以前受限于同源策略的机会。


CSS3 的模块化方法

对于最新版本的 CSS,工作小组决定不再使用单独的整体规范,而是将其分为单独的文档,称为模块。每个模块都在 CSS,Version 2(CSS2) 中加入了新功能或扩展了一些特性。

有些模块已经很成熟,已经开发了 5 至 10 年(也可能更多年)。在 W3C 的完整性层级中有 推荐建议候选建议。这表示已经基本完成。我们再看一些更有趣、更重要的模块。

选择器

CSS 不能没有选择器。选择器用于对 HTML 中的元素进行风格设置。

此模块包含 CSS, Version 1 (CSS1) 和 CSS2 中现有的选择器,并扩展了一些新特性。添加的内容主要是一些结构化伪类,如 E:empty,它匹配空元素,还有 E::nth-child(n) ,它匹配某个元素的第 n 个子节点。还有其他新的选择器包含否定伪类,如 E:not(s),它否定一个简单选择器,UI 元素声明伪类,如 E:enabledE:disabled,它们匹配启用或禁用的元素。

流行 JavaScript 库如 jQuery、Dojo 和 YUI 的用户会熟悉新的 CSS, Version 3 (CSS3) 选择器,因为他们以前就包含在库的 CSS 选择器引擎中了。

颜色

颜色设置了 CSS 中与颜色相关的方面,包括透明度及颜色值记号。新的颜色值包括红、绿、蓝 + 一个 Alpha 通道 (RGBA) 以及色相、饱和度、亮度 + 一个 Alpha 通道 (HSLA)。

背景和边框

背景和边框定义了背景属性,如 background-colorbackground-image,以及定义了边框的风格。此模块中的新功能包括拉伸背景图片、边框图片、方框阴影,还有在 Web 历史上需求最多的功能,设置方框圆角。

多列布局

多列布局允许开发人员将内容放入灵活定义的列中。

媒体查询

媒体查询是对 CSS 中 @media 规则和 HTML 中 media 属性的增强,它添加了一些参数,如显示大小、颜色深度和长宽比。 此模块可以让开发人员更具体地将内容设置成不同大小,以及设置一个类中各个设备的功能。

媒体查询在 Ethan Marcotte 的 Responsive Web Design 中有着重要作用,这是流行文章 A List Apart 及后续书籍的主题 。


新的仍在开发的模块

CSS 中有着让人激动的、特别实用的成熟模块,但更多的是目前还处于设想阶段的模块。以下是一些非常值得关注的样例。

CSS Fonts Module Level 3

Fonts Level 3 是 CSS 中原有的字体属性的扩展。Level 3 包括流行的 @font-face 规则,它能通过使用 CSS 规则直接将用户字体嵌入文档来更大程度控制 Web 类型。

CSS 2D Transforms Module Level 3

2D Transformations 模块引入一个新的属性,可以对方框进行旋转、平移、缩放和其他变换。

CSS 2D Transforms Module Level 3

3D Transforms是与 SVG 联合开发,它扩展了 2D Transforms 模块,增加了透视变换。

CSS Animations Module Level 3 和 CSS Transitions Module Level 3

Animations 模块可以将动画指定为元素,设置动画属性、动画时间,以及动画过程中变化的单元。Transitions 模块定义了伪类之间转换的动画属性。一个转换的例子就是元素进入或离开 :hover 状态。


放眼未来

图 2. 我已经看到了未来。
I've seen the future. It's in my broweser.

Web 标准世界现状将会结束。这确实是个激动人心的时刻,尤其是目前技术飞速发展,有着众多的演示及产品代码可用。开发人员还在忙于将新技术特性文档化和创建库来支持老的浏览器,大量机会已经在首次体验这些新技术的过程中产生。这些第一手体验毫无疑问是触摸 Web 未来的最好方式。所以,如果您想知道未来如何发展,就该仔细了解现在发生了什么。

参考资料

学习

  • HTML5 标志:阅读有关 Web 平台的内容,下载 HTML5 标志。
  • HTML5 means whatever you want it to mean”(QuirksBlog,2010 年 1 月):Peter-Paul Koch 讨论关于 HTML5 规范究竟是什么的困惑。
  • HTML is the new HTML5”(WHATWG 博客,2011 年 1 月):这条博客讨论了 “HTML5” 的新开发模式,其中技术未版本化,但含有不断演化的技术定义文件。
  • HTML5 specification for Web developers”(WHATWG,2011 年 2 月):本规范关注的重点是可读性和易访问性。与完整的 HTML 规范不同,“Web 开发人员版本” 删除了只有浏览器供应商需要了解的信息。
  • The new input types”(QuirksBlog,2011 年 3 月):阅读新输入类型兼容性表。
  • HTML Canvas 2D Context”(W3C ,2011 年 2 月):了解更多关于 HTML canvas 元素的 2D Context 的内容。
  • cufón:了解 cufón 提供的用户字体。
  • Web Storage”(W3C,2011 年 4 月):了解更多关于此 API 用于 Web 客户端键值对数据的持续性数据存储的内容。
  • Web Workers”(Apple Computer,Inc.,Mozilla Foundation, and Opera Software ASA,2011 年 4 月):阅读此 API 能让 Web 应用程序作者能在主页运行程序的同时在后台运行脚本的内容。可以进行类似线程的操作,同时以消息传递作为协同机制。
  • File API”(W3C,2010 年 10 月):了解更多关于此 API 在 Web 应用程序中表现文件对象,以及以编程方式进行选择和访问数据的内容。
  • The WebSocket API”(W3C,2011 年 4 月):了解更多关于此 API 的内容,它能让 Web 页面使用 WebSocket 协议与远程主机进行双向通信。
  • Experiment comparing Upgrade and CONNECT handshakes”(IETF,2010 年 11 月):阅读会对 WebSockets 造成有限支持的安全问题。Chromium Code Reviews 提供了更多关于安全问题的细节信息。
  • Server-Sent Events”(W3C,2011 年 4 月):了解更多关于此 API 的内容,它可以打开一个 HTTP 连接,以 DOM 事件形式接收来自服务器的推送信息。
  • WebGL Specification”(Khronos Group,2011 年 2 月):此规范描述了额外的呈现环境以及对 HTML5 画布元素 [CANVAS] 的支持对象。此环境可以使用一个完全符合 OpenGL ES 2.0 API 的 API 来呈现。
  • XMLHttpRequest Level 2”(W3C,2011 年 3 月):XMLHttpRequest Level 2 规范通过一些新特性,如跨源请求、进程事件以及对发送和接收字节流的处理增强了 XMLHttpRequest 对象。
  • Selectors Level 3”(W3C,2009 年 12 月):了解更多 CSS1 和 CSS2 中已有的选择器, 以及 CSS3 和其他语言中的新选择器的内容,您可能会用得到。
  • CSS Backgrounds and Borders Module Level 3”(W3C,2011 年 2 月):阅读 CSS level 3 中关于边框和背景的内容。
  • CSS Multi-column Layout Module”(W3C,2011 年 4 月):此规范描述了 Web 样式表语言 CSS 中的多列布局。 通过使用此规范中描述的功能,可以将内容通过空挡和规则分隔成多列。
  • Media Queries”(W3C,2010 年 7 月):了解媒体查询如何通更精确地标记样式表来扩展媒体类型的功能。
  • Responsive Web Design”(A List Apart,2010 年 5 月):设计师曾经对精确布局的打印效果感到不满,为 Web 上不同的用户环境破坏其设计效果感到遗憾。Ethan Marcotte 主张我们转变设计思想,适应这些限制:使用流动网格、可调图像和媒体查询,他向我们展示如何通过反应性 Web 设计来拥抱这些 “变化莫测的情况”。
  • CSS Color Module Level 3”(W3C,2010 年 10 月):此规范描述了前景色和成组透明度的颜色值和属性。其中包含 CSS level 2 中的属性和值,还有一些新的值。
  • CSS Fonts Module Level 3”(W3C,2011 年 3 月):此 CSS3 模块描述了如何设置字体属性以及如何动态加载字体资源。
  • CSS 2D Transforms Module Level 3”(W3C,2009 年 12 月):理解 CSS 2D Transforms 如何将元素通过 CSS 呈现并转换到二维空间。
  • CSS 3D Transforms Module Level 3”(W3C ,2009 年 3 月):了解 CSS 3D Transforms 如何扩展CSS Transforms,让元素通过 CSS 呈现并转换到三维空间。
  • CSS Animations Module Level 3”(W3C,2009 年 3 月):理解 CSS Animations 如何使作者能让 CSS 随时间变化。
  • CSS Transitions Module Level 3”(W3C,2009 年 12 月):了解 CSS Transitions 如何让 CSS 属性值在指定时间段内平稳变化。
  • Geolocation API Specification”(W3C,2010 年 9 月):本规范定义了一个提供对与托管设备相关地理位置信息进行校本化访问的 API。
  • HTML5 Cross Browser Polyfills:现在就了解能帮助您使用新标准的库和代码。
  • Session history and navigation”(WHATWG,2011 年 4 月):了解更多关于新的 History API 的内容。
  • Twitter 上的 WHATWG:在 Twitter 关注 WHATWG。
  • Twitter 上的 W3C:在 Twitter 关注 W3C。
  • Twitter 上的 Rob Larsen :在 Twitter 上关注作者 Rob Larsen。
  • Twitter 上的 developerWorks :在 Twitter 关注 developerWorks。
  • developerWorks 的 developerWorks 中国网站 Web 开发专区 专门提供关于各种 Web 解决方案的文章。
  • 随时关注 developerWorks 上的 developerWorksLive! 技术讲座
  • developerWorks 演示中心:观看包含面向初学者的产品安装和设置,以及为经验丰富的开发人员提供的高级功能的演示。
  • 查看 HTML5 专题,了解更多和 HTML5 相关的知识和动向。

获得产品和技术

  • Processing.js:下载 Processing.js,它是流行的专门用于 Web 的 Processing 可视化编程语言的姊妹项目。
  • Explorer Canvas:使用 Explorer Canvis 为 Internet Explorer 添加 Canvas 支持。
  • PersistJS:下载 PersistJS,他是客户端 JavaScript 一致性存储库。
  • Modernizr:了解更多关于 Modernizr 的内容,并下载 Modernizr。Modernizr 可以向 HTML 元素添加类,从而可以针对您的样式表中特定的浏览器功能。
  • HTML5Shiv:下载 HTML5Shiv。
  • HTML5 outliner (h5o):下载 HTML5 outliner 书签。目前的 HTML5 草案定义了一个非常精确的算法,可以生成 HTML 文档的大纲。
  • Raphael.js:下载 Raphaël,它是一个小的 JavaScript 库,可以简化关于 Web 上图形向量方面的工作。

讨论

  • Scalable Vector Graphics”(W3C,2010 年 7 月):本规范定义了 Scalable Vector Graphics (SVG) 的特性和语法,SVG 是描述 XML 中二维向量和混合向量/光栅图形的模块化语言。
  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=820656
ArticleTitle=HTML5、CSS3 及相关技术
publish-date=06112012