首页
关于
友情链接
文章归档
Search
1
centos 32位 64位 下挂vagex一键包代码
718 阅读
2
wordpress转typecho方法
615 阅读
3
一个自制的virto精简版kvm qemu win2003模板 最低64M内存可用
605 阅读
4
PHP 安装
539 阅读
5
暴雨 车被泡了~
478 阅读
默认分类
vps综合利用
登录
/
注册
Search
标签搜索
Uncategorized
安装
mysql
utf-8
网站
google
linux
free
免费
黑色
ssl
一键包
优化
40%
press
vagex
32位
64位
debian
domain
御品VPS
累计撰写
501
篇文章
累计收到
1
条评论
首页
栏目
默认分类
vps综合利用
页面
关于
友情链接
文章归档
搜索到
126
篇与
御品VPS,独特的心情尽在御品VPS,VPS教程,VPS优惠,网络编程,PHP教程,PYthon教程,VPS综合利用,修身养性,修炼功法
的结果
2018-05-11
HTML5 教程
HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 什么是 HTML5? HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的? HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search HTML5 <!DOCTYPE> <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单: <!DOCTYPE html> 最小的HTML5文档 下面是一个简单的HTML5文档: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。 HTML5 的改进 新元素 新属性 完全支持 CSS3 Video 和 Audio 2D/3D 制图 本地存储 本地 SQL 数据 Web 应用 HTML5 多媒体 使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。 HTML5 HTML5 HTML5 应用 使用 HTML5 你可以简单地开发应用 本地数据存储 访问本地文件 本地 SQL 数据 缓存引用 Javascript 工作者 XHTMLHttpRequest 2 HTML5 图形 使用 HTML5 你可以简单的绘制图形: 使用 元素。 使用内联 。 使用 、。 HTML5 使用 CSS3 新选择器 新属性 动画 2D/3D 转换 圆角 阴影效果 可下载的字体 了解更多CSS3知识请查看本站的 语义元素 HTML5 添加了很多语义元素如下所示: 标签 描述 <article> 定义页面独立的内容区域。 <aside> 定义页面的侧边栏内容。 <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。 <command> 定义命令按钮,比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独立的流内容(图像、图表、照片、代码等等)。 <figcaption> 定义 <figure> 元素的标题 <footer> 定义 section 或 document 的页脚。 <header> 定义了文档的头部区域 <mark> 定义带有记号的文本。 <meter> 定义度量衡。仅用于已知最大和最小值的度量。 <nav> 定义导航链接的部分。 <progress> 定义任何类型的任务的进度。 <ruby> 定义 ruby 注释(中文注音或字符)。 <rt> 定义字符(中文注音或字符)的解释或发音。 <rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 <section> 定义文档中的节(section、区段)。 <time> 定义日期或时间。 <wbr> 规定在文本中的何处适合添加换行符。 HTML5 表单 新表单元素, 新属性,新输入类型,自动验证。 已移除元素 以下的 HTML 4.01 元素在HTML5中已经被删除: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> 每一章中的实例 通过我们的 HTML 编辑器,您能够编辑 HTML,然后点击按钮来查看结果。 实例 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的浏览器不支持 video 标签。 </video> </body> </html> 点击 "尝试一下" 按钮查看在线运行结果。 HTML5 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。 IE9 以下版本浏览器兼容HTML5的方法,使用本站的静态资源的html5shiv包: <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> 载入后,初始化新标签的CSS: /*html5*/ article,aside,dialog,footer,header,section,nav,figure,menu{display:block} HTML5 参考手册 在本站中你可以找到关于HTML5 的标签及属性描述,详细请点击 。
2018年05月11日
183 阅读
0 评论
0 点赞
2018-05-11
HTML5 浏览器支持
HTML5 浏览器支持 你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。 HTML5 浏览器支持 现代的浏览器都支持 HTML5。 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。 正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。 甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。 将 HTML5 元素定义为块元素 HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block: 实例 header, section, footer, aside, nav, main, article, figure { display: block; } 为 HTML 添加新元素 你可以为 HTML 添加新的元素。 该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> : 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script> document.createElement("myHero") </script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html> JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。 Internet Explorer 浏览器问题 你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是: Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。 我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。 注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定): <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> 针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。 完美的 Shiv 解决方案 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>我的第一篇文章</h1> <article> 菜鸟教程 —— 学的不仅是技术,更是梦想!!! </article> </body> </html> html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
2018年05月11日
194 阅读
0 评论
0 点赞
2018-05-11
HTML5 新元素
HTML5 新元素HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。<canvas> 新元素 标签 描述 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 定义音频内容 定义视频(video 或者 movie) 定义多媒体资源 <video> 和 <audio> 定义嵌入的内容,比如插件。 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 新表单元素 标签 描述 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 规定用于表单的密钥对生成器字段。 定义不同类型的输出,比如脚本的输出。 新的语义和结构元素HTML5提供了新的元素来创建更好的页面结构: 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本,使其脱离其父元素的文本方向设置。 定义命令按钮,比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 定义对话框,比如提示框 标签包含 details 元素的标题 规定独立的流内容(图像、图表、照片、代码等等)。 定义 <figure> 元素的标题 定义 section 或 document 的页脚。 定义了文档的头部区域 定义带有记号的文本。 定义度量衡。仅用于已知最大和最小值的度量。 定义导航链接的部分。 定义任何类型的任务的进度。 定义 ruby 注释(中文注音或字符)。 定义字符(中文注音或字符)的解释或发音。 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 定义文档中的节(section、区段)。 定义日期或时间。 规定在文本中的何处适合添加换行符。 已移除的元素以下的 HTML 4.01 元素在HTML5中已经被删除: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
2018年05月11日
184 阅读
0 评论
0 点赞
2018-05-11
HTML5 Canvas
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20,20,100,50); var grd=ctx.createLinearGradient(140,20,240,70); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(140,20,100,50); var grd2=ctx.createLinearGradient(20,90,120,90); grd2.addColorStop(0,"black"); grd2.addColorStop("0.3","magenta"); grd2.addColorStop("0.5","blue"); grd2.addColorStop("0.6","green"); grd2.addColorStop("0.8","yellow"); grd2.addColorStop(1,"red"); ctx.fillStyle=grd2; ctx.fillRect(20,90,100,50); ctx.font="30px Verdana"; var grd3=ctx.createLinearGradient(140,20,240,90); grd3.addColorStop(0,"black"); grd3.addColorStop("0.3","magenta"); grd3.addColorStop("0.6","blue"); grd3.addColorStop("0.8","green"); grd3.addColorStop(1,"red"); ctx.strokeStyle=grd3; ctx.strokeText("Smile!",140,120); } 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 浏览器支持 表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。 元素 <canvas> 4.0 9.0 2.0 3.1 9.0 创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制. 注意: 默认情况下 <canvas> 元素没有边框和内容。 <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100"></canvas> 注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML页面中使用多个 <canvas> 元素. 使用 style 属性来添加边框: 实例 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> 使用 JavaScript 来绘制图像 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成: 实例 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 实例解析: 首先,找到 <canvas> 元素: var c=document.getElementById("myCanvas"); 然后,创建 context 对象: var ctx=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 下面的两行代码绘制一个红色的矩形: ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。 fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 Canvas 坐标 canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。 意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。 坐标实例 如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上,显示定位坐标。 X Y Canvas - 路径 在Canvas上画线,我们将使用以下两种方法: moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标 绘制线条我们必须使用到 "ink" 的方法,就像stroke(). 实例 定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条: 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas2"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 在canvas中绘制圆形, 我们将使用以下方法: arc(x,y,r,start,stop) 实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill(). 实例 使用 arc() 方法 绘制一个圆: 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas3"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); Canvas - 文本 使用 canvas 绘制文本,重要的属性和方法如下: font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本 使用 fillText(): 实例 使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心): 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas4"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); 使用 strokeText(): 实例 使用 "Arial" 字体在画布上绘制一个高 30px 的文字(空心): 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas5"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50); Canvas - 渐变 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下有两种不同的方式来设置Canvas渐变: createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1. 使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。 使用 createLinearGradient(): 实例 创建一个线性渐变。使用渐变填充矩形: 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas6"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); 使用 createRadialGradient(): 实例 创建一个径向/圆渐变。使用渐变填充矩形: 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas7"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); Canvas - 图像 把一幅图像放置到画布上, 使用以下方法: drawImage(image,x,y) 使用图像: 实例 把一幅图像放置到画布上: 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById("myCanvas8"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); } JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); HTML Canvas 参考手册 标签的完整属性可以参考 HTML <canvas> 标签 Tag 描述 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
2018年05月11日
181 阅读
0 评论
0 点赞
2018-05-11
HTML5 内联 SVG
HTML5 内联 SVG HTML5 支持内联 SVG。 SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。 把 SVG 直接嵌入 HTML 页面 在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中: 实例 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html> 结果: 抱歉, 你的浏览器不支持内联SVG. 学习更多关于 SVG 教程, 请访问 . SVG 与 Canvas两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。 Canvas 与 SVG 的比较 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas SVG 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用
2018年05月11日
155 阅读
0 评论
0 点赞
1
2
...
26