资讯频道 → Web前端
阅读更多

2顶
1踩

Web前端

原创新闻 Mozilla HTML5 Dashboard：HTML5新技术演示集合

2014-03-26 13:38 by 副主编 wangguo 评论(0) 有15245人浏览
html5 css3 JavaScript Mozilla 演示

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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个演示，以及相关的源码。

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

更多信息


Via HTML5 Dashboard
  • 大小: 81.3 KB
2
顶
1
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 对个人Blog的定制

    今天身体不太舒服,什么都不愿意做.就对自己的Blog做了一些定制,参考了myhan的这篇文章.http://blog.csdn.net/myhan/archive/2004/08/12/72351.aspx 头痛

  • 定制私人博客

    导航栏：http://www.php100.com/html/plugin/pic/2013/0911/544.html   CSS3 Maker 这款工具[3] 非常强大，可在线演示渐变、阴影、旋转、动画等非常多的效果，并生成对应效果的代码， CSS3 Generator 非常不错的各种 CSS3 代码生成器，支持圆角、渐变、旋转和阴影等众多特性，带预览效果。 CSS3 Please...

  • 博客园定制化

    设置博客主字体和风格 更改的地方如下代码，主要改的为字体换为了微软雅黑 body { font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 2; color: #555; } 博客标题 更改的地方主要有: 1.重新改了一下...

  • 博客园代码定制

    博客园代码定制 版本：2019-08-11 本文基于Simple Memory模板，且已获取CSS和JS权限，此版本并非最终版本。 如有错误请指出，代码开源可以修改完善，仅用于学习交流，转载时请注明出处！ 本文记录了对博客园主页优化的尝试过程以及相关的CSS源码。 在此之前默认已在“管理-选项”部分设定好了每页显示的内容，在“管理-设置”部分进行下列设置。 Part ...

  • 私人博客定制

    项目背景 可行性方面 需求分析： 详细设计： 数据库设计 博客管理API的设计 标签相关API 服务器端的实现 对数据库操作进行封装 对服务器操作进行封装 客户端实现 具体操作 使用markdown 具体实现 测试 项目效果展示 维护 完整代码 项目背景 现在的时代信息越来越多，我们每时每刻都在学习和接受各种信息，我们要怎样保存这些信息...

  • 学习HTML 5编程和设计

    原文转载自： http://coolshell.cn/articles/4795.html ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码很不错的 HTML5 Dashboard – Mozilla，

  • 使用 HTML5 和 CSS3 创建现代 Web 站点

    假定您知道什么是 HTML 元素或标记、属性表示什么、HTML 标记的基本语法、Web 页面的常规结构等等。关于 CSS，您应该熟悉元素、类、以及基于 ID 的选择器、CSS 特性的语法以及如何使用内嵌或外部样式表在您的 Web ...

  • GitHub 上的前端项目收集

    整理收集了 GitHub 上优秀的前端项目，包括：工具，优质资源，测试工具，...为学习一些新的框架扫平了语言障碍。 toby 超级赞的收集与协作管理书签的chrome插件，前端开发应该都会用chrome。全球超过10W+的用户。 m

  • 开源中最好的Web开发的资源

    转 http://blog.sina.com.cn/s/blog_4d8713560101a6ht.html

  • 优秀开源Web开发资源大集合

    学习HTML 5编程和设计★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 ... 源码很不错的 HTML5 Dashboard – Mozilla，效果很炫。WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。★ Stack

  • 定制和我一样的博客园主题

    有园友问我的博客园的主题怎么弄的，我答应了要发一篇博文分享一下我的博客主题配置。其实是很简单的，相信懂 CSS 的人都能自己搞，但如果你懒得花时间，正好可以直接复制我写好的配置代码。 PS：按照博客园首页文章筛选的规则，这篇文章不应该放在首页，毕竟没有什么技术含量，几乎只是分享我写好的 CSS 代码。但还是希望博客园管理员例外一次，让有需要的人看到。 1、先择模板 先进入博客园的设置...

  • 定制一套属于自己的博客样式

    前言 　　根据最近技术编程网站排行榜单，博客园还是拥有不错的知名度和影响力的，作为一个技术分享的平台，能在其拥有一套属于自己独特风格的样式，很关键！ 入门 注册博客园的账号后，博客是要自己申请的，找到申请人口，告诉园长大大自己要开通博客的小心愿（注意：一定不要Copy，不然可能会不通过的），审核通过后会收到邮件通知的，大概需要半天时间。如果你已经是一位高手了，请直接看下一节进阶篇。 ...

  • 30分钟玩转Blog定制

    本来还真打算要放弃CSDN的Blog了,但是看着自己辛辛苦苦积累下来的内容,真的有点舍不得.而且,换了Blog就好像换了手机号码,还要再通知朋友们.想来想去,总是觉得有些成本过高.不过在找其他的Blog服务提供商的同时,看到了不少漂亮的Blog,于是心中为之一动:不如自己也先把Blog打扮起来吧.于是就有了这个花费了5个小时全新打造的Blog.——当然,这是因为我花费了很多时间在找一些合适的东西上

  • 个性首页定制

    经常会遇到浏览器的收藏夹不够用的情况，而且也不能对常用的网站进行分类处理。 下面是一个自定义首页网站： 网址：http://wmksj.com/daohang.html 第一步，如果没有账号，先注册账号并登录。 第二步，点击"自定义网址"，上部份是添加网址分类，下部份是添加网址。 第三步，分类好自已的常用网站后，上部份是未选择网站分类，下部份归到分类的常用网站。 第四步，...

  • 定制类

    http://blog.csdn.net/qq_18738333/article/details/50793029 1.Python的特殊方法__str__,__repr__如果要把一个类的实例变成 str，就需要实现特殊方法__str__()：class Person(object): def __init__(self, name, gender): self.nam

  • 优秀开源大集合

    学习HTML 5编程和设计★ HTML5 Rocks : Major Feature ... 源码很不错的 HTML5 Dashboard – Mozilla，效果很炫。WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。★ StackOverflow : 大名鼎鼎的技术问答

  • 你必须知道的最好的开源WEB 资源

    文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。学习HTML 5编程和设计★ HTML5 Rocks : Major Feature Groups 的学习 HT

  • 建议收藏：GitHub 上值得收藏的100个精选前端项目！

    star: 33881 ScrollMagic 一款非常赞的滚动交互的js插件，可用于官网与宣传广告场景 star: 10037 view reveal.js 基于css3的3D幻灯片工具，能够制作绚丽的演示文稿并生成html格式，将它发布到web上 star: 42092 ...

  • 收藏夹吃灰了：GitHub 上值得收藏的100个精选前端项目！

    star: 33881 ScrollMagic 一款非常赞的滚动交互的js插件，可用于官网与宣传广告场景 star: 10037 view reveal.js 基于css3的3D幻灯片工具，能够制作绚丽的演示文稿并生成html格式，将它发布到web上 star: 42092 ...

  • 开源的Web开发资源

    学习HTML 5编程和设计 原文转载自： http://coolshell.cn/articles/4795.html   ...★ HTML5 Rocks: Major Feature Groups 的... 源码很不错的 HTML5 Dashboard– Mozilla，效果很炫。 WhatWG Developers,

Global site tag (gtag.js) - Google Analytics