炫意html5
最早CSS3和HTML5移动技术网站之一

HTML5教程

内联元素img、input为什么可以设置宽和高

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p&g...

HTML/CSS浏览器页面回流和重绘

面呈现流程  在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1.  浏览器把获...

第5部分:HTML5开发可视化UI应用程序编程界面

本文简介 在本文中,您将使用最新的 Web 技术开发 Web 应用程序。这里的大部分代码只是 HTML、JavaScript 和 CSS — 所有 Web 发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最新桌...

第4部分:Web Workers加速移动Web应用程序

本文简介 在本文中,您将使用最新的 Web 技术开发 Web 应用程序。这里的 大部分代码只是 HTML、JavaScript 和 CSS — 所有 Web 开发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最...

第3部分:HTML5移动Web应用程序离线工作

本文简介 在本文中,您将使用最新 Web 技术开发 Web 应用程序。这里的大多数代码只是 HTML、JavaScript 和 CSS — 任何 Web 开发人员的核心技术。需要的最重要的东西是用于测试代码的浏览器。本文中的大多数代码将运行...

第2部分:HTML5移动Web应用程序的本地存储

本文简介 常用缩略语 在本文中,您将使用最新 Web 技术开发 Web 应用程序。这里的大多数代码只是 HTML、JavaScript 和 CSS — 任何 Web 开发人员的核心技术。需要的最重要的东西是用于测试代码的浏览器。本文中的大多...

分步解析js原生实现高性能懒加载

一个简单的高性能懒加载实例,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式。 1.简单懒加载 这里有坑请注意!!! 如果复制上面的代码,首次加载进页面发现所有图片均已经加载完毕,没有实现懒加载...

图片和视频的懒加载是如何实现的?

作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们...

img 的data-src 属性及懒加载

一、什么是图片懒加载 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。 俗一...

原生JS如何实现图片懒加载

懒加载简介 什么是图片懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。 什么时候用懒加载 当页面...

实现图片懒加载(lazyload)的两种方式

在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技...

如何使用GoEasy实现PHP与Websocket实时通信

如何使用GoEasy实现PHP与Websocket实时通信 实现步骤如下: 1. 获取GoEasy appkey. 在goeasy官网上注册一个账号,并新建一个app. APP创建好后系统会为该app自动生成两个key, 一个既可以用来接收...

从Hello World出发,详解程序运行机制

开篇 学习任何一门编程语言,都会从hello world开始。对于一门从未接触过的语言,在短时间内我们都能用这种语言写出它的hello world。然而,对于hello world这个简单程序的内部运行机制,我相信还有很多人都不是很清楚。 ...

HTML5的Link prefetch页面资源预加载技术加速页面加载

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时...

PHP中的HTML5应用 将Canvas图像保存到服务器

在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里...

JS实现HTML5 Canvas图像数据和图片的互相转化

这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式。 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的drawImage方法: // Converts...

使用HTML5技术控制电脑或手机上的摄像头

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机...

IE6,7,8支持HTML5/CSS3网站的三种有效途径

起初,IE其实也是一款非常有进取心的浏览器。但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍。微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器。我们还不得不想办法兼容早期的I...

CSS3教程HTML5教程