HTML5 - 技术教程文章
微信传播HTML5游戏的特点
一、现阶段微信H5游戏的特点现在网络上流行的H5游戏大多是轻游戏，而基于微信传播的H5游戏大多具有以下特点：1）速时游戏要1分钟甚至是30秒内可以玩完，神经猫，疯狂手指，数钞票，房祖名无不属于这类。疯狂手指甚至短到了10秒，如果在网上搜，可以搜到10秒600次的视频。2）简单到迄今为止能火的都是快餐类游戏，特别为开发人员所不屑。但现在轻游戏几百款传播量最大的都是不需什么智商的游戏，基本上都是虐心的小游戏，传播效果很...
HTML5 File API — 让前端操作文件变的可能【代码】【图】
前言在 HTML5 File API 出现之前，前端对于文件的操作是非常有局限性的，大多需要配合后端实现。出于安全角度考虑，从本地上传文件时，代码不可能获取文件在用户本地的地址，所以纯前端不可能完成一些类似图片预览的功能。但是 File API 的出现，让这一切变成了可能。跟着楼主由浅入深，了解下强大的 File API 吧。FileListFileList 对象针对表单的 file 控件。当用户通过 file 控件选取文件后，这个控件的 files 属性值就是 FileL...
html5 响应式布局
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。 随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些...
HTML5-Geolocation&地图.html【代码】【图】
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/><meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/><title>HTML5 Geolocation和百度地图API结合使用</title><!--引用百度地图API--><style type="text/css">html,body {marg...
Html5练习【代码】
header标签,aside标签,footer标签 <!doctype html> <html> <head> <style> /* *{border:1px solid red;height:20px} 所有的html5结构标签本质上来说就是一个div标签，只不过有意义 */ /*页面头部 header*/ header{height:150px;background:#ABCDEF} nav{height:30px;background:#FF9900;margin-top:100px} nav ul li{width:100px;height:30px;float:left;line-height:30px} /...
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4【图】
CanvasRenderingContext2D对象中用于平移、旋转坐标系的方法镜像scale(1,-1)绘制垂直镜像；scale(-1,1)绘制水平镜像自定义的坐标变换 transform()，多次调用会叠加效果setTransform()，每次调用都会清除上次的效果两个方法都用于旋转、缩放、及平移坐标系（可以根据公式传入0或其他数据）x‘=ax+cy+ey‘=bx+dy+f坐标系旋转公式(angle弧度)x‘=x×cos(angle)-(y×sin(angle))y‘=y×cos(angle)+(x×sin(angle))平移x‘=x+dxy‘=y+dy缩放...
Html5实现移动端、PC端 刮刮卡效果【代码】【图】
刮刮卡需求： 每一位用户有三次刮刮卡的机会本次刮刮卡的结果会覆盖上次的结果刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）刮出的结果包含按钮既（领取奖品 or 再来一次 ）分享活动奖品升级（这里主要是微信分享的回调了）我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码 第一、body创建Canvas <div class="info" id="prize"><span id="prompt"></span><span class="btn" id="ok">领取奖品...
html5in24hours
http://www.html5in24hours.com/books/the-book/code/1.浏览器测试 http://browsershots.org/2.http://www.fontsquirrel.com/常用字体：arial,helvetica,comic sans,courier,times new roman3.重置样式：http://meyerweb.com/eric/tools/css/reset/ 4.需要理解：http://www.html5in24hours.com/code-samples/hour4-code.html移动设备检测及对HTML5的支持在全局对象上检测属性在创建的元素上检测属性检测一个方法能否得到正确的返回...
HTML5新元素【代码】
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。 <figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。 <figcaption> 标签为 ' ref='nofollow'> 元素定义标题。 <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <article> 标签。注释： IE 8 或更早...
HTML5移动Web开发实战 PDF扫描版?【图】
《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书，你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能，横跨多个移动平台。全书共分10章，从移动Web、设备端配置和优化，变互、响应式设计、设备访问，调试、性能测试、富媒体等角度出发，包含了60多个实用的示倒，详细阐释如何构建快速、响应式的HTML5移动网站，适用于iOS、Android、WindowsPhone和BlackBerry等众多主流移动应用平台。 《HTML...
青瓷引擎打造HTML5游戏第一弹——《神奇的六边形》Part 4【图】
近期出现一款魔性的消除类HTML5游戏《神奇的六边形》，今天我们一起来看看如何通过开源免费的青瓷引擎（www.zuoyouxi.com）来实现这款游戏。?（点击图片可进入游戏体验）因内容太多，为方便大家阅读，所以分成四部分来讲解。本文为第四部分，主要包括：16.分数往上飘动画17.形状飞入动画18.其他动画表现添加19.游戏结束界面20. 添加LOGO21. 渲染优化若要一次性查看所有文档，也可点击这里。十六. 分数往上飘的动画在表现加分时，分...
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7【图】
性能运行putImageData()比drawImage()慢，同等条件下优先考虑drawImage()操作图像数据需要遍历大量数据，应该注意几点：1）避免在循环体中直接访问对象属性，应当保存在局部变量中2）应该用循环计数器遍历完整的像素，而非像素分量（每4个一组）3）逆向遍历与移位技巧效果并不好4）不要频繁使用getImagedata()视频处理var video=document.getElementById(‘video‘); //A <video>element ...context.drawImage(video,0,0); ...
html5 storage事件【代码】【图】
HTML5 虽然很多年了，但是真的了解不不够不够。主题说的是 storage时间，说起对 storage 事件的了解还是从 QQ音乐 说起。QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html。你在其他里面点击播放或者添加的时候，你会发现 https://y.qq.com/portal/player.html 会实时的变化。当前我想，这个神奇啊，当前想法是如下，可是怎么想都比较low啊。1. 存入 localStorage 或者 indexedDB里面，...
html5 canvas 实现倒计时 功能【代码】【图】
function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度 无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...
HTML5语义化元素你真的用的正确吗【代码】【图】
HTML5语义元素 语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例：<div>和<span>- 对其内容一无所知。 语义元素的示例：<form>，<table>和<article>- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。HTML5新语义元素许多网站都包含HTML代码，例如：<div id ="nav"> <div class ="header"> <div id ="footer"> 以指示导航，页眉和页脚。...
HTML5 - canvas标签【代码】
canvas标签<!doctype html><htmllang="zh-CN"><head><metacharset="utf-8" /><title>canvas标签</title><head><body><!-- canvas的宽和高建议直接使用width、height属性设置，同时不要指定单位px --><canvasid="canvas"width="500"height="800"style="background:#ccc;">您的浏览器不支持canvas标签，请升级浏览器！</canvas><script>//获取画布对象var canvas=document.getElementById("canvas");//alert(canvas);//获取用于绘画的...
CSS3+HTML5特效1 - 上下滑动效果【代码】【图】
先看看效果，把鼠标移上去看看。backfront 1. 本实例需要以下元素： a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back2. 外容器BOX的Height为200px，Width为200px；1.box1{ 2 position: relative; 3 top: 100px; 4 left: 100px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }3. 内容器BORDER的Height为200%，Width为100%，Top为-100%； 1.bord...
html5 css
本文转自：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 一、"自适应网页设计"的概念2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏...
HTML5 28个新特性
1. 新的Doctype 尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> 3. 重新定义的<small> <small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明 4. 去掉link和s...
HTML5实现下载文件且指定下载文件名【代码】
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载支出费用表</a> 原文：http://www.cnblogs.com/leap/p/4985134.html
Android Webview与Html5交互【代码】
转：http://fangjie.info/?p=417#more-417 一、WebView.setWebViewClient(new MyWebViewClient());1.publicboolean shouldOverrideUrlLoading(WebView view, String url) { onWebPageShouldLoad(view, url); //通过returntrue;}在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。坑爹之处1：Android 2.3.x WebView中的两个搞笑的bug :http://blog.csdn.net/t...
HTML5 Blob对象操作 - 【转载】【代码】【图】
【转载】url：https://www.cnblogs.com/hhhyaaon/p/5928152.html 写在前面本篇主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。Blob对象一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用...
html5 拖拽【代码】
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{width:320px;height:50px;background:pink;} </style> <script>window.onload = function () {var odiv = document.getElementById(‘div1‘);var oul = document.getElementById(‘ul1‘);odiv.ondragenter = function (){odiv.innerHTML = ‘请释放‘;}odiv.ondragover = function (ev){ev.preventDefault();}odiv.ondrop = func...
SpringMVC+mybatis+hibernate+bootstrap+HTML5 [百度搜标题]【图】
请认准本正版代码，售后技术有保障，代码有持续更新。(盗版可耻，违者必究)???????? 此为本公司团队开发-------------------------------------------------------------------------------------------------------------------------A?代码生成器(开发利器); ?B?阿里数据库连接池druid; ?C?安全权限框架shiro?此系统为?springmvc + mybaits 3.2?版本 ,提供maven的pom.xml文件,另免费赠送hibernate版本一套(垮数据库)?1. 有 oracl...
html5标签收集
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> width:可视区域的宽度，值可为数字或关键词device-widthintial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放user-scalable:是否可对页面进行缩放，no 禁止缩放<meta name="format-detection" content="telephone=no"> IOS禁止数字拨号原文：http://www.cnblogs.com/haitaoblog/p/5413433.html
移动端html5页面长按实现高亮全选文本内容的兼容解决方案【图】
最近需要给html5的WebAPP在页面上实现一个复制功能：用户点击长按文本会全选文字并弹出系统“复制”菜单，用户可以点击“复制”进行复制操作，然后粘贴到AppStore搜索对应的应用。之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这一个“复制”功能对用户的体验至关重要。尝试了一些做法，在安卓/iOS平台上的兼容性都不是很好。在微信浏览器内是很容易实现长按...
html5实现渐变效果【代码】
<canvas id=‘test01‘></canvas><script> function draw25(id) {var canvas = document.getElementById(id);if (canvas == null)return false;var context = canvas.getContext(‘2d‘);var g1 = context.createLinearGradient(0, 0, 0, 300);g1.addColorStop(0, ‘rgb(255,0,0)‘); //红 g1.addColorStop(0.5, ‘rgb(0,255,0)‘);//绿g1.addColorStop(1, ‘rgb(0,0,255)‘); //蓝//可以把lg对象理解成GDI中线性brushcontext.fil...
HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）
1.手机浏览器与桌面浏览器的不同现在手机浏览器的显示分辨率与桌面浏览器差不多，但是手机的尺寸比电脑要小很多。一个没做过响应式处理的网站，在手机和电脑上显示完全一样的内容， 不可避免的会出现字体被缩小的现象。想象一下电脑里12号字体缩小好几倍的效果吧。 所以如果将web网页移植为wap应用上，还是有许多问题需要考虑。2.理解两个viewport的概念做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入...
HTML5 获取用户坐标方法【代码】
1function GetLocation() {2if (navigator.geolocation) {3var locationOptions = {4//是否使用高精度设备，如GPS。默认是true 5 enableHighAccuracy: true,6//超时时间，单位毫秒，默认为0 7 timeout: 5000,8//使用设置时间内的缓存数据，单位毫秒9//默认为0，即始终请求新数据 10//如设为Infinity，则始终使用缓存数据11 maximumAge: 012 }; 13//只...
HTML5学习记录——3
HTML媒体1、HTML多媒体 视频格式 .avi 微软开发 .wmv 微软开发 .mpg .mpeg .mov 苹果公司开发 .rm .ram 允许低带宽的视频流 .swf .flv Macromedia开发，需要额外组件 .mp4 针对因特网的新格式 声音格式 .mid .midi .rm .ram .wav .wma .mp3 .mpga2 、HTML Object元素 辅助应用程序是可有浏览器启动的程序，也称为插件。可用于播放音频和视频。使用<object>标签...