自贡市建设局网站,久久建筑网101图集下载,网站开发培训什么,保定网站建设维护随着HTML5的流行#xff0c;LZ作为一个web开发者#xff0c;也决定学习一下前端前沿技术。HTML5 是下一代的HTML#xff0c;它将成为 HTML、XHTML 以及 HTML DOM 的新标准。它是W3C( World Wide Web Consortium)和WHATWG(Web Hypertext Application Technology Working Grou…随着HTML5的流行LZ作为一个web开发者也决定学习一下前端前沿技术。HTML5 是下一代的HTML它将成为 HTML、XHTML 以及 HTML DOM 的新标准。它是W3C( World Wide Web Consortium)和WHATWG(Web Hypertext Application Technology Working Group)合作的结果在2014年10月29日宣布完成。他们为 HTML5 建立的一些规则1、新特性应该基于 HTML、CSS、DOM 以及 JavaScript。2、减少对外部插件的需求(比如 Flash)3、更优秀的错误处理4、更多取代脚本的标记5、HTML5 应该独立于设备6、开发进程应对公众透明Web上的视频播放大多都是通过插件来显示的而HTML5规定了通过一种新加的标签video实现视频播放的标准方法。请看下边的代码标签有几个常用属性video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。video中(source元素下)插入的文本内容是供不支持 video 元素的浏览器显示的。video 元素支持三种视频格式Ogg 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件如下脚本是简单验证当前浏览器是否知否支持video标签的一段js代码video作为DOM元素拥有如下有方法、属性和事件方法play()pause() load()canPlayType?属性currentSrccurrentTimevideoWidth/tdvideoHeight/tddurationendederrorpausedmutedseekingvolumeHeight/tdWidth/td事件playpauseprogresserrortimeupdateendedabortemptyemptiedwaitingloadedmetadata注释在所有属性中只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后其他属性才可用。audio 元素能够播放声音文件或者音频流。audio 元素支持三种音频格式audio标签的使用和video基本一致。拖放是一种常见的特性即抓取对象以后拖到另一个位置。在 HTML5 中拖放是标准的一部分任何元素都能够拖放。如下示例说明拖动的使用1、为了使元素可拖动把 draggable 属性设置为 true 2、当该img元素被拖动时会触发一个ondragstart 事件示例中该事件调用了一个方法drag(event)。ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和值(被拖元素id)该方法将被拖动元素的id存储到事件的dataTransfer对象内ev.dataTransfer.getData()可将该元素取出。注意此处ev.target是被拖动元素3、虽然已经设定了img元素可被拖动但是浏览器默认地无法将数据/元素放置到其他元素中。如果有需要设置某些元素可接受被拖动元素则要阻止它的默认行为这要通过设置该接收元素的ondragover 事件调用event.preventDefault() 方法如果这里我们不设置阻止默认行为图片则会默认打开一个浏览器标签展示该图片同时也不会实现拖放效果。(Firefox会打开标签而chrome不会打开标签但他们均不能实现拖放效果)注意此处ev.target是接收元素通过事件被绑定在哪个元素即可区分下同。4、进行放置 - ondrop当被拖元素移动到接收元素松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件这里也需要调用ev.preventDefault()来阻止默认行为。如果ondragover 没有阻止默认行为则这里设置或不设置效果和上边是一样的。如果ondragover设置了阻止默认行为如果这里不设置则Firefox和chrome均能实现拖放效果只是Firefox会同时打开一个页面展示图片。var dataev.dataTransfer.getData(Text);这句代码将被拖动元素id取出然后将该元素添加到接收元素尾部完成拖放操作。mozilla这样描述dataTransfer对象The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.?看这段解释我以为是存储的元素被序列化之后的流数据通过调试发现获取到的值仅仅是存入的值。其实通过后边ev.target.appendChild(document.getElementById(data));这句代码也可以看出来data就是元素id。画布(canvas元素)是一个矩形区域用于在网页上绘制图形。元素本身是没有绘图能力的所有的绘制工作必须在 JavaScript内部完成。看下边的示例代码canvas标签内的内容是对于不支持该元素的浏览器进行展示的大多数Canvas 绘图 API 都没有定义在 元素本身上而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。getContext(2d) 对象是内建的 HTML5 对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。通过canvas标签的id得到该元素然后获取一个作图上下文对象关于参数2d目前只支持二维作图将来或许还会有3d。Canvas API使用了路径的表示法。但是路径由一系列的方法调用来定义而不是描述为字母和数字的字符串比如画弧方法中调用 beginPath() 和 arc() 方法。一旦定义了路径其他的方法如 fill()都是对此路径操作。实例中调用的函数原型cxt.arc(x,y,radius,start,end,direct) ----?圆心坐标(x,y)半径弧度起始点结束点画弧方向(true-顺时针false-逆时针)cxt.createLinearGradient(x1,y1,x2,y2) ----渐变路径的起始坐标和结束坐标(简单理解就是画了一条直线)addColorStop(p,c) ---- 函数名字面意思是增加颜色停止点就是把刚画的渐变路径定义为1p是所在路径的位置(0-1之间)c则是渐变到p时候的颜色值。cxt.drawImage(img,x,y); ---- 图片及起始坐标运行效果本来想把HTML5相关的内容简单罗列一下的但是写着写着内容就原来越多只好先告一段落一点点增加了。LZ也是刚刚自学HTML5很多内容没接触过有错误请各位大牛园友指导校正。
