HTML5 - 技术教程文章
HTML5 | Canvas 基本操作【代码】【图】
<canvas> - 定义使用 JavaScript 的图像绘制。 p.s. 无法使用CSS为画布设置大小，要么在<canvas>中使用width和height单独定义，要么在js中设置。canvas的默认画布大小为300×150。 getContext是DOM对象的方法，也就是原生js方法，不能用jQuery对象直接获取 ———————————————————————————————————————————— Demo1 - 绘制矩形 步骤： 获取canvas元素 取得上下文 填充与绘制边框 设置绘制样...
39个让你受益的HTML5教程
闲话少说，本文作者为大家收集了网上学习HTML5的资源，期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个，由于第5个和第8个是反复的。原文在此!1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman毫无疑问,HTML5是一个热门话题。假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的。我将介绍新的语义标签(markups)、 使用canvas进行绘制和动画、视频(<video>)和音频(<au...
10段实用的HTML5代码
1.HTML5编写的CSS ResetCSS Reset也可以写成Reset CSS，即重设浏览器样式。/* html5doctor.com Reset Stylesheet (Eric Meyer‘s Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,sm...
HTML5 调用百度地图API地理定位【代码】
<!DOCTYPE html><html><title>HTML5 HTML5 调用百度地图API地理定位实例</title><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script></head><body style="margin:50px 10px;"><div id="status" style="text-align: center"></div><div style="width:600px;height:480px;border:1...
HTML5全局属性（一）
NEW：HTML 5 中新的全局属性。属性描述accesskey规定访问元素的键盘快捷键class规定元素的类名（用于规定样式表中的类）。contenteditable规定是否允许用户编辑内容。contextmenu规定元素的上下文菜单。dir规定元素中内容的文本方向。draggable规定是否允许用户拖动元素。dropzone规定当被拖动的项目/数据被拖放到元素中时会发生什么。hidden规定该元素是无关的。被隐藏的元素不会显示。id规定元素的唯一 ID。lang规定元素中内容的...
html5 css折叠导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转菜单</title> <link rel="stylesheet" href="style8.css" type="text/css"></head><body><div class="se"><h3><a href="">IT</a></h3><div><img src="imges/it.jpg" ></div> </div><div class="se"><h3><a href="">创投</a></h3><div><img src="imges/kk.jpg" ></div> </div><div class="se"><h3><a href="">探索</a></h3><div><img src=...
HTML5 组件Canvas实现图像灰度化【代码】
1. 新建一个html页面，在body tag之间加入<canvas id="myCanvas">Gray Filter</canvas> 2. 添加一段最简单的JavaScript代码：window.onload = function() { var canvas = document.getElementById("myCanvas");// do something here!!} 从Canvas对象获取绘制对象上下文Context的代码如下：var context = canvas.getContext("2d"); 在html页面中加入一幅图像的html代码如下:<img id="imageSource" src="hanjiaren.jpg" alt="Canvas ...
【ASP.NET 插件】zyUpload的HTML5上传插件【图】
个人能力有限，只能网上找图片批量上传插件，看到一个还不错的插件 zyUpload ，可以用来上传文件，但没有.NET 版本，特修改了下用以批量上传图片，效果图如下：具体代码可查看源代码： zyUpload.zip原文：http://www.cnblogs.com/yc-755909659/p/4884576.html
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)【图】
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html： 复制代码代码如下:<div id="pyramid"> <div></div> </div> css： 复制代码代码如下:<style type="text/css"> #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { po...
html5 postMessage解决跨域、跨窗口消息传递（转）【代码】【图】
仅做学习使用，原文链接：http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同...
详解HTML5中download属性的应用
在传统的html中，某个文件的下载，是这样的： XML/HTML Code复制内容到剪贴板<a href="=/files/abc1234564545.pdf">report</a> 而在HTML 5浏览器中，可以支持download属性了，如下： XML/HTML Code复制内容到剪贴板<a href="=/files/abc1234564545.pdf" download="abc">report</a> download属性的好处在于，在用户下载文件的时候，显示在用户浏览器 中的“另存”为的文件显示框中，显示的是这个downloader属性中显示的 东西了...
SpringMVC+HTML5+websocket即时聊天Demo【图】
websocket的通信形式今天刚学，好处就不说了，网上有很多，下面把写的即时通信的demo记录下来，运行出来像下面一样：?一、spring必须4.0以上，maven的pom文件如下： <dependency><groupId>org.springframework</groupId><artifactId>spring-orm</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>4.2.4.RELEASE</ver...
[HTML5] Accessible Icon Buttons【代码】
Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA. <!DOCTYPE html><html lang="en"><head><title>Button Demo</title><link rel="stylesheet" type="text/css" href="css/demo.css"></head><body><main><button>Help!</button><button><span class="visuallyh...
<input> 标签HTML5 中的新属性
<input> 标签HTML5 中的新属性属性值描述acceptmime_type规定通过文件上传来提交的文件的类型。alignleftrighttopmiddlebottom规定图像输入的对齐方式。不推荐使用。alttext定义图像输入的替代文本。autocompleteonoff规定是否使用输入字段的自动完成功能。autofocusautofocus规定输入字段在页面加载时是否获得焦点。checkedchecked规定此 input 元素首次加载时应当被选中。disableddisabled当 input 元素加载时禁用此元素。formfo...
前端-HTML和HTML5常用标签【代码】
HTML是HyperText Markup Language（超文本标记语言）的简称，它是一种用于创建网页的标准标记语言。标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。HTML 运行在浏览器上，由浏览器来解析。注意：html标签不区分大小写，但是推荐全小写 html文档的后缀名 .html和.htm两种都可以，没有区别。 标签的分类 围堵标签：有开始标签和结束标签，例如<html></html>自闭标签：开始标签和结束标签都在一个标签中...
HTML5/CSS3(PrefixFree.js) 3D文字特效【代码】【图】
之前在园子里看到一个HTML5/CSS3的文字特效(这里)，觉得挺好玩的所以小小的研究了下，不过发现代码都是针对webkit以及FF的所以IE跪了。Runjs我将示例中的代码进行了精简，后来发现CSS大多数没有前缀，我很费解之后发现它引用过来一个PrefixFree，有了这个js就能不用写CSS3的前缀:)PrefixFree?<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>在link中，或是style中，或是dom元素的style中书写CSS...
JavaEE框架Bootstrap HTML5 jQuery SpringMVC maven mybatis shiro ehcache SSH SSM【图】
获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);全部是源码??? ?增删改查的处理类，service层，mybatis的xml，SQL( mysql? ?和oracle)脚本,? ?jsp页面 都生成? ?就不用写搬砖的代码了,生成的放到项目里，可以直接运行B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??Shiro 是一个用 Java 语言实现的框...
ajax与HTML5 history pushState/replaceState实例【代码】【图】
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3432一、本文就是个实例展示三点：我就TM想找个例子，知道如何个使用，使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要借钱筹首付、贷款和领证什么的。HTML5 history相...
html5 canvas 径向渐变2【代码】【图】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>径向渐变</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript"> window.addEventListener(‘load‘,eventWindowLoaded,fals...
基于Html5做音频和视频播放【图】
设置html5标签头<!DOCTYPE html><html lang="en">视频<video id="media" style="width: 100%;height:400px;" controls> <source src="${pageContext.request.contextPath}/file/video/${fileName}"></video> 音频<audio id="media" controls><source src="${pageContext.request.contextPath}/file/audio/${fileName}"/></audio> Js控制播放和暂停var media = $("#media"); if(media[0].paused) {media[0].play();}else {media[0]...
HTML5学习笔记4【代码】
10.表单元素表单元素用于获取用户的输入数据form 表示HTML表单属性： action 表示表单提交的页面 method 表示表单提交的请求方式：有POST和GET两种，默认GET（POST采用表单提交，GET采用超链接提交） enctype 表示浏览器对发生给服务器的数据所采用的编码格式（需要将文件上传的时候才设置），有三种 application/x-www-form-urlencoded 默认编码，不能将文件上传到服务器 multipart/form-data 用于将文件上传...
Hbuilder------html5学习
<head></head>：head部分代表网页头部的意思，这个位置用于存放<title>头部内容. <meta>：元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词； 标签位于文档的头部，不包含任何内容；标签的属性定义了与文档相关联的名称/值对 属性：[必需的属性]content，值为some_text，定义与http-equiv或name属性相关的元信息 [可选属性]http-equiv，值(content-type、expires、refresh、set-cookie)，把...
HTML5⑥【代码】
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>无序列表</title><!--什么是列表列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息！01.前面有默认的实心圆02.每个li独占一行03.适用于我们的新闻列表，导航栏--></head><body><ul><li>好好学习</li><li>好好学习</li><li>好好学习</li></ul></body></html>无序列表<!DOCTYPE html><h...
HTML5创建一个径向/圆渐变【图】
HTML5创建一个径向/圆渐变1、设计源码<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5创建一个径向/圆渐变</title> <script type="text/javascript">/*** 创建一个径向/圆渐变*/function drawCircle(){//找到<canvas>元素var canvas = document.getElementById("canvas");//创建context对象var ctx = canvas.getContext("2d");//创建一个径向/圆渐变var gradient = ctx.createRadialGradient(200,200,5,90,60,...
HTML5表单
1.<form>定义了一个表单。表单中的输入控件必须包含在form元素的标记对内。 2.<from action=“表单处理程序的url” method=“get|post”> 3.<from>属性，元素设定同时使用name和id属性。 4.input：使用type定义不同的控件，文本、口令、复选框、单选框、提交、重置、隐藏域、图像。 5.select和option：组合使用，创建下拉列表。 6.多行输入文本框：textarea 7.文本框：<input type=“text” value=“文本” size=“” maxlenth=“”...
好程序员HTML5大前端分享web前端面试题集锦三
1、HTML语义化的理解？答案：HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS的情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。2、父元素透明，但是又不影响子元素的透明度怎么实现？答案：方法一：用rgba方法二：再加上一层与父元素同级的div装载子元素，定位到子元...
Html5 reset表 2015年1月7日15:02:14【代码】
/*HTML5 Reset :: style.css----------------------------------------------------------We have learned much from/been inspired by/taken code where offered from:Eric Meyer :: http://meyerweb.comHTML5 Doctor :: http://html5doctor.comand the HTML5 Boilerplate :: http://html5boilerplate.com-------------------------------------------------------------------------------*//* Let‘s default this puppy out --...
HTML5学习笔记简明版（11）：新增的API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口。这些接口在全部实现了Document接口的元素对象上进行了实现。HTML5在里面也新添加了几个成员：getElementsByClassName()：用class类获取元素。用这种方法能够查询不论什么带有class属性且带有符合该class參数值的元素和Document对象（比如：SVG和MathML）。innerHTML：一种解析和序列化HTML/XML文档的方式，该属性在曾经版本号的浏览器里仅仅支持HTML...
基于 HTML5 WebGL 的地铁站 3D 可视化系统【代码】【图】
前言工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运...
HTML5 audio
声音标签audio的基本属性及使用audio 标签主要定义播放声音文件或者音频流的标准，目前所有主流浏览器都支持该标签，支持三种音频格式，分别为Ogg、Mp3和Wav。如果需要在HTML5网页中播放音频，输入的基本格式如下<audio src="song.ogg" controls="controls"></audio>其中，src属性是规定要播放的音频的地址， control 属性供添加播放、暂停和音量控件，<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。au...