（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何让新标签兼容低版本浏览器： html5shiv.js
二、 HTML5新增的表单控件
一、表单控件的新属性
<input type="text" placeholder="" required autofocus pattern="abc" >
二、新增的表单控件
（1）<input type="email">
（2）<input type="url">
（3）数字控件： type="number"
(4) 滑动组件： type="range"
(5) 拾色器： type="color"
(6) 日期控件： type="date"
三、本地存储
1、 三种本地存储 ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)写入： localStorage.setItem(键，值) //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）读取 var user = localStorage.getItem("user")
var user = localStorage.user
(3)删除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(键，值)
sessionStorage.getItem(键)
sessionStorage.removeItem(键)
sessionStorage.clear()
**********重点**********
4、cookie webStorage(localStorage sessionStorage)三者的区别
四、离线存储
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解离线存储的更新方式
五、移动端的布局思路：
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 <meta name="viewport" content="width=device-width,maximum-
scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">
3、使用rem单位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
})
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success)
七、地理定位和百度地图API的结合
八、视频，音频 <video autoplay="autoplay" controls="controls" loop="loop" poster=""
preload="preload"> <audio>
九、移动端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： <1>zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有点透问题 ： （1） fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （参考官网）
十一、 canvas
(1) <canvas width="600" id="can"></canvas> 300*150
(2) var can = document.getElementById("can")
var cxt = can.getContext("2d")
cxt.beginPath()
cxt.moveTo(100,200)
cxt.lineTo(200,400)
cxt.strokeStyle = '#f00'
cxt.stroke()
cxt.clearRect(0,0,200,300)
context.globalCompositeOperation="destination-out" (了解)
嗯，报表控件与图表控件还是不一样的。但是你以加了个“图形界面比较好”，比较费解。我估计你的意思还是图表控件。
然后你也没有讲明白有啥条件限制，我估计你是JavaScript 图表插件，好吧。
好的插件有很多。以下有10个非常酷的JavaScript图表库，有简单的也有复杂的，以满足不同的需求。
个人还是很推荐highcharts的，RGraph很炫，
1. Cubism.js
一个基于D3.js的插件，可以实时显示时间序列。D3.js是一个针对HTML和SVG的JavaScript可视化库。
2. RGraph
一个HTML5 JavaScript图表库，支持20多种不同类型的图表。
3. Cytoscape Web
一个开源的图形可视化库，基于jQuery编写。
4. sigma.js
一个开源的轻量级JavaScript库，使用HTML canvas元素来绘制图形。
5. Morris.js
一个小巧的、效果漂亮的JavaScript库，用于可视化时间序列数据。
6. Timeplot
基于DHTML的AJAX部件，用于绘制时间序列，并在上面叠加基于时间的事件。
7. Dracula
一套用于显示和设计交互式图表的工具，包含了各种不同的算法。无需Flash、Java和其他插件。
8. gRaphael
一个开源的JavaScript图表库，基于Raphael（拉斐尔）JavaScript库。
9. gvChart
一个jQuery插件，使用谷歌的Charts API以及HTML <table>标记中的数据，来创建交互式、可视化的图表。
10. jQuery Highcharts Table
简易，漂亮，该插件可以将HTML表格中的数据自动转换成图表，也可以抓取excel，连数据库也没有问题。
1、飞书：
飞书是字节跳动于2016年自研的新一代一站式协作平台，是保障字节跳动全球五万人高效协作的办公工具。飞书将即时沟通、日历、云文档、云盘和工作台深度整合，通过开放兼容的平台，让成员在一处即可实现高效的沟通和流畅的协作，全方位提升企业效率。
2、SpreadJS：
是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性。
SpreadJS 可为用户带来亲切、易用的使用体验，并满足 Web Excel组件开发、 表格文档协同编辑、 数据填报、 类Excel报表设计等业务场景。
3、石墨文档：
石墨文档是中国一款支持云端实时协作的企业办公服务软件，可以实现多人同时在同一文档及表格上进行编辑和实时讨论，同步响应速度达到毫秒级。
文档/表格实时保存在云端，即写即存。在编辑过程中，文档页面上方会实时提示文档的状态，包括正在保存、保存成功和最后更新时间。
4、腾讯文档：
腾讯文档是一款可多人同时编辑的在线文档，支持在线Word/Excel/PPT/PDF/收集表多种类型。可以在电脑端、移动端、iPad等多类型设备上随时随地查看和修改文档。打开网页就能查看和编辑，云端实时保存，权限安全可控。
5、超级表格：
超级表格是一款基于云端的数据协作表格软件，给用户提供数据收集与报表，共享协作的解决方案。服务对象包括电商、教育机构、政府、连锁店和各种销售、服务业公司。超级表格还给银行、电信、烟草等大型机构提供私有云部署解决方案。
多人查看/修改同一表格。可设置让他人只看到/修改部分的行、列和单元格。支持通过手机表单收集数据。可自行创建多个表格关联后当作OA
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）