HTML5 - 技术教程文章
HTML5游戏探讨，怎样让微信游戏仅仅能执行在微信中【代码】
大致文件布局例如以下。一个html文件。一个loading.js，在loading.js中载入其它须要的js和css。 至于详细的速度的话。建议cdn或者一个域中最多载入6个js文件。在loading.js中载入js和css之前，检測是不是微信游览器，是的话，go。不是则跳转到提示。function isWeiXin(){var ua = window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i) == ‘micromessenger‘){return true;}else{return false;} } if(!isWeiX...
玩转HTML5+跨平台开发[6] H5多媒体标签【代码】【图】
汇总1. video标签2. audio标签3. summary标签和details标签-详情和概要标签4. marquee标签-跑马灯效果5. HTML中被废弃的标签6. HTML实体video标签作用: 播放视频格式1:<videosrc=""></video>video标签的属性src: 用于告诉video标签需要播放的视频地址；autoplay: 用于告诉video标签是否需要自动播放视频；controls: 用于告诉video标签是否需要显示控制条；poster: 用于告诉video标签视频没有播放之前显示的占位图片；loop: 一般用于...
HTML5将图片转化成字符画【代码】
HTML5将图片转化成字符画 字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢？HTML5让这个可能变成了现实，通过canvas，可以很轻松实现这个功能。其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符#*+“和空格来填充。下面是源码：HTML：一个canvas元素#cv，一个字符画容器#txt 。1 <canvas id="cv">fuck ie</canvas> 2 <div id="txt"></div>css：由于每一行用p来填充...
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。 下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代...
浅淡HTML5移动Web开发
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。 1. 响应式web设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在...
HTML5新特性小结
HTML5 新特性新的DocType: <!DOCTYPE html> 不需要声明文档类型；脚本和链接不需要type属性，如 lingk, script;语义化标签，如：header, footer, hgroup, mark, figure, small, article,属性及校验,新的属性，如：placeholder, required, autofocus, pattern, autocomplete, data, contenteditable自动校验，如： required自动校验为空，pattern正则匹配， min,max最值精细化，如：text分类type=[numner\range\date\color\search\e...
Canvas HTML5【代码】【图】
Canvas Examples一个canvas是在html页面上规则的区域。默认的，一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...
HTML5实现文件上传下载功能实例解析【图】
前言：因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传，而自己对java文件上传这一块未接触过，且对 Http 协议较模糊，故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版...
HTML5-canvas【代码】
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...
html5 之 canvas 相关知识(一)概念及定义【代码】
什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<canvas> 标签只是图形容器，它没有自己的行为，需要定义API 支持脚本化客户端绘图操作。创建 Canvas 元素canvas的代码很简单，定义一个ID以及宽和高。这里强调一点：canvas的宽高必须写在元素上，如果用样式定义，不能改变其图片的比例<canvas i...
html5 meta头部设置
<meta name="viewport" content="height=[pixel_value | device-height], width=[pixel_value | device-width], inital-scale=float_value, minimum-scale=float_value, maximum-scale=float_value, user-scalable=[yes|no], target-densitydpi=[dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" />width:控制 viewport的大小，可以指定一个值或者特殊的值，如 device-width为设备的宽度（单位为缩放为 100%时的 css 的...
html5—Bootstrap【代码】
（注：本笔记是本人在菜鸟教程网站https://www.runoob.com/bootstrap学习时所做的记录）一、Bootstrap介绍Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。二、Bootstrap包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 CSS 设...
html5 本地缓存
<!DOCTYPE html><html><head><meta charset="utf-8"><title>访问计数</title></head><body><div id="counter_div"></div></body></html><script type="text/javascript"> // 递增localStorage计数 if (localStorage.counter == null) { localStorage.counter = 1; } else { localStorage.counter++; } // 显示计数 var counter_div = document.getElementById("counter_div"); counter_div.innerHTML = localStorage...
html5的结构标记与内联元素
<article>标签定义外部的内容（结构元素）<section>标签定义文档中的节（section，区段）。比如章节，页眉，页脚或文档中的其他部分（结构元素）<nav>引导和导航内容链接<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。（结构元素）<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量（内联元素）<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度...
使用HTML5 Canvas创建动态粒子网格动画【代码】【图】
最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧： 首先当然是添加一个canvas了：<canvasid="canvas"></canvas>下面是样式：<style>#canvas{position: absolute;display: block;left:0;top:0;background:#0f0f0f;z-index: -1;}</style>上面canvas的z-index: -1的作用是可以放在一些元素的下面当...
Html5 拖放【代码】
浏览器支持Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。HTML5 拖放实例下面的例子是一个简单的拖放实例：实例<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }function drop(ev) { ev.preventDefault();//allowDrop(ev) ...
基于浏览器的HTML5地理定位【代码】【图】
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，获取浏览器经纬度，并用腾讯地图（大家可以选择自己喜欢的地图）显示出来，实现的最终效果如下图所示：一、检测浏览器是否支持： if (navigator.geolocation) { //console.log("浏览器支持!"); }else {...
html5笔记
1元素指的是从开始标签到结束标签的所有代码<br/>换行，但是换行的间距跟p标签的间距不同空元素在开始标签中进行关闭大多数的html元素可拥有属性大多数的html元素都是可以嵌套的 html属性：1标签可以拥有属性为元素提供更多的信息2属性以键值对的形式出现3常用标签属性：<h1>:align对其方式<body>:bgcolor背景颜色<a>:target规定在何处打开链接（新的页面，默认的是当前页面，一共是4个）4通用属性：class：规定元素的类名id:规定元...
[转]使用 HTML5 IndexedDB API【代码】
本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。本文将介绍如何管理 IndexedDB 数据库。 HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。此...
HTML5 indexedDB前端本地存储数据库实例教程 （转载）【代码】【图】
一、indexedDB为何替代了Web SQL Database？跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。未来一定是indexedDB的，从目前浏览器的兼容性来看，也表明...
jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险主要的方法如下：复制代码代码如下:.data( key, value ).data( obj ).data( key ).data()从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。例如HTML：复制代码代码如下:<div data-role = "page" data-last-value = "43" data-hidden = "...
html5中checkbox的选中状态的设置与获取【代码】
获取checkbox是否选中：$("#checkbox").is(":checked");获得的值为true或false。 设置checkbox是否选中：$("#checkbox").attr("checked", true);//设置为选中状态 $("#checkbox").attr("checked", false);//设置为未选中状态 原文：https://www.cnblogs.com/lhlong/p/11253536.html
HTML5与CSS响应式图片
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？ 什么是响应式图片？ 响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。UI前端框架最新力作！有...
[udemy]WebDevelopment_HTML5【代码】【图】
Build Your First Website 装一个subline text HTML default rule tags with opening and closing 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Jennifer‘s first website</title> 5 </head> 6 <body> 7 Hello world !!!! 8 </body> 9 </html> DEVELOPER FUNDAMENTALS:IIIdoctype says, hey just a heads up a file is going to use HTML5The senior developers get good salaries and good jobs are the ones ful...
HTML5页面增强元素【代码】
<mark>、<figure>、<figcaption>、<details>、<summary>、</progress>、<ol>(新增属性)<!DOCTYPE html><html><head><meta charset="utf-8"><title>页面增强元素</title></head><body><!--mark元素，高亮或标记--><p>纪念中国人民<mark>抗日</mark>战争暨世界反法西斯战争胜利70周年阅兵式（简称9·3阅兵，或者抗战胜利日大阅兵），是中国政府为纪念中国人民抗日战争暨世界反法西斯战争胜利70周年而开展的众多纪念活动中的一项活动。...
完整的堆栈JavaScript路（十五）HTML5 focus 扩大 (扩展点)
HTML5 加入辅助管理 focus 产品特点, 有办法获得焦点文档; 页面加载，用户输入(通常由tab债券)。和 调用代码focus()功能. HTML5新的属性和方法，辅助管理的重点: document.activeElement 财产， 元素。文档载入期间 值为null, 文档载入完毕,保存得是 document.body 的引用。 document.hasFocus()方法， 确定一个文档是否具有焦点。查询文件获悉该元素具有焦点，并确定该文件是否具有焦点，两个最重要的...
初探html5---Video + DOM(视频播放)【代码】
1:HTML5 开发环境下 lang="en"2:<video width="320" height="240" controls="controls"> 其中 controls="controls" controls 属性供添加播放、暂停和音量控件。<div style="text-align:center"> <button onclick="bigen()">播放/暂停</button> <button onclick="big()">大</button> <button onclick="centre()">中</button> <button onclick="small()">小</button></br><video id="video1" width="420" style="margin-top;15...
利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖【代码】【图】
摇一摇JS脚本逻辑：接下来是移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息，该事件的基本使用如下：if (window.DeviceMotionEvent) {window.addEventListener(‘devicemotion‘, handler, !1);lastTime = new Date(); } else {alert(‘你的浏览器不支持摇一摇功能.‘); }devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包...
【我的前端自学之路】【HTML5】Web Socket【图】
以下为自学笔记内容，仅供参考。 转发请保留原文链接：https://www.cnblogs.com/it-dennis/p/10508118.html什么是Web SocketWebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答...
根据地理信息绘画的html5 小游戏 - 简单实现【代码】【图】
好久没写文章了，之前一直有一个想法，就是做一个根据用户行走的路线，获取地理位置，然后把它们绘制出来，最后产生的效果，类似蜗牛行走留下的痕迹。最近思考了一下，搭了一个https，简单实现了一下，提供一下思路给大家看看，具体的细节还有很多需要完善。demo：demo页面地址： （不会泄露你的隐私，请用移动端访问，耐心等待位置获取）https://www.yudonghan.com/snail/1.地理信息接口要做这样一个东西首先要去了解html5提供了哪...