最新HTML5简单入门系列精选

最新HTML5简单入门系列精选
  随着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>标签有几个常用属性:
 
  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</td>videoHeight</td>durationendederrorpausedmutedseekingvolumeHeight</td>Width</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 data=ev.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 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 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) ---- 函数名字面意思是增加颜色停止点,就是把刚画的渐变路径定义为1,p是所在路径的位置(0-1之间),c则是渐变到p时候的颜色值。
 
  cxt.drawImage(img,x,y); ---- 图片及起始坐标
 
  运行效果:
 
  本来想把HTML5相关的内容简单罗列一下的,但是写着写着,内容就原来越多,只好先告一段落,一点点增加了。
 
  LZ也是刚刚自学HTML5,很多内容没接触过,有错误请各位大牛园友指导校正。

推荐阅读