HTML 如今已经进入 v5 时代,CSS 也进入了 v3 时代,JavaScript 也有了更炫的用法,随着现代浏览器的演进,使得越来越多的 Web 应用可以呈现出令人惊叹的效果。
Mozilla 在 HTML5 标准的制定和技术推广方面做出了巨大的贡献,HTML5 Dashboard 是 Mozilla 推出的一个 HTML5 技术演示项目,如果你想了解 HTML5、CSS3、JavaScript 中新增了哪些特性、这些特性有什么用以及如何用,那么 HTML5 Dashboard 将是一个非常好的途径。
HTML5 Dashboard 地址:HTML5 Dashboard
HTML5 Dashboard 中的演示包括:
HTML5 演示:
-
编解码器
-
ContentEditable 属性
-
HTML5 解析器
-
语义标签:<!DOCTYPE html><header> <nav><section><article><aside><footer>
-
<audio>标签
-
表单元素和属性
-
Audio Data API
-
WebGL
CSS3 演示:
-
Transform(转换)属性
-
Transition(过渡)属性
-
@media Queries 属性
-
结构性伪类
-
Border Radius(边框半径)属性
-
Border Image(边框图片)属性
-
Gradients(渐变)属性
-
多重背景
-
列布局
-
box-shadow(盒阴影)属性
-
Text Shadow(文本阴影)属性
-
any ()、calc ()
-
image-rect
-
-moz-element
-
蒙版、过滤器、修剪路径
-
@font-face、font-feature-settings
-
WOFF(Web 开放字体格式)
此外还包括 JavaScritp、SVG 相关属性的演示和教程,以及 Web 应用性能和安全方面的知识。
这些演示项目都是开源的,源码托管在 Github:https://github.com/paulrouget/html5dashboard/
更多演示
Mozilla HTML5 Dashboard 是最新 HTML5 技术的演示集合,如果想了解这些技术的具体应用,可观看 Mozilla Demo Studio,目前该项目中共包含 843 个演示,以及相关的源码。