html5
关注
分享
扫一扫
hfhan_872914334
前端开发
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【面向HTML5--结构化标签】
什么是结构标记？1.html5中 新提出的一组标记，专门用于构建网页结构2.可以取代div布局div布局存在的问题1.布局复杂时，页面会出现大量DIV元素2.元素相互嵌套，页面难以维护和处理常用的结构标记 1.header元素语法：<header>内容</header>作用：定义整个文档或者是某个区域的“页眉”，定义页面的顶部信息。取代：<div id="header"></div>2原创 2017-10-08 14:44:36 · 1039 阅读 · 0 评论 -
【面向HTML5--Web Storage】
Web项目中的数据存储的方式(1)业务数据——如商品信息、订单、帖子、新闻、出入账1)服务器端的数据库中；2)服务器端的内存中；(2)用户数据——如浏览历史、偏好设定、登录记录1)Cookie存储：浏览器兼容性好，不能超过4KB，操作复杂2)H5 WebStorage：不能超过8MB，操作简单3)Flash 存储：依赖于Flash播放器4)IndexedDB：目前还不是H原创 2017-10-08 17:47:52 · 303 阅读 · 0 评论 -
【面向HTML5--WebWorker】
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。若Web页面中执行了很耗时的JS任务（如加解密、复杂路径计算、多参数计算等），由于所有的HTML/CSS/JS代码都在同一个UI主线程中执行，会导致页面“卡死”。根本解决办法：创建一个新的并发线程，在新的原创 2017-10-08 17:45:09 · 332 阅读 · 0 评论 -
【面向HTML5--WebSocket】
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTTP与WebSocket：HTTP协议的特点：属于“请求-响应”模型，客户端先发起请求，服务器才会返回响应；一个请求只能得到一个响应。有些特殊的应用场合，该模型存在问题：实时走势图、在线聊天室，必须要求服务器端一有更新的数据，客户端必须立即显示。使用HTTP协议的实现方法：心跳请求 = 定时器 +原创 2017-10-08 17:51:31 · 373 阅读 · 0 评论 -
【面向HTML5--拖放】
拖放：Drag & Drop，D&D，最早来自于桌面操作系统的效果，可以拖动着某文件图标，在另一个地方释放H5提供了对D&D的支持 —— 七个事件句柄：拖动的源对象(被拖动的对象)可以触发的事件：dragstart：拖动开始事件drag：拖动中dragend：拖动结束事件整个拖动过程的组成： dragstart * 1 + drag * n + dragend*1拖放的原创 2017-10-08 17:41:47 · 368 阅读 · 0 评论 -
【面向HTML5--地理定位】
如何Canvas上的图形/图像绑定事件监听？HTML中只能为元素/标签绑定监听函数； Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。解决办法：“事件委托”——让canvas监听所有的事件，计算事件发生坐标点，是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定； 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:51:45 · 314 阅读 · 0 评论 -
【面向HTML5--SVG绘图】
如何Canvas上的图形/图像绑定事件监听？HTML中只能为元素/标签绑定监听函数； Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。解决办法：“事件委托”——让canvas监听所有的事件，计算事件发生坐标点，是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定； 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:12:09 · 1006 阅读 · 0 评论 -
Canvas如何等待所有图片加载完成才开始绘图
如何等待所有图片加载完成才开始绘图？浏览器加载图片属于“多线程异步加载”，完全无法预测哪一张图片先加载完成。但Canvas绘制图片时必须按一定顺序！——只能等待所有图片加载完成，才开始绘图！解决：定义一个全局变量，每加载完成一张图片累加一个数值，当值达到每个临界点时，执行下一步。var progress = 0; //总的加载进度img1.onload = function(){原创 2017-10-08 16:05:16 · 6118 阅读 · 0 评论 -
如何在Canvas上的图形/图像绑定事件监听？
如何Canvas上的图形/图像绑定事件监听？HTML中只能为元素/标签绑定监听函数； Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。解决办法：“事件委托”——让canvas监听所有的事件，计算事件发生坐标点，是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定； 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:09:57 · 14925 阅读 · 0 评论 -
【面向HTML5--表单2.0】
1、新的input typeH4已经学过的input type： text、password、radio、checkbox、button、submit、reset、image、hidden、fileH5中新增的input type：(1)email： 作用：邮件输入框，在表单提交时会验证邮箱格式(*@*)，浏览器默认提供了错误消息，内容可以定制但样式不能定制 语法：<input t原创 2017-10-08 15:24:37 · 349 阅读 · 0 评论 -
【面向HTML5--Canvas绘图】
Web绘图可以实现的效果：(1)实时走势图(2)统计图(3)在线画图板(4)网页游戏（2D、3D）目前可以使用Web绘图技术：(1)Canvas绘图：2D位图绘图技术(2)SVG绘图：2D矢量图绘图技术(3)WebGL绘图：2D/3D绘图技术，还不是H5标准技术Canvas绘图技术HTML5新提供的一种2D位图绘图技术。<canvas width="500" height="400">原创 2017-10-08 16:02:33 · 607 阅读 · 0 评论 -
【面向HTML5--视频和音频】
Flash被HTML5取代体现在哪些方面？ - Flash HTML5 视频和音频 播放器 video和audio标签 绘图 ActionScript Canvas、SVG 动画 ActionScript 定时器 + Canvas/SVG 客户端存储 播放器 WebStorage视频播放/*用法*/<video src="x.mp4">您原创 2017-10-08 15:36:42 · 519 阅读 · 1 评论 -
canvas+audio+range 模拟音乐播放器
这次利用h5的一些功能，来简单实现一个音乐播放器的播放界面，主要体现在canvas绘制，audio播放音频，range控制进度及音量。h5有很大的浏览器兼容性问题，这里不做考虑。demo中有一个canvas动画的实现，考虑到动画的流畅性及性能，这里使用requestAnimationFramerequestAnimationFrame 采用系统时间间隔，保持最佳绘制效率，不会因为间隔时...原创 2018-02-23 15:01:02 · 302841 阅读 · 0 评论