Mozilla HTML5 Dashboard：HTML5新技術演示集合

jopen 10年前發布 | 20K 次閱讀 HTML5

　　HTML 如今已經進入 v5 時代，CSS 也進入了 v3 時代，JavaScript 也有了更炫的用法，隨著現代瀏覽器的演進，使得越來越多的 Web 應用可以呈現出令人驚嘆的效果。

　　Mozilla 在 HTML5 標準的制定和技術推廣方面做出了巨大的貢獻，HTML5 Dashboard 是 Mozilla 推出的一個 HTML5 技術演示項目，如果你想了解 HTML5、CSS3、JavaScript 中新增了哪些特性、這些特性有什么用以及如何用，那么 HTML5 Dashboard 將是一個非常好的途徑。

　　HTML5 Dashboard 地址：HTML5 Dashboard

261607162805380.jpg

　　HTML5 Dashboard 中的演示包括：

　　HTML5 演示：

  • 編解碼器

  • ContentEditable 屬性

  • HTML5 解析器

  • 語義標簽：<!DOCTYPE html><header> <nav><section><article><aside><footer>

  • <audio>標簽

  • 表單元素和屬性

  • Audio Data API

  • WebGL
    • </ul>

    　　CSS3 演示：

    • Transform（轉換）屬性

    • Transition（過渡）屬性
      • <li>@media Queries 屬性</li>

    • 結構性偽類

    • Border Radius（邊框半徑）屬性

    • Border Image（邊框圖片）屬性

    • Gradients（漸變）屬性

    • 多重背景

    • 列布局

    • box-shadow（盒陰影）屬性

    • Text Shadow（文本陰影）屬性

    • any ()、calc ()

    • image-rect

    • -moz-element

    • 蒙版、過濾器、修剪路徑
      • <li>@font-face、font-feature-settings</li>

    • WOFF（Web 開放字體格式）
      • </ul>

      　　此外還包括 JavaScritp、SVG 相關屬性的演示和教程，以及 Web 應用性能和安全方面的知識。

      　　這些演示項目都是開源的，源碼托管在 Github：https://github.com/paulrouget/html5dashboard/

      　　更多演示

      　　Mozilla HTML5 Dashboard 是最新 HTML5 技術的演示集合，如果想了解這些技術的具體應用，可觀看 Mozilla Demo Studio，目前該項目中共包含 843 個演示，以及相關的源碼。

      　　開發者如果有 Web 開放技術相關的演示，也可以提交，提交地址：https://developer.mozilla.org/zh-CN/demos/submit

      　　更多信息