HTML5 - 技术教程文章
HTML5 ( 借助http请求发送formdata对象,从而上传文件 ) XMLHttpRequest, FormData【代码】
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS文件上传</title><script type="text/javascript" src="../js/jQuery.js"></script><style type="text/css">* {margin: 0;padding: 0;}#img {display: block;width: 9.98rem;height: 6rem;border: .01rem solid black;}#file {display: block;margin: -6rem 0 0 0;opacity: 0;wid...
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）【代码】
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>HTML5-页面切换动画</title> 6<link href="animations.css" rel="stylesheet"> 7<script src="modernizr.custom.js"></script> 8<script src="jquery-1.8.0.min.js"></script> 9<style> 10 #viewsWrapper { 11 top:0px; 12 left:0px; 13 width:300px; 14 height:200px; 15 position:relative; 16 overflo...
【HTML5】 web上的音频【代码】【图】
<!--audio通过属性的设置可以控制音频播放的行为：表6-2 audio元素的属性————————————————————————————————————————————————————————属性 值 描述autoplay autoplay 音频就绪后马上播放controls controls 向用户显示控件，比如播放按钮loop loop 音频播放结束后重新播放preload ...
HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket【代码】【图】
一、同时上传多个文件处理HTML：<div class="container"><div class="panel panel-default"><div class="panel-heading">分段读取文件：</div><div class="panel-body" id="bodyOne"><input type="file" id="file" multiple/><br /></div></div></div>JS：1.封装单文上传实例//封装 单个文件上传实例 (function () {var url = ‘ws://localhost:55373/ashx/upload4.ashx‘;//指定上传文件，创建上传操作对象function uploadOperat...
HTML5拖放功能
基本概念在HTML5中，任何元素都可以拖放，Drap和Drop。拖放属于HTML事件中的Mouse事件。实例讲解代码地址：JS Bin... <body><div id="end-area" class="area"></div><img id="start-area" draggable="true" src="http://pic1.zhimg.com/d80d9ff11c28c19123bc75a27d3c1df8_l.jpg"> <script id="jsbin-javascript"> var img = document.getElementById("start-area"); img.ondragstart = function(event) {event.dataTransfer.setDa...
HTML5兼容
标签 ?针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们方法如下： 在页面的头部加下： <script> document.createElement(“header”); document.createElement(“nav”); document.createElement(“footer”); …… </script> l样式 ?HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下 它默认的display <!DOCTYPE HTML>...
HTML5+JS实现俄罗斯方块原理及具体步骤
本游戏实现的基本原理: 游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。 俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的...
JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,【代码】
function checkVideo() {if (!!document.createElement(‘video‘).canPlayType) {var vidTest = document.createElement("video");oggTest = vidTest.canPlayType(‘video/ogg; codecs="theora, vorbis"‘);if (!oggTest) {h264Test = vidTest.canPlayType(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘);if (!h264Test) {document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support.";} else {if (h2...
HTML5增加的几个新的标签【代码】【图】
HTML5又2008年诞生，HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数先来记录一下吧！ 1。 <canvas>画布标签 HTML5的新标签举例： 1 <html>2 <head>3 <title>canvas画布的应用</title>4 <p align="center">画一个矩形<span style="color : #ff0000">龚细军创作</span></p> </head>5 <body> 6 <canvas id="can" width=...
HTML5math标签【图】
HTML5 MathML一、HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。二、浏览器支持大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。三．实例：——以下均需在Firefox3.5之上运行<math xmlns="http://www.w3.org/1998/Mat...
HTML5中的拖放
（1）在HTML5中实现拖放需要将目标元素的"draggable"属性设置为"true"；（2）元素拖放时触发的相关事件： a：dragstart——在开始拖放被拖放元素时触发（事件主体：被拖放元素）；b：drag——正在拖放被拖放元素触发（事件主体：被拖放元素）；c：dragenter——在被拖放元素进入某元素触发（事件主体：经过/目标元素）；d：dragover——在被拖放元素在某元素内移动时触发（事件主体：经过/目标元素）；e：dragleave——被拖放元素离...
html5+css3 制作音乐播放器
//css//body , html{ margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } .MusicBox { background-color: #212121; background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121)); background-image: -webkit-linear-gradient(top, #1B1B1B, #212121); background-image: -moz-linear-gradient(top, #1B1B1B, #212121); bac...
为女神的生日准备惊喜，我开始学习html5游戏开发 -第三天
cocos2d-html-v3___________________________________________________下载了v3版本的引擎，跟着官网v2的教程做demo，果不其然遇到了一些问题。1、 v2: cc.Director.getInstance() v3: cc.diretor2、 官网v3文档中 menuItemSprite.create 的一个重载，var item = cc.MenuItemSprite.create(normalImage, SelectedImage, ‘callback‘, targetNode) //create a menu item, when clicked runs targetNode.callback()但当我查看源代...
HTMl5的sessionStorage、localStorage和Cookie【代码】
近日做到一个前端缓存项目涉及到storage的应用，故对比了一下本地缓存技术的应用场景。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
写在前面（领会下面五句话即可）： C：1. static修饰函数中的变量（栈变量）：改变变量的生存期，作用域不变仍为所在函数。 只被初始化一次。2. static修饰全局变量：限制全局变量只能被模块内访问，不可以在别的模块中用extern声明调用。3. static修饰函数：作用与修饰全局变量类似，也是限制该函数只能在模块内访问，不能再别的模块中用extern声明调用C++：1. static静态数据成员属于整个类所有，类的所有对象共同维护。2. stati...
如何让转换的视频支持HTML5在线播放【代码】
转换工具当然是ffmpeg了，那么如何让转换后的视频支持所有支持HTML5的浏览器在线播放？只需要如下命令行代码就行了：ffmpeg -i output.mpg -vcodec libx264 -acodec aac -vprofile slow -vprofile baseline output_video.mp4想要知道为什么要这么设置音视频编码么？参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats 原文：http://www.cnblogs.com/lohcve/p/4731608.html
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下： 复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 我之所以把控制点的坐标带...
html5+jquery获取微信openid【图】
最近在修改一个移动商城，由于wap端是HTML5的，还大量使用了art模板技术，一开始修改很不适应，而且实现HTML5取openid一直没能实现很好的实现，经过对获取原理的理解和学习，终于还是实现了HTML获取微信openid,而且改动不大，闲话少说，直接上干货：一、写个js,用于取accesscode,并直接通过openid读取用户表中的注册信息$(function () {var wxopenid=getcookie('wxopenid');var key=getcookie('key');if (key==''){var access_code...
HTML5的一些新元素（笔记）
<canvas> 新元素 ' ref='nofollow'> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 新多媒体元素' ref='nofollow'>定义音频内容' ref='nofollow'>定义视频（video 或者 movie）' ref='nofollow'>定义多媒体资源 <video> 和 <audio>' ref='nofollow'>定义嵌入的内容，比如插件。' ref='nofollow'>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 新表单元素' ref='nofollow'> 定义选项列表。...
HTML5+CSS3新特性学习【代码】
1.什么是HTML5万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为。 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形以及特效特性性能与集成特性，CSS3特性 2.H5新增语义化标签<header>头部标签 <nav>导航标签 <article>内容标签 <section>块级标签 <aside>侧边栏标签 <footer>底部标签 3.H5新增多媒体标签<au...
【新技术】现在最流行的java后台框架组合java springmvc mybaits mysql oracle html5 后台框架源码【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);? ? B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??D ehcache 自定义二级缓存;E 微信接口开发（后续会加入Activiti5 工作流 ）免费升级----------------------------------------------------------------------------------------------------------...
HTML5 离线缓存【图】
先需求分析一下---传统的web应用是在线应用，这其实也是web的特色，对于PC时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得更低。比如：在火车上，穿山越岭进隧道，便无法访问web应用。。。因此出现了离线缓存技术 离线缓存为应用带来3个优势，第一：离线浏览，用户可以再无网络是浏览；第二：速度快，已经缓存的资源加载更快；第三：减少服务器压力；还等什么快学习缓存。1.浏览器对...
SpringMVC+Mybatis框架整合源码 项目 下载 rest websocket html5【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);全部是源码??? ?增删改查的处理类，service层，mybatis的xml，SQL( mysql? ?和oracle)脚本,? ?jsp页面 都生成? ?就不用写搬砖的代码了,生成的放到项目里，可以直接运行B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??Shiro 是一个用 Java 语言实现的框...
HTML5 Canvas锯齿图代码实例
效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...
html5 表单的新增type属性【代码】
<form action=""> 用户名：<input type="text" name="userName"> <br> 密码：<input type="password" name="userPwd"> <br> <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交--> 邮箱：<input type="email"> <br> <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。...
HTML4和HTML5之间除了相似以外的10个主要不同
HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很大不同之处。 事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。 可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部，全部列出来是不可...
html5高级篇【代码】
内联块：inline-block ??默认情况下块元素占一行，使用内联属性能够将元素整合到一行，一旦设置这个属性且未设置宽度时，由内容决定撑开宽度。注ie6和ie7不支持。display:inline-block浮动：float ??也可以让多个块元素实现在同行展示。使文档流脱离书写顺序，比如float:right 顺序相反float: left|right|none|inheritclear ??设置后对应方向不会有浮动元素，为什么要清除浮动，因为浮动元素脱离文档，使得父级元素可能包不住子级元...
HTML5和CSS3工具资源汇总
HTML5 & CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。HTML5安全手册CSS3按钮生成器 所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。When can I use…（HTML5 & CSS3 浏览器兼容性） 很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。CSS3颜色值/名称速...
HTML5与HTML4的区别
1. HTML5推出的理由解决Web上存在的问题：Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统一，没有被标准化。解决方案：使各浏览器的功能符合通用标准。文档结构不够明确：HTML4中元素不能把文档结构表示清楚。解决方案：增加与结构相关的元素。Web应用程序的功能受到限制：HTMLL4对Web应用程序的贡献很小，比如：不允许同时上传多个文件。解决方案：...
HTML5前端入门教程：Ajax 异步请求技术
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ?ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 ?ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ?ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个...