![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
精通HTML5
文章平均质量分 71
yixuan_1
这个作者很懒,什么都没留下…
展开
-
HTML5教程之video标签的应用
HTML5教程之video标签的应用与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了。video标签: IE9FireFox 5.0Safari 5.5转载 2013-09-26 10:58:46 · 787 阅读 · 0 评论 -
HTML5教程-用Canvas标签绘制矩形
HTML5教程-用Canvas标签绘制矩形本文教大家如何在canvas上绘制矩形,当你学会后,可以再举一反三的做一下练习。注:本节内容,需要您有JS基础才能更好地理解。绘制矩形的步骤:1、在页面上创建一个canvas标签首先在页面上建立一个canvas标签,因为我们所有的操作都要在canvas元素上完成。2、使用js取得canvas元素由转载 2013-09-26 12:17:52 · 1020 阅读 · 0 评论 -
HTML5教程-Canvas标签中的矩阵变换
HTML5教程-Canvas标签中的矩阵变换我们到现在为止,已经学习了利用坐标变换而实现的图形变换技术,当利用坐标变换不能满足我们的需要时,我们可以利用矩阵变换技术。接下来,我们将介绍更为复杂的矩阵变换变形技术。矩阵是用来专门实现图形变形的,它与坐标一起配合使用,达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个矩阵进行修改,那么接下来绘制转载 2013-09-26 12:42:30 · 1019 阅读 · 0 评论 -
HTML5教程-用Canvas标签绘制坐标变换图形
HTML5教程-用Canvas标签绘制坐标变换图形绘制图形的时候,我们可能经常会想到旋转图形,或者对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,就能实现这种效果。在计算机上绘制图形的时候,是以坐标点为基准来进行绘制的,默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交转载 2013-09-26 12:43:52 · 1339 阅读 · 0 评论 -
HTML5表单教程之Form新属性的应用
在HTML5中增加了许多新的标签和功能属性,那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢?请往下看。假如咱们需要把页面中不同的表单元素提交,而这些表单元素又分布在HTML中的各个位置,那么Form就只能包含所有的Form标签了。旧方法:form id="form1" action="http://www.w3cfuns.com/"> input i转载 2013-09-26 10:50:43 · 874 阅读 · 0 评论 -
HTML5教程之音频Audio标签应用
HTML5教程之音频Audio标签应用在过去,我们如果想在Web上播放音乐,基本都是通过Flash来播放,但并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放音乐了。audio标签:目前HTML5的audio标签仅支持3种音频格式,如下表: IE9FireFox转载 2013-09-26 11:18:57 · 564 阅读 · 0 评论 -
用HTML5 Canvas画的时钟
用HTML5 Canvas画的时钟效果图> html> head> meta charset="utf-8"> title>canvas钟表_by http://www.sitejs.cntitle> style> #c1{ background:-webkit-radial-gradient(#ccc,#930); display:block; margin:100px转载 2013-09-26 11:33:12 · 1390 阅读 · 0 评论 -
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下《HTML5教程-用Canvas标签绘制矩形》中指定填充的颜色fillStyle。绘制线性渐变时,我们需要使用到一个新的对象-LinearGradient对象,使用图形上下文对象的create转载 2013-09-27 12:03:12 · 820 阅读 · 0 评论 -
HTML5教程实例-用Canvas标签绘制圆形
HTML5教程实例-用Canvas标签绘制圆形如果想要绘制一个圆形是不是还跟矩形一样呢?绘制圆形的步骤:1、开始创建路径首先使用图形上下文对象的beginPath()方法。2、创建圆形路径创建圆形路径时,需要使用圆形上下文对象的arc()方法。arc(x, y, radius, startAngle, endAngle, anticloc转载 2013-09-27 11:53:55 · 1086 阅读 · 0 评论 -
HTML5教程实例-用Canvas制作径向渐变图形
HTML5教程实例-用Canvas制作径向渐变图形上节课,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习,我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradient();如果我们要绘制径向渐变我们也有类似的方法,如下:context.createRadialGradient(xStart,转载 2013-09-27 11:57:14 · 876 阅读 · 0 评论 -
HTML5教程实例-Canvas标签-坐标变换与路径结合使用
HTML5教程实例-Canvas标签-坐标变换与路径结合使用到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢?我们需要对矩形变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候,那么要考虑的事情就 多了。因为使用坐标变换之后,已经创建好的路径就不可用了。必须要重新创建路径,重新创建路径后,坐标变换方法又失效了。转载 2013-09-27 12:03:54 · 943 阅读 · 0 评论 -
HTML5教程-如何在页面上放置Canvas
HTML5教程-如何在页面上放置Canvas本文介绍在HTML5中最吸引眼球的一个标签——Canvas,我相信有很多人学习HTML5就是为了Canvas。内容非常简单,主要是为大家介绍Canvas标签的使用。在我们学习它之前稍微补充一下知识,虽然有点理论,但以下稍微理论点的东西还是很有用的。Canvas标签的基础知识:canvas是HTML5中新增加的一个重要元转载 2013-09-26 12:16:52 · 2380 阅读 · 0 评论 -
HTML5表单教程之input新增加的URL类型与email类型应用
HTML5表单教程之input新增加的URL类型与email类型应用在过去我们制作此种类型输入框,会用到不少JS验证,如今,有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。1、URL类型:form> input name="urls" type="url" value=""/> in转载 2013-09-26 11:30:54 · 1458 阅读 · 0 评论 -
HTML5表单教程之input新增加的六种时间类型
HTML5表单教程之input新增加的六种时间类型今天介绍一下input在HTML5中新增加的时间类型的应用,如果在以下这几种输入框中输入的格式不正确,是无法提交的。注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器1、Date类型:form> input id="w3cfuns_date" name=转载 2013-09-26 11:27:25 · 18901 阅读 · 1 评论 -
HTML5教程-meter标签的应用
HTML5教程-meter标签的应用meter标签:此标签与progress百分比标签差不多,它主要表现规定范围内的数量值,例如磁盘的食用量,对某个候选者人数占总投票人数的比例值等,如下图:meter有六个属性:属性名称描述value在元素中表现出来的实际数量值。该属性缺省值为0,可以给该属性指定浮点数小数值。转载 2013-09-26 12:21:51 · 1889 阅读 · 0 评论 -
HTML5教程之progress标签的应用
HTML5教程之progress标签的应用progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条。在HTML5中我们终于可以不用模拟了。progress id="W3Cfuns_progress" max="100">progress> progress属性:value:表示当前进度max:表示总进度注:v转载 2013-09-26 12:22:14 · 876 阅读 · 0 评论 -
HTML5教程之details展开收缩标签的应用
HTML5教程之details展开收缩标签的应用details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。注:目前仅Chrome支持此标签。details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩。detalis标签:案例1:转载 2013-09-26 12:27:16 · 1405 阅读 · 0 评论 -
HTML5教程之mark标签的应用
HTML5教程之mark标签的应用mark标签:mark元素表示页面中需要突出或高亮显示的内容,在搜索结果中也常常出现,比如检索结果中的关键词高亮显示。案例:> html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-转载 2013-09-26 12:27:51 · 964 阅读 · 0 评论 -
HTML5教程之figure标签的应用
HTML5教程之figure标签的应用figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。figure用友一个子标签——figcaption标签。注意:一个figure元素内最多只允许放置一个figcap转载 2013-09-26 12:30:38 · 1273 阅读 · 0 评论 -
HTML5教程之FileList文件列表对象的应用
HTML5教程之FileList文件列表对象的应用在过去,上传文件的时候,我们每次都只能一次选择一个文件。如果想实现多文件上传,要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能,是轻而易举的事情。FileList对象:FileList对象,其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需要在原有的file类型的Inpu转载 2013-09-26 12:34:45 · 8118 阅读 · 0 评论 -
HTML5教程之OL列表的新改进
HTML5教程之OL列表的新改进在HTML5中的OL被改进了,为它增加了start和reversed两个新属性。start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推ol start="50"> li>首页li> li>阅览室li> li>我的li>转载 2013-09-26 12:37:16 · 665 阅读 · 0 评论 -
HTML5教程之datalist标签自动补全
HTML5教程之datalist标签自动补全datalist标签:datalist介绍:datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一转载 2013-09-26 12:40:42 · 3320 阅读 · 0 评论 -
HTML5表单教程之4种自动验证属性
HTML5表单教程之4种自动验证属性1、required属性:form> input id="w3cfuns_required" name="w3cfuns.com" required type="text"/> input type="submit" value="提交"/> form> required属性可以用用在大多数的输入元素上(除转载 2013-09-26 11:21:14 · 1000 阅读 · 0 评论 -
HTML5表单教程之input新增加的5种其他类型1种标签
HTML5表单教程之input新增加的5种其他类型1种标签1、number类型:form> input id="w3cfuns_date" name="w3cfuns.com" type="number"/> input type="submit" value="提交"/> form> 此输入框是一种专门用来输入数字的文本框,并且在提交的时候会验证内转载 2013-09-26 11:22:39 · 1292 阅读 · 0 评论 -
jQuery 2.0.3 源码分析 回调对象 - Callbacks
jQuery 2.0.3 源码分析 回调对象 - Callbacks源码API:http://api.jquery.com/jQuery.Callbacks/jQuery.Callbacks()是在版本1.7中新加入的。它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。 那么jQuery.Callbacks使用场景在哪里?在很转载 2013-10-17 13:45:21 · 912 阅读 · 0 评论