首页
关于
友情链接
文章归档
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 MathML
HTML5 MathML HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。 MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。 注意:大部分浏览器都支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari 浏览器查看。 MathML 实例 以下是一个简单的 MathML 实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math> </body> </html> 运行结果图,如下所示: 以下实例添加了一些运算符: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo></mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </body> </html> 运行结果图,如下所示: 以下实例是一个 2×2 矩阵,可以在 Firefox 3.5 以上版本查看到效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>A</mi> <mo>=</mo> <mfenced open="[" close="]"> <mtable> <mtr> <mtd><mi>x</mi></mtd> <mtd><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>z</mi></mtd> <mtd><mi>w</mi></mtd> </mtr> </mtable> </mfenced> </mrow> </math> </body> </html> 运行结果图,如下所示:
2018年05月11日
143 阅读
0 评论
0 点赞
2018-05-11
HTML5 拖放
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 将 RUNOOB.COM 图标拖动到矩形框中。 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。 注意:Safari 5.1.2不支持拖动. HTML5 拖放实例 下面的例子是一个简单的拖放实例: 实例 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动 RUNOOB.COM 图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> 它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。 设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true : <img draggable="true"> 拖动什么 - ondragstart 和 setData() 然后,规定当元素被拖动时,会发生什么。 在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。 dataTransfer.setData() 方法设置被拖数据的数据类型和值: function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } 在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。 放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法: event.preventDefault() 进行放置 - ondrop 当放置被拖数据时,会发生 drop 事件。 在上面的例子中,ondrop 属性调用了一个函数,drop(event): function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } 代码解释: 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开) 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 更多实例 如何在两个 <div> 元素之间拖放图像。
2018年05月11日
139 阅读
0 评论
0 点赞
2018-05-11
HTML5 地理定位
HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位). 注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。 HTML5 - 使用地理定位 请使用 getCurrentPosition() 方法来获得用户的位置。 下例是一个简单的地理定位实例,可返回用户位置的经度和纬度: 实例 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } 实例解析: 检测是否支持地理定位 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象 showPosition() 函数获得并显示经度和纬度 上面的例子是一个非常基础的地理定位脚本,不含错误处理。 处理错误和拒绝 getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数: 实例 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } 错误代码: Permission denied - 用户不允许地理定位 Position unavailable - 无法获取当前位置 Timeout - 操作超时 在地图中显示结果 如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图: 实例 function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; } 在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。 上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。 给定位置的信息 本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。 实例: 更新本地信息 显示用户周围的兴趣点 交互式车载导航系统 (GPS) getCurrentPosition() 方法 - 返回数据 T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。 属性 描述 coords.latitude 十进制数的纬度 coords.longitude 十进制数的经度 coords.accuracy 位置精度 coords.altitude 海拔,海平面以上以米计 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向,从正北开始以度计 coords.speed 速度,以米/每秒计 timestamp 响应的日期/时间 Geolocation 对象 - 其他有趣的方法 watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。 clearWatch() - 停止 watchPosition() 方法 下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone): 实例 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; }
2018年05月11日
128 阅读
0 评论
0 点赞
2018-05-11
HTML5 Video(视频)
function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest) { h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); if (!h264Test) { document.getElementById("checkVideoResult").innerHTML="抱歉你的浏览器不支持HTML5 video标签!." } else { if (h264Test=="probably") { document.getElementById("checkVideoResult").innerHTML="非常棒!你的浏览器支持HTML5 video标签!"; } else { document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; } } } else { if (oggTest=="probably") { document.getElementById("checkVideoResult").innerHTML="非常棒!你的浏览器支持HTML5 video标签!"; } else { document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; } } } else { document.getElementById("checkVideoResult").innerHTML="Sorry. No video support." } } HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准。 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素. 注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。 HTML5 (视频)- 如何工作 如需在 HTML5 中显示视频,您所有需要的是: 实例 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video> <video> 元素提供了 播放、暂停和音量控件来控制视频。 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。 <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。 <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式: 视频格式与浏览器的支持 当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg: 浏览器 MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES NO NO Opera YES (从 Opera 25 起) YES YES MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 视频格式 格式 MIME-type MP4 video/mp4 WebM video/webm Ogg video/ogg HTML5 <video> - 使用 DOM 进行控制 HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。 <video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制. 其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。 例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。 实例 1 为视频创建简单的播放/暂停以及调整尺寸控件: 播放/暂停 放大 缩小 普通 你的浏览器不支持 HTML5 video. var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=600; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; } 上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。 var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=600; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; } 更多参考请查看 。 HTML5 Video 标签 标签 描述 定义一个视频 定义多种媒体资源,比如 <video> 和<audio> 定义在媒体播放器文本轨迹
2018年05月11日
129 阅读
0 评论
0 点赞
2018-05-11
HTML5 Audio(音频)
HTML5 Audio(音频) HTML5 提供了播放音频文件的标准。 互联网上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素. HTML5 Audio - 如何工作 如需在 HTML5 中播放音频,你需要使用以下代码: 实例 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> control 属性供添加播放、暂停和音量控件。 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。 <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件 音频格式及浏览器支持 目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg: 浏览器 MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ YES YES YES Safari 5+ YES YES NO Opera 10+ YES YES YES 音频格式的MIME类型 Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav HTML5 Audio 标签 标签 描述 定义了声音内容 规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用
2018年05月11日
149 阅读
0 评论
0 点赞
1
2
3
...
26