1.HTML5的内容类型 内容类型描述内嵌向文档中添加其他类型的内容，例如audio、video、canvas和iframe等流在文档和应用的body中使用的元素，例如form、h1和small标题段落标题，例如h1、h2和hgroup等交互与用户交互的内容，例如音频和视频的控件、botton和textarea等元数据通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和title等。短语文本和文本标记元素，例如mark、kdb、sub和sup等片段用友定义页面片...
如今在这个特殊的时代下：flash将死未死，微软和IE的历史问题，html5标准未定，苹果和谷歌的闭源和开源之争，移动互联网的大势所趋，浏览器各自为战…这些都导致web开发者在设计视频解决方案的时候相当困惑。本文围绕这个主题，来探讨一下相关的技术，原理和工具。 编码与格式的误区很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上，用一句话来概括就是：视频的文件后缀...
本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。在线演示地址如下： http://demo.jb51.net/js/2016/html5-book-page/ 实现的代码：XML/HTML Code复制内容到剪贴板div id="shineflip"> div id="shineflip-pages"> canvas id="shineflip-canvas">canvas> ...
这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。源码下载 演示地址 HTML代码XML/HTML Code复制内容到剪贴板div id="container"> div id="leafContainer">div> div id="message"> em>这是基于webkit的落叶动画em> div> div> CSS代码CSS Code复制内容到剪贴板#container { position: relative; height: 700px; width: 500p...
VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。 SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。 SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。 查看 SVG 文件大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便...
小编以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有css3和javascript.通过合理的选择，来实现最优的实现。 PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！ 分三种方式实现： (1) canvas元素结合JS (2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE） (3) CSS3结合Jquery实现 知道如何使用CSS3动画比知道如何使用元素更重要：因...
正如 HTML5 语法中所阐述的，元素可以包含属性（attributes）给一个元素设置各种属性（properties）。 有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。 下面是一个使用 HTML5 属性的例子，演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素： ...属性只能在起始标签中指定，绝对不能用在结束标签中。 HTML5 属性不区分大小写...
最近通过敲Html5+Css3，分享一些自己认为值得学习的知识，分享给大家。 如何绘制一个锯齿状的矩形：如图我们知道绘制图形可以用canvas ，canvas是HTML5出现的新标签，用于在网页上绘制图形，H5的canvas使用Javascript在网页上绘制图形。如上锯齿状的矩形，就是用canvas绘制的。 实现代码：XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> title>锯齿图title> ...
翻转、移动、平移、放大、缩小XML/HTML Code复制内容到剪贴板var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 放大与缩小 context.beginPath(); context.strokeStyle = "#000000"; context.strokeRect(10,10,150,100); // 放大3倍 context.scale(3,3); context.beginPath(); context.stro...
HTML5 概述HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。 HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。 这一新标准中加入了视频播放和拖放等特性，过去这都依赖于第三方浏览器插件，比如 Adobe Flash，Microsoft Silverlight 以及 Google Gears。 浏览器支持最新版 Apple Safari，Mozilla FireFox 和 Opera 支...
contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性，可以被指定为true或false。 除此之外，该属性还有个隐藏的inherit（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被...
问题描述假设我们在 HTML 里面有一个图片上传控件： 代码如下: 注意这个 accept="image/*" 非常重要，它指定了上传的是图片，在移动端的时候会关联到系统的弹窗选择类型等问题，务必加上。 然后，问题是，我们在没有提交这个表单到服务器之前，有没有办法把图片的内容读取出来呢？ 看似简单，都是客户端的文件，应该是可以的，但在之前确实没什么好办法，但是自从有了HTML5，这个功能又回来了，通过FileReader可以轻松的实现这个功...
今天遇到一个新需求，经理要求评论功能需要限制字数，就像微博那样限制最多输入150字，这里就需要实时提醒用户还能输入多少字了。 在最开始的时候，想到的是监听keyup事件，然后计算用户输入的字数，但是有些按键（比如删除键）并不会触发事件。后来查了一下html5新增了一个input事件，这个事件与change事件类似，但change事件是在元素失去焦点时才会触发，input事件在元素值变化时就会触发目前来说除了IE89以外，其它浏览器支持的...
canvas 元素使用 JavaScript 在网页上绘制图像，本身是没有绘图能力。 canvas 是一个矩形区域，可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 下面来做几个示例： 1、填充画布JavaScript Code复制内容到剪贴板"myCanvas" width="200" height="100" style="border:1px solid red;"> "text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); ...
线条属性概述线条的属性共有以下四个：1、lineCap属性lineCap 定义上下文中线的端点，可以有以下 3 个值。 butt：默认值，端点是垂直于线段边缘的平直边缘。round：端点是在线段边缘处以线宽为直径的半圆。square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。 2、 lineJoin属性lineJoin 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性。 miter：默认值，在...