![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
细细品味-html5
sungang1120
这个作者很懒,什么都没留下…
展开
-
HTML5学习之——概念篇
HTML5 是下一代的 HTML。 什么是 HTML5?HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的?HTML5 是 W3C 与...原创 2014-05-06 11:17:41 · 68 阅读 · 0 评论 -
SVG 形状学习之——SVG圆形
<circle> 标签可用来创建一个圆。 <circle> 标签<circle> 标签可用来创建一个圆。请把下面的代码拷贝到记事本,然后把文件保存为 "circle1.svg"。把此文件放入您的web目录:<?xml version="1.0" standalone="no"?><!DOCT原创 2014-05-20 14:03:36 · 116 阅读 · 0 评论 -
SVG 形状学习之——SVG椭圆 <ellipse>
<ellipse> 标签可用来创建椭圆。 <ellipse> 标签<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。 请把下面的代码拷贝到记事本,然后把文件保存为 "ellipse1.svg"。把此文件放入您的 web 目录: <?xm...原创 2014-05-20 14:03:59 · 436 阅读 · 0 评论 -
SVG 形状学习之——SVG 线<line>
<line> 标签用来创建线条。 <line> 标签<line> 标签用来创建线条。请把下面的代码拷贝到记事本,然后把文件保存为 "line1.svg"。把此文件放入您的 web 目录:<?xml version="1.0" standalone="no"?><!DOCTYPE svg原创 2014-05-20 14:04:16 · 208 阅读 · 0 评论 -
SVG 形状学习之——SVG不少于三个边的图形 <polygon>
<polygon> 标签用来创建含有不少于三个边的图形。<polygon> 标签<polygon> 标签用来创建含有不少于三个边的图形。请把下面的代码拷贝到记事本,然后把文件保存为 "polygon1.svg"。把此文件放入您的 web 目录:<?xml version="1.0" standalone="no"?&原创 2014-05-20 14:04:42 · 169 阅读 · 0 评论 -
SVG 形状学习之——SVG 折线<polyline>
SVG <polyline> 标签用来创建仅包含直线的形状。 <polyline> 标签<polyline> 标签用来创建仅包含直线的形状。请把下面的代码拷贝到记事本,然后把文件保存为 "polyline1.svg"。把此文件放入您的 web 目录:<?xml version="1.0" standalone="no"原创 2014-05-20 14:05:16 · 1285 阅读 · 0 评论 -
SVG 形状学习之——SVG 自定义路径<path>
<path> 标签用来定义路径。<path> 标签<path> 标签用来定义路径。下面的命令可用于路径数据:M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadr...原创 2014-05-22 10:31:37 · 564 阅读 · 0 评论 -
SVG 滤镜学习之——SVG 滤镜
SVG 滤镜用来向形状和文本添加特殊的效果。SVG 滤镜在 SVG 中,可用的滤镜有:feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeI...原创 2014-05-22 10:31:57 · 251 阅读 · 0 评论 -
SVG 滤镜学习之——SVG 高斯模糊
必须在 <defs> 标签中定义 SVG 滤镜。高斯模糊(Gaussian Blur)<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions ...原创 2014-05-22 10:32:13 · 239 阅读 · 0 评论 -
SVG 渐变学习之——SVG 线性渐变
SVG 渐变必须在 <defs> 标签中进行定义。SVG 渐变渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。在 SVG 中,有两种主要的渐变类型:线性渐变放射性渐变 线性渐变<linearGradient> 可用来定义 SVG 的线性渐变。<linearGrad...原创 2014-05-22 10:32:41 · 281 阅读 · 0 评论 -
SVG 渐变学习之——SVG 放射性渐变
SVG 渐变必须在 <defs> 标签中进行定义。 放射性渐变 <radialGradient> 用来定义放射性渐变。 <radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。 请把下面的...原创 2014-05-22 10:32:56 · 240 阅读 · 0 评论 -
SVG 学习之——SVG 实例
查看 SVG 文件如果没有安装 SVG 查看器,您就无法查看 SVG 文件。注释:Firefox 1.5 和 Opera 9 对 SVG 的支持是原生性的。假如您使用这些浏览器中的一款,就不必安装 SVG 查看器。从 Adobe 免费下载 SVG 查看器。查看 SVG 源代码如需查看 SVG 源代码,请打开这些例子,然后在窗口中右键单击,选择“查看源代码”。...原创 2014-06-09 17:26:43 · 156 阅读 · 0 评论 -
SVG 形状学习之——SVG 矩形<rect>
SVG 有一些预定义的形状元素,可被开发者使用和操作。 SVG 形状SVG 有一些预定义的形状元素,可被开发者使用和操作:矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>路径 <pa...原创 2014-05-19 11:44:46 · 320 阅读 · 0 评论 -
SVG学习之——HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。 HTML 页面中的 SVG下面,你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法。使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本。 注释:当在 H...原创 2014-05-19 11:44:28 · 127 阅读 · 0 评论 -
HTML5学习之——HTML 5 服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。例子:Facebook/Twitter 更新、估价更新、新的博文、...原创 2014-05-19 11:44:03 · 98 阅读 · 0 评论 -
HTML5学习之——HTML 5 视频
许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。检测您的浏览器是否支持 HTML5 视频: function checkVideo(){if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTes...原创 2014-05-06 11:32:57 · 101 阅读 · 0 评论 -
HTML5学习之——HTML 5 Video + DOM
HTML5 <video> - 使用 DOM 进行控制 HTML5 <video> 元素同样拥有方法、属性和事件。 其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。 下例中简单的方法,向我们演示了如何使用 &...原创 2014-05-06 11:36:08 · 148 阅读 · 0 评论 -
HTML5学习之——HTML 5 音频
HTML5 提供了播放音频的标准。 Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。 音频格式当前,audio 元素...原创 2014-05-06 11:41:55 · 86 阅读 · 0 评论 -
HTML5学习之——HTML 5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2 中不...原创 2014-05-06 11:45:55 · 68 阅读 · 0 评论 -
HTML5学习之——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自...原创 2014-05-09 18:16:16 · 83 阅读 · 0 评论 -
HTML5学习之——HTML5 地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。浏览器支持Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。注...原创 2014-05-09 18:16:36 · 132 阅读 · 0 评论 -
HTML5学习之——HTML 5 Web 存储
在客户端存储数据HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTM...原创 2014-05-09 18:16:49 · 82 阅读 · 0 评论 -
HTML5学习之——HTML 5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。 什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从...原创 2014-05-09 18:17:02 · 109 阅读 · 0 评论 -
HTML5学习之——HTML 5 Web Workers
web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运...原创 2014-05-09 18:17:18 · 113 阅读 · 0 评论 -
HTML5学习之——HTML 5 Canvas
canvas 元素用于在网页上绘制图形 什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素。规定元素的 id、...原创 2014-05-19 11:43:15 · 106 阅读 · 0 评论 -
HTML5学习之——HTML5 内联 SVG
HTML5 支持内联 SVG。 SVG 是使用 XML 来描述二维图形和绘图程序的语言 学习之前应具备的基础知识:继续学习之前,你应该对以下内容有基本的了解:HTMLXML 基础如果希望首先学习这些内容,请在本站的首页选择相应的教程。什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG...原创 2014-05-19 11:43:32 · 168 阅读 · 0 评论 -
SVG 基础学习之——SVG 参考手册
来自 W3C 推荐标准 (SVG Version 1.1) 的 SVG 元素 SVG 元素元素列中的链接指向了具体元素的相关属性和更多有用的信息。元素描述a定义超链接altGlyph允许对象性文字进行控制,来呈现特殊的字符数据(例如,音乐符号或亚洲的文字)altGlyphDef定义一系列象性符号的替换(例如,音乐符号或者亚洲文字)...原创 2014-06-09 17:27:01 · 166 阅读 · 0 评论