分类：HTML5

2021
09-16

浅谈Web Storage API的使用

浅谈Web Storage API的使用 目录一、浏览器的本地存储技术1.1、sessionStorage1.2、localStorage二、WebStorage相关接口三、浏览器兼容性四、隐身模式五、使用WebStorageAPI一、浏览器的本地存储技术除了最早的使用cookie来进行本地存储之外，现代浏览器使用WebStorageAPI来方便的进行key/value的存储。WebStorage有两种存储方式：1.1、sessionStorage对于每一个访问源，都会维持一个独立的存储区域。只要浏览器不关闭，这些数据都不会消失。所以这种存... 继续阅读 >
2020
09-28

javascript实现移动端 HTML5 图片上传预览和压缩功能示例

javascript实现移动端 HTML5 图片上传预览和压缩功能示例 本文实例讲述了javascript实现移动端HTML5图片上传预览和压缩功能。分享给大家供大家参考，具体如下：在开发移动端web网页中，我们不可避免的会遇到文件上传的功能，但由于手机图片尺寸太大，上传时间过长导致用户体验太差，就需要在上传前对图片进行一定的压缩。在代码之前，有必要先了解我们即将使用到的几个APIfile和FileList对象file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是... 继续阅读 >
2020
09-24

php 使用html5 XHR2实现上传文件与进度显示功能示例

本文实例讲述了php使用html5XHR2实现上传文件与进度显示功能。分享给大家供大家参考，具体如下：思路：只要我们知道上传文件的总大小，还有上传过程中上传文件的大小，那么就可以实现进度显示了。在html5中，XMLHttpRequest对象，传送数据的时候，progress事件用来返回进度信息。它分成上传和下载两种情况1.下载的progress事件属于XMLHttpRequest对象2.上传的progress事件属于XMLHttpRequest.upload对象。与progress事件相关的，... 继续阅读 >
2020
09-23

php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

本文实例讲述了php下html5XHR2+FormData+FileAPI上传文件操作。分享给大家供大家参考，具体如下：FormData的作用：FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。例1如下：<!DOCTYPEHTML><htmllang="zh-CN"><head><metacharset="UTF-8"><title></title></head><body><fo... 继续阅读 >
2016
12-14

HTML5 语义化 - main

HTML5 语义化 - main 早在2013年，<main>元素就被正式添加到W3CHTML规范中，到目前位置，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用<main>元素了。那么，下面就开始吧。W3C规范<main>的主要目的是将ARIA的地标性作用main映射到HTML中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C规范将<main>描述为：文档或应用程序的主要内容。主内容区域... 继续阅读 >
2016
12-12

HTML5.1 里的新东西

HTML5.1 里的新东西 HTML5.1概览两年前HTML5标准的发布对于web开发社区来说是一件大事。不仅是因为它包含了一系列让人印象深刻的新特性,还因为它是1999年发布的HTML4.01标准以后，对HTML的第一个大版本更新。你现在依然可以看到一些网站夸耀他们在使用“现代”的HTML5标准。幸运的是我们不需为下一次HTML标准的更新等待那么长时间。2015年10月，W3C开始着手HTML5.1草案，其目标是修复一些HTML5遗留的问题。多次迭代后,草案... 继续阅读 >
2016
08-03

前端HTML5几种存储方式的总结

前端HTML5几种存储方式的总结 总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。主要应用：购物车、客户登录对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式：以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。大小：每个域名5M支持情况：注意：IE... 继续阅读 >
2016
04-15

HTML5初级知识总结

HTML5初级知识总结 1.canvas绘制步骤添加canvas元素，定义id和范围js里获取canvas元素通过getContext()方法获取2D绘制环境通过不同的函数进行图形绘制坐标定位绘制的图形定位都是以canvas的左上角为(0,0)原点绘制直线moveTo():规定起始点lineTo():从起点绘制到规定坐标的直线stroke():实现绘制直线的功能fill():实现填充功能实例：绘制一个三角形html... 继续阅读 >
2016
01-11

