![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 890 阅读 · 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 · 246 阅读 · 0 评论 -
【面向HTML5--WebWorker】
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。你可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。若Web页面中执行了很耗时的JS任务(如加解密、复杂路径计算、多参数计算等),由于所有的HTML/CSS/JS代码都在同一个UI主线程中执行,会导致页面“卡死”。根本解决办法:创建一个新的并发线程,在新的原创 2017-10-08 17:45:09 · 287 阅读 · 0 评论 -
【面向HTML5--WebSocket】
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTTP与WebSocket:HTTP协议的特点:属于“请求-响应”模型,客户端先发起请求,服务器才会返回响应;一个请求只能得到一个响应。有些特殊的应用场合,该模型存在问题:实时走势图、在线聊天室,必须要求服务器端一有更新的数据,客户端必须立即显示。使用HTTP协议的实现方法:心跳请求 = 定时器 +原创 2017-10-08 17:51:31 · 315 阅读 · 0 评论 -
【面向HTML5--拖放】
拖放:Drag & Drop,D&D,最早来自于桌面操作系统的效果,可以拖动着某文件图标,在另一个地方释放H5提供了对D&D的支持 —— 七个事件句柄:拖动的源对象(被拖动的对象)可以触发的事件:dragstart:拖动开始事件drag:拖动中dragend:拖动结束事件整个拖动过程的组成: dragstart * 1 + drag * n + dragend*1拖放的原创 2017-10-08 17:41:47 · 295 阅读 · 0 评论 -
【面向HTML5--地理定位】
如何Canvas上的图形/图像绑定事件监听?HTML中只能为元素/标签绑定监听函数; Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定。解决办法:“事件委托”——让canvas监听所有的事件,计算事件发生坐标点,是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定; 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:51:45 · 264 阅读 · 0 评论 -
【面向HTML5--SVG绘图】
如何Canvas上的图形/图像绑定事件监听?HTML中只能为元素/标签绑定监听函数; Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定。解决办法:“事件委托”——让canvas监听所有的事件,计算事件发生坐标点,是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定; 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:12:09 · 892 阅读 · 0 评论 -
Canvas如何等待所有图片加载完成才开始绘图
如何等待所有图片加载完成才开始绘图?浏览器加载图片属于“多线程异步加载”,完全无法预测哪一张图片先加载完成。但Canvas绘制图片时必须按一定顺序!——只能等待所有图片加载完成,才开始绘图!解决:定义一个全局变量,每加载完成一张图片累加一个数值,当值达到每个临界点时,执行下一步。var progress = 0; //总的加载进度img1.onload = function(){原创 2017-10-08 16:05:16 · 5978 阅读 · 0 评论 -
如何在Canvas上的图形/图像绑定事件监听?
如何Canvas上的图形/图像绑定事件监听?HTML中只能为元素/标签绑定监听函数; Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定。解决办法:“事件委托”——让canvas监听所有的事件,计算事件发生坐标点,是否处于某个图形/图像的范围内。对于标准几何图形可以进行事件绑定; 对于不标准几何图形进行事件绑定非常麻烦。<!DOCTYPE html原创 2017-10-08 16:09:57 · 14636 阅读 · 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 · 299 阅读 · 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 · 547 阅读 · 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 · 457 阅读 · 1 评论 -
canvas+audio+range 模拟音乐播放器
这次利用h5的一些功能,来简单实现一个音乐播放器的播放界面,主要体现在canvas绘制,audio播放音频,range控制进度及音量。h5有很大的浏览器兼容性问题,这里不做考虑。demo中有一个canvas动画的实现,考虑到动画的流畅性及性能,这里使用requestAnimationFramerequestAnimationFrame 采用系统时间间隔,保持最佳绘制效率,不会因为间隔时...原创 2018-02-23 15:01:02 · 277661 阅读 · 0 评论