HTML5 & friends thematic classification - Web 开发者指南 编辑

这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。

HTML

Audio 和 video

Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：在 Firefox 中使用audio和video  

Canvas

<Canvas>是HTML新元素，可以用于通过脚本（常用 JavaScript）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。

参考：

• Canvas 元素
• Canvas 教程

WebGL (独立规范)

webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 <canvas> elements. Reference: WebGL

Inline SVG and MathML

HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web. Reference:

• SVG
• MathML

New link relations

Link relations complement the <a> tag and specify why you're pointing to another page. Reference:

Web forms

Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4. Reference:

• Forms in HTML5
• Using files from web applications

Microformats (separate specification)

Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself. Reference: Using microformats See also: http://www.microformats.org

Semantic tags

The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics. Reference:

• Sections and Outlines of an HTML5 document
• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>
• <header>
• <mark>
• <nav>
• <section>
• <time>

JavaScript (separate specifications)

Client-Side Storage

Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data. Reference:

• Offline resources in Firefox
• DOM Storage

IndexedDB

IndexedDB is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes. Reference: IndexedDB

Web workers (separate specification)

Workers provide a simple means for web content to run scripts in background threads.  Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator. Reference: Using web workers

New events

In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again. Reference: Online and offline events

Drag and drop

Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. Reference: Drag and Drop

Protocol handler

It's fairly common to find web pages link to resources using non-http protocols. You can think of this as a desktop-based protocol handler.

Reference: Web-based protocol handler

Geolocation

The Geolocation API allows the user to provide their location to web applications if they so desire.  For privacy reasons, the user is asked to confirm permission to report location information. Reference: Using geolocation See also: Geolocation Specification

Focus attributes

The focus atributes let a script understand if an element has the focus of the user and then act accordingly. Reference: Focus management in HTML        

CSS (separate specifications)

New CSS selectors

The following page shows the CSS3 support in Firefox and the new elements for HTML5. Reference: Mozilla CSS support chart

Typography

The following pages show some of the typography attributes introduced by CSS3.

Text wrap:

• Word-wrap
• Text-overflow
• @font-face

Layout

Columns:

• CSS3 Multi-columns
• Flexbox

Visual

The following pages show some of the visual attributes introduced by CSS3.

• Opacity: opacity
• Hue Saturation Color: color
• Rounded Corners: border-radius
• Gradients: Using gradients
• Shadows:
  • text-shadow
  • box-shadow
• Background: background

Dynamic effects

CSS also introduces dynamic effects:

• Transitions: CSS transitions
• Animations: CSS animations
• Transforms: Using CSS transforms