web App VS native App，路遥知马力

web App VS native App，路遥知马力 HTML5HTML5这个概念也已经炒作了几年了，看了很多关于HTML5的文章，包括一些技术书籍，对这一概念吹的雨里雾里，说了一大堆新特性讲了一大堆抽象的概念。搞得我很长时间才搞清楚什么是HTML5。其实没什么太多的东西，就是督促各个浏览器厂商都支持一些新的比较实用的属性，大家的行为尽量保持一致。给HTML添加了一些实用的标签，让一部分以前需要写很多JS代码才能实现的效果，只需要一个标签就可以简单搞定，当然这是在得到了浏... 继续阅读 >
2015
12-26

戏说HTML5

戏说HTML5 如果有非技术人员问你，HTML5是什么，你会怎么回答？新的HTML规范。。。给浏览器提供了牛逼能力，干以前不能干的事。。。（确切地说应该是给浏览器规定了许多新的接口标准，要求浏览器实现牛逼的功能。。。这里感谢红枫一叶）给浏览器暴露了许多新的接口。。。加了很多新的效果。。。问的人其实并不明白他想问的真正问题，回答的人貌似明白，但又好像少了点什么。牛逼的能力、新的接口、炫酷的效... 继续阅读 >
2015
11-09

HTML5的这些api你知道吗？

HTML5的这些api你知道吗？ 以下是之前学习的一些HTML5API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。页面可见性API--pageVisbility全屏API--fullScreen获取MediaAPI--getUserMedia电池API--battery资源预加载API--linkPrefetchingPageVisibility页面可见性API该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。在最小化浏览器、切换tap页面时生效.(如需对app... 继续阅读 >
2015
10-23

HTML5 Charset能用吗？

前一段某项目中页面在IE6突然出现了乱码，当时做了各种排查，最终推测是使用了HTML5的DOCTYPE和Charset以及中文注释的问题，于是临时采用旧的Charset方法来修复了下，后面乱码再没出现。其实一直不太确定HTML5的Charset能否被IE6识别，于是做了一些测试。先说下两种Charset声明方法，其实大家应该都很熟悉的：后面我们简称第一种方法为HTML5方法，第二种方法为HTML4方法。测试环境：WindowsXPSp2，中文版+英文版两个版本的... 继续阅读 >
2015
10-08

基于 HTML5 的 3D 网络拓扑树呈现

基于 HTML5 的 3D 网络拓扑树呈现 在HTforWeb中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HTforWeb的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们... 继续阅读 >
2015
07-16

HTML 5：足以改变我们未来生活的十项提示

HTML 5：足以改变我们未来生活的十项提示 HTML5代表着Web发展的未来方向。无论大家身为开发人员还是高级用户，关于这一Web编程新基础的种种态势都值得各位高度关注。如果大家还没有意识到，那我们先要强调一句——Web世界已经彻底改变了。时至今日，网络银行、实时视频聊天以及短视频共享已经成为Web领域的立足根基，而接下来还将有更多极具突破性的趋势及成果不断涌现。正因为如此，这一根基才需要迎接进一步升级。超文本标记语言（简称HTML）... 继续阅读 >
2015
02-12

HTML5七大优势“逼宫”APP

HTML5七大优势“逼宫”APP HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来几年，HTML5将颠覆原生App世界。跨平台：在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电 脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程 序... 继续阅读 >
2015
01-27

HTML5 History API 实现无刷新更新地址栏URL

HTML5 History API 实现无刷新更新地址栏URL History是有趣的，不是吗？在之前的HTML版本中，我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法，但这就是一切我们能做的了。但是，利用HTML5的HistoryAPI，我们可以更好的控制浏览器的历史记录了。例如：我们可以添加一条记录到历史记录的列表中，或者在没有刷新时，可以更新地址栏的URL。为什么介绍HistoryAPI？在这篇文章中，我们将了解HTML5中HistoryAPI的来源。在此之前，我们经常使用散列值来... 继续阅读 >