HTML5 - 技术教程文章
HTML5学习笔记-使用canvas绘制图形【代码】【图】
canvas标签是一个矩形区域，它包含两个属性，width和height，默认为300px和150px.常用形式如下：<canvas id="mycanvas" width="400" height="200" style="border:1px solid #color;"> ...提示信息 </canvas>也可写成形式如：<canvas id="canvas" width="400" height="300" style="border:1px solid red"/>可是我在运行时发现第二个写法会导致<canvas>之后的元素无法在浏览器中显示出来.在body中将canvas放好后，就可以使用JavaScr...
html5之服务器推送事件【代码】【图】
用于服务器实时向客户端推送消息，这个是单向推送server to client服务器端 header头 要想服务器端推送：在服务器端的报头要定义： header(‘Content-Type:text/event-stream‘),服务器发送的响应内容应该使用这种`text/event-stream`的MIME;这样客户端才能理解你这是发送的不是普通的数据， eventsource对象才能识别 事件流 服务器端发送事件流（内容）; 每执行一次php文件就产生一个事件流； 事件流是由多个消...
[Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要：Mugeda提供基于云的平台，供开发人员和设计人员快速的开发、发布和统计基于HTML5的，包含丰富动画和交互的移动富媒体内容。在上一篇教程中，我们大致分析了HTML5的现状以及今后的发展趋势。在移动浏览器（含浏览器控件）中渲染的HTML5应用，将会和移动原生应用相辅相成，共同发展，在移动互联网大潮中扮ch来越重要的角色。另一方面，开发HTML5应用目前仍然存在成本高、...
HTML5视频直播技术【代码】
分享内容简介：目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要技术点也要有所了解，本次分享就向大家介绍一下其中的奥秘。 内容大体框架:怎样利用 HTML5 来播放直播视频怎样录制直播视频怎样实时上传直播视频直播中的用户交互下面是本期分享内容整理Hello, 大家好，我是吕鸣，目前是在腾讯 SNG 的即通应用部负责手Q的兴趣部落 Web 前端开发工作...
HTML5 2
复习：HTML5新特性：(1)新的语义标签和属性(2)表单新特性 1)新的input type——10个 email、url、number、tel、search、range、color、date、month、week 2)新的表单元素——4个 datalist、progress、meter、output 3)表单元素的新属性——12个 autocomplete、autofocus、placeholder、multiple、form required、maxlength、minlength、max、min、step、pattern(3)视频和音频(4)Canvas绘...
HTML5使用ApplicationCache
在html5中使用application cache可以把一些静态资源保存在客户端的浏览器上面。这样可以提高访问的速度，甚至是离线应用。关于application cache的优缺点：1.离线浏览 - 用户可在离线时浏览您的完整网站2.速度 - 缓存资源为本地资源，因此加载速度较快3.服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源[参考文章](http://www.html5rocks.com/zh/tutorials/appcache/beginner/)manifest 使用appcache我们需要维护一份列表...
HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas（画布）实战编程初级篇系列，在这个系列中，我们将介绍最简单的HTML5画布编程。包括：画布元素绘制直线绘制曲线绘制路径绘制图形绘制颜色，渐变和图案绘制图片绘制文本相关要求环境要求：Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器编程要求：需要有基础的HTML和Javascript编程经验，相关的画布编程将调用Javascript API来处理HTML Canvas基本元素HTML5中包含一个专门为HTML画布功...
[HTML5_JQueryMobile]20个很棒的 jQuery Mobile 教程【图】
构建一个餐馆选择的 Web 应用How to build a jQuery Mobile app for choosing a restaurant based on what the user want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. 创建一个良好移动体验应用For larger data-focused sites, or sites that are "almost applications" you will want to consider a custom mobile version of your site. This is often done with the help ...
HTML5与CSS3权威指南.pdf8【图】
第17章 与背景和边框相关的样式与背景相关的新增属性background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-”background-clip的值有border（背景范围包括边框区域）和padding（背景范围包括padding区域，不包括边框）“-webkit-”...
Html5新增的语义化标签（部分）
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，html5的标准规范终于制定完成。这是互联网的一次重大变革，这也许是一个时代的来临！总结一些h5新增的语义化标签，记录下来方便自己学习及使用：1、<header></header> 页眉：主要用于页面的头部的信息介绍，也可用于板块头部；2、<hgroup></hgroup> 页面上的一个标题组合：一个标题和一个子标题，或者标语的组合；3、<nav></nav> 导航：包含链接的一个列表；4、<section> ...
用HTML5制作烟火效果的教程
要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。 直接上DEMO吧：放烟火 原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化...
HTML5 Canvas【代码】【图】
目前大部分新型浏览器器实现了HTML5 Canvas 原声的绘图API，但只支持2D渲染环境，这里创建一个空白的画布元素<canvas width="500" height="500"></canvas> IE9一下的IE浏览器不支持画布元素，在这些浏览器上，我们有两个选择：1、当浏览器不支持画布时显示提示，可能是一段提醒用户升级浏览器的文案，画布的innerHTML就是画布的提示信息。2、使用ExplorerCanvas脚本兼容老版本的IE浏览器，不过有弊病，脚本文件比较大（99KB），而且...
HTML5 学习笔记（一）——HTML5概要与新增标签【代码】【图】
一、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能Flash被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很小，这并不符合一个好产品的演进规则。...
html5 兼容火狐 ev的事件【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style> .div1{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; bottom: 0;} .div3{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; left: 600px;} li{display: block; width: 50px; height: 50px; background: red; margin-top: 10px;} </style> <script>window....
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3【代码】【图】
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记23.3 响应鼠标动作图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig...
【代码生成器】安全权限、高性能、高并发、分布式java shiro、maven、Bootstrap、HTML5、SpringMVC、Mybatis、Hibern【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);? ? B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??D ehcache 自定义二级缓存;E 微信接口开发（后续会加入Activiti5 工作流 ）免费升级----------------------------------------------------------------------------------------------------------...
智能生活 “视”不可挡——首届TCL杯HTML5智能电视开发大赛等你来挑战
http://www.csdn.net/article/2014-06-04/2820063-TCL-Smart-TV-Innovation-Competation原文：http://www.cnblogs.com/yxwkf/p/4079735.html
入门讲解HTML5的画布功能（1）【代码】
个人认为在HTML5中画布功能其实并不实用，当然趋势是在FLASH不没落的情况下。通过学习我发现画布功能能够实现的东西非常有情调，但是前端人员也要有一定的审美和构思才能做出有意思的东西，因为canvas能提供的东西实在太少了。 当然在苹果抵制Flash的前提下，Flash的前景并不光明，这也给了我们前端人员更多的负担和机会。因为在这一块UI是没有我们对于HTML5来的熟悉的。下面就是我对HTML5学习过后的一个总结。 first part ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2【图】
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记13.2 照片加载与定位 根据功能设计，可以先写好 HTML 结构基础，再配好 CSS 做出大致效果，最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中，JavaScript代码保存到 eg3.js 文件中，...
HTML5新特性【代码】
1、HTML5简介在之前一直使用的是HTML 4.0标准，而且一直到现在为止，HTML4.0依然作为整个行业的最广泛的使用标准。所谓的HTML5指的就是HTML的第5.0版本，但是对于HTML 5.0标准基本上是让人觉得期待了很久。而且对于HTML5技术与传统的HTML 4最大的差别在于移动端的支持上。例如，在HTML 5之中支持了GPS的取得（可以取得当前移动端的经度和纬度两个信息），那么就可以轻松的实现定位的需要，当然，这一切的操作都必须有一个前提：浏览...
重写的HTML5酒店入住日期选择日历插件
<!DOCTYPE HTML><html lang="zh-CN"><head><title>接触角测定仪</title><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="application/javascript" language="javascript"></script><style>*{ margin:0; padding:0;}.choosecal{ width:96%; margin:3% auto; overflow:hidden;}.ccaltop{ width:99%; border-radius:5px; border:1px solid #000;}.caltline1,.caltline2{ width:94%; background-color:#F90; ...
18 款超酷的 HTML5 和 JavaScript 游戏引擎库
现在的游戏开发变得越来越复杂，需要制作各种炫丽的效果，还要制作各种基于 2D 或者 3D 的场景。为了节省游戏开发者的时间，让开发者集中精力在游戏的创新上，出现了许许多多的游戏引擎。而现在为了实现跨平台，HTML5 和 JavaScript 成功为了游戏开发者必备的利器，特别是移动端的开发者，必须要能很好的掌握 HTML5 和 JavaScript。现在这么多的游戏引擎，各有各的优点和缺点，为了帮助开发者们找到属于自己的那款游戏开发引擎，我...
PostMessage / html5
PostMessagePostMessage加Key_Event模拟组合键http://user.qzone.qq.com/14958306/blog/1409662802 PostMessage 组合键解决方案 - 网游闲人的日志 - 网易博客http://blog.163.com/zhi_qi/blog/static/754202052008616101542645/ PostMessage到底能不能发送组合键？ - 『 提问交流 』 - AUTOIT CN AutoIt中文论坛|acn|au3|软件汉化 - 分享您的技术!http://www.autoitx.com/thread-7169-1-1.htmlPostMessage - youxiazzz12的专栏 - 博...
HTML5 全屏化操作功能【代码】
由于项目中用到了全屏化挫折功能，查看了API后写了一个简单的全屏化model<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><style type="text/css">.div1{width: 1000px;height: 500px;border: solid 1px blue;}.test{ width:100%; background: black;height:100%;min-height: 400px;border: solid 1px red;}div{color: #fff;}</style></head><body><div class="div1"><div id="div2" class="tes...
基于html5和jquery的篮球跳动游戏【代码】【图】
今天给大家分享一款基于html5和jquery的篮球跳动游戏。这款实例和之前分享的 HTML5重力感应小球冲撞动画类似。用鼠标拖动篮球，篮球在页面上跳动，可在演示中看下效果。效果图如下：在线预览 源码下载实现的代码。这个实例主要是js代码。js需要引用jquery和Phaser.js这两个库。页面上的js代码如下： (function () {var w = window.innerWidth;var h = window.innerHeight;var game = new Phaser.Game(w, h, Phaser.CANVAS, ‘‘,...
Html5开发——html+css基础二（个人博客一）【图】
今天没有写完，而且写的还有点问题，所以今天就先不上传代码了（ps：快写完了才发现布局有问题，导致代码太多，感觉写的不是很好，所以今天先分析一下布局）第一步先写一个大的div用来放ABC三个部分，这个大的div居中！第二步分别写ABC三个部分，ABC三个部分分别使用浮动（float）来定位。A和B都各使用了一张非常小的图片，通过重复（repeat）属性生成A和B第三步C部分分别写好3~16这几个模块，在通过组合利用浮动定位。分组如下： ...
用html5中的canvas写的时钟【代码】【图】
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟</title> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">var cxs;var canvas;$(document).ready(function(){canvas=document.getElementById("canvas");cxs=canvas.ge...
html5拖拽总结
拖拽（Drag 和 drop）是 HTML5 标准的组成部分。拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。DataTransfer 对象 退拽对象用来传递的媒介，使用一般为Event.dataTransfer。被拖元素： ondragstart（开始拖拽） function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }ondrag(拖拽中) ondragend(拖拽结...
Html5新增特性【代码】
Html5新增特性新增标记<video src="" width="" ...></video>插入视频 <audio src="" width="" ...></audio>插入音频 *<canvas id="" width="" ...></canvas>画布标记，用来绘制图形 <command type=""></command>定义命令按钮 <datalist id=""></datalist>定义输入框的附带下拉列表以下两个属于状态交互元素，value属性用于设置元素展示的实际数值，默认为0，min和max属性是元素展示的最小和最大值，low和hight属性是元素展示的最低...
HTML5 2D平台游戏开发——角色动作篇之蓄力技【代码】【图】
在很多动作游戏中，玩家操控的角色可以施放出比普通攻击更强力的蓄力技，一般操作为按住攻击键一段时间然后松开，具体效果像下面这张图：要实现这个操作首先要记录下按键被按住的时间，初始是0：this.sabreChargeTime = 0;接下来是能够施放技能所需要的时间，超过这个时间后松开按键，即可施放出技能，否则无效：this.MAX_SABRE_CHARGE_TIME = 150;代码结构如下：if (key[74]) {//攻击this.updateSabreCharge(); //蓄力 } else {t...