array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 HTML5资料整理 - 爱码网

HTML5资料整理

luics

 

项目组要做html5这块，花了一周左右时间收集的，快有一年时间了，部分内容需要更新，仅供参考。如需更新请回复

 

几点说明：

  1. 本次收集的信息以HTML5为主，这里的HTML5 ~= HTML5 + Javascript + CSS3
  2. 以下资料的协议相关部分主要来自W3C、WHATWG；demo库和开发工具等主要来自IT企业、技术组织的官网或其信息站点
  3. W3C正式发布的协议称为Recommendation（推荐），下文中“协议”、“推荐”、“REC”是同义词；“协议”未通过之前以“草案”的形式存在

[基本信息]

2个组织

  • W3C，万维网联盟，Web标准制定者
  • WHATWG，由浏览器厂商的员工发起的非正式组织，致力于改进HTML，其成员来自Mozilla、Opera、Apple、Google等

HTML5发展

  • HTML 4.01于1999年发布，2000年W3C发布了XHTML 1.0
  • 第一份正式草案公布于2008.1.22，最新草案发布于2011.9.6
  • HTML5草案的前身为Web Applications 1.0，2004年由WHATWG提出，2007年被W3C接纳，并成立了新的HTML工作组（合并XHTML团队）

“WHATWG致力于web表单和应用程序，而W3C专注于XHTML 2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML” —— 摘自W3school。
  • WHATWG目前仍然是HTML5的主力，HTML5的最新进展会发布在这两个组织的官网，以下默认使用W3C公布的信息

HTML5的新特性体现在下图显示的8个部分，HTML5希望创建一个有本地存储、富客户界面、高效网络IO的Web App。HTML5 Presentation是以下文字和图表更加直观的版本：

  • 语义（Semantic），新增header、footer、nav、fig等含有语义的标签，以及一系列含有语义的标签属性
  • 离线&存储（Offline&Storage），主要包括Local Storage、Indexed DB、File API
  • 设备访问（Device Access），定位信息已经广泛应用，其他还有视频、音频流（如语音输入 ），移动设备的传感器（如方向传感器）
  • 网络连接（Connectivity），增加Web Socket、服务器数据推送
  • 多媒体（Multimedia），增加video、audio标签，提供原生的视频、音频访问
  • 图形接口（GDI），增加canvas标签，提供2D，3D GDI，现已有第3方的WebGL可以提供3D加速渲染
  • 性能&整合（Performance & Integration），Web Workers实现脚本后台运行，并提供前后台交互接口，XMLHttpRequest 2提供更好的网络IO
  • CSS3，目前仍在开发之中，主流浏览器已经支持其中部分特性，Dashboard是更完整的CSS3 demo

 

最新进展参见WHATWG News和W3C HTML首页：

 

[Demo库]

这里将所有demo库粗略分为应用和游戏，涵盖了组织、企业、个人开发或收集的demo

[应用demo库]

Edge的Samples，Adobe Edge制作的html5动画

Html5Rocks， Google demo库

  • HTML5 Presentation ，h5版ppt，详细介绍了h5的新特性，里面的demo可直接玩
  • WebGL Globe，使用WebGL 3D加速，展示canvas 3D特性
  • Ascii Art，使用WebSocket同步服务器数据（字符视频）
  • Notification Time，Notification API，提供页面范围以外的消息提示,目前主流浏览器中只有chrome实现
  • Drag n Drop Photos, 拖拽文件到浏览器，使用DnD，File API
  • Page Flip，书本翻页，基于CSS3 2D transform和animation

html5demos ，人气很高的第三方demo库，提供按特性过滤查看demo

Web O\' Wonder，奇幻网络，Mozilla提供的demo库

  • Dashboard，展示HTML5、CSS3、SVG、JS等技术的新特性，CSS3的demo很丰富

Safari Technology Demos，Apple提供的demo库

  • Photo Transitions，图片切换的动画效果
  • Gallery，幻灯片，多种展现模式：水平、垂直、3D滚动..
  • 虚拟现实(VR)，基于css3 transforms
  • 360°，360°旋转，本以为是3D效果，竟然用了72张图片

IE Test Drive，Microsoft为IE开的demo库站点，大量html5的demo

10K Apart，HTML5竞赛作品，基本要求是打包后10KB以内

canvasdemos，专注于canvas的demo库

HTML5研究小组收集的demo库，“HTML5研究小组”是中国首个HTML5推广和交流的开放组织

一些零散的demo：

[游戏demo库]

Mozilla Labs Gaming，Mozilla官方的html5游戏demo库，下面是库中获奖作品

  • Marble Run，冠军游戏(best web-iness)，画面精细，chrome13下运行较流畅（汗）
  • Robots are people too，获得“最有趣奖”（most fun）

html5games，第三方游戏demo库

HTML5研究小组收集的游戏demo库

游戏引擎：Impact、Rocket、GameClosure、YoYo

一些零散的demo：

  • CubeSpace，搭积木，强大的回放功能

[兼容性]

Html5 test，提供html5新特性的检测

html5兼容性手册

  • Where can I use..，提供详尽的兼容性信息，提供按特性查找
  • HTML5 readiness，数据来源于前者，提供按时间查询HTML5兼容性，有趣的展现形式

Compatibility Master Table，quirksmode提供的兼容性数据库，涵盖了DOM、CSS、JS等

HTML5 in Firefox，Mozilla 提供的Firefox html5兼容性列表

HTML5 in Chrome，Chromium提供的开发进度信息

HTML5 in IE：官方版本，非官方版本，

Mobile HTML5，Mobile Browser对HTML5的支持

兼容性工具

[开发]

开发手册&文档

Edge，Adobe开发的html5动画制作工具，生成的动画依赖的库较多，直接用于mobile设备文件过大

Swiffy，flash转html5工具

Modernizr，javascript库，对html5、css3 做退化处理

CSS3-HTML5之家，国内的一个站点

HTML5研究小组

Scirra，HTML5 游戏开发平台（付费）

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode