omiga

尽管HTML5草案最终定稿要在遥远的2012，而最终的标准的正式发布可能会在更遥远的2022，但是还是可以YY一下，听说safari4已经支持HTML5了～···

HTML5主要在嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档方面增加了很多新的特性，同时也包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

• <article>
• <aside>
• <audio>
• <canvas>
• <command>
• <datagrid>
• <datalist>
• <datatemplate>
• <details>
• <dialog>
• <embed>
• <event-source>
• <figure>
• <footer>
• <header>
• <m>
• <meter>
• <nav>
• <nest>
• <output>
• <progress>
• <rule>
• <section>
• <source>
• <time>
• <video>

同时HTML5还增加了7个标准属性，而不再支持HTML 4.01 中的accesskey属性。

• contenteditable　设置是否允许用户编辑元素。
• contentextmenu　给元素设置一个上下文菜单。
• draggable　设置是否允许用户拖动元素。
• irrelevant　设置元素是否相关。不显示非相关的元素。
• ref　引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。
• registrationmark　为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。
• template　引用应该应用到该元素的另一个文档或本文档上另一个位置。

当然，也更新了很多事件属性。

• onabort　发生 abort 事件时运行脚本。
• onbeforeonload　在元素加载前运行脚本。
• oncontextmenu　当菜单被触发时运行脚本。
• ondrag　只要脚本在被拖动就运行脚本。
• ondragend 　在拖动操作结束时运行脚本。
• ondragenter　当元素被拖动到一个合法的放置目标时，执行脚本。
• ondragleave　当元素离开合法的放置目标时。
• ondragover　只要元素正在合法的放置目标上拖动时，就执行脚本。
• ondragstart　在拖动操作开始时执行脚本。
• ondrop　当元素正在被拖动时执行脚本。
• onerror　当元素加载的过程中出现错误时执行脚本。
• onmessage　当 message 事件触发时执行脚本。
• onmousewheel　当鼠标滚轮滚动时执行脚本。
• onresize　当元素调整大小时运行脚本。
• onscroll　当元素滚动条被滚动时执行脚本。
• onunload　当文档卸载时运行脚本。

一年了，真快～···虽然我想写出一个更为惊世骇俗的开场白，但，此时，我只能发出这样平静的感叹！

有些感悟还是不写出来了，大家都自己去感悟吧～···

月初因为户口的事回了趟学校，拍了几张照片，爬了一次山，看了场电影，吃了几顿饭，见了几个人～···

[云麓池，早上七点多阳光就很灿烂了！]

回来这一个星期也主要在忙工作的事情，基本上算是尘埃落定了～···谢谢各位！

PS：太热了～···

很简单的一个应用，实现方式当然也是多种多样，最直接的，通过<img>的src属性，但我想这是最废材的方法了，这样一个效果，你至少需要两张图片，然后是更多的DOM操作，你还要面对图片下载延迟的问题。还有啥性能（1，2）可言？

于是我写了以下的实现方式（DEMO）：

function star(id){
	var star = $(id);
	var stars = $(id).getElementsByTagName("li");
	for(var i=0; i<stars.length; i++){
		stars[i].starNum = i+1;
		stars[i].onmouseover = function(){
			star.star = this.starNum;
			star.style.backgroundPosition = 'left '+(-parseInt(this.starNum)*30)+'px';
		}
		stars[i].onclick = function(){
			alert(star.star);
		}
	}
	star.onmouseout = function(){
		star.star = 0;
		this.style.backgroundPosition = 'left top';
	}
}
function $(id){return document.getElementById(id);}

当然要依据特定的DOM，这种方式通过改变背景图片的位置来实现，看起来似乎已经很完美了，可惜这只是较之于src的实现方法而言。

再看一个TZ的改进的版本（DEMO）：

    function $(element){
      return document.getElementById(element) ;
    }
    var obj = $('outter').getElementsByTagName("li") ;
    for (var i=0,k;k=obj[i];i++ ) {
      k.no = i ;
      k.onmouseover = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left -30px' ;
        }
      }
      k.onmouseout = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left top' ;
        }
      }
    }

很显然，这个写法比我的又更优化了一些。虽然都是通过改变背景图片的坐标来实现，但是，我使用了一个30K的jpg图片，TZ使用的却是一个只有599B的gif图片，但即使不使用gif，他的图片也会比我的小很多，大概是15倍左右～···，因为具体的实现方式决定了。虽然他的方法增加了更多的DOM操作，但是最大限度地优化网络传输方面的性能，总体性能是最佳的！

只有一个感概：只要有可能，就要最大限度的减少页面下载量，就要最大限度的提升代码性能！

又老了一岁～·······

谢谢MM画了一晚上的画～···恩，今年闰月，还有一次～···哈哈～···