HTML5开发--HTML5入门
HTML5是如今比较火的一个技术，了解了一段时间后发现它的前途的确很好，虽然目前还没有正式发布，但是各大浏览器厂商早已经行动了，国内的磊友已经开发出了基于HTML5的游戏《黎明帝国》等。
目前浏览器支持最好的当属Chrome，Firefox也不错。开发工具可以使用DreamWeaver，但是HTML5中的特性没有自动提示功能。
那么HTML5到底是什么呢？
HTML5=HTML+CSS+JS
一、为什么要用HTML5呢
1、基于HTML5视频将是未来的web视频
HTML5支持的video和audio标签将会是未来的web音视频，这样就不用安装flash播放器了，
2、播放器直接简历在浏览器内部
也就意味着不用在安装类似flash来运行，这回让视频回放的更流程更迅速，占用的系统资源也会更少
3、标签更加标准化，语义化，减轻了代码冗余，统一的标准会让前段工程师们在团队协作上更加容易
而且占用更少的系统资源
二、HTML5与Flash的区别
JavaScript是一种基于对象和事件驱动，并具有相对安全性的客户端脚本语言。常用来给HTML网页添加动态功能，完整的JS实现包括三部分：ECMA,DOM,BOM
HTML5中加入了很多新的JavaScript API。
HTML5优缺点：
优点
1、无需插件
2、开放、免费
3、对搜索引擎友好
缺点
1、由于其目前仍处于草案阶段，浏览器兼容性差
2、开发模式单一，目前基本只靠记事本开发（DreadWeaver也可以，但是暂不支持HTML5新属性）
JS优缺点
优点
1、普及率高，基本每台PC机上都装有FlashPlayer
2、开发人员众多
3、无兼容性问题
4、开发环境成熟
缺点
1、耗电，性能不佳
2、封闭、收费
三、简单的例子
View Code?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Query Selector Demo</title>
<style type="text/css" >
td{
border-style:solid;
border-width:1px;
font-size:300%;
}
td:hover{
background:cyan;
}
#hoverResult{
color:green;
font-size:200%;
}
</style>
</head>
<body>
<section>
<table>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
<p>
Foucs the button, hover over the table cells, and hit Enter to identify them using querySelector('td:hover').
</p>
<button type="button" id="findHover" autofucus>Find 'td:hover'</button>
<p id="hoverResult"></p>
<script type="text/javascript">
document.getElementById("findHover").onclick = function()
{
var hovered = document.querySelector("td:hover");
if(hovered)
{
document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
}
}
</script>
</section>
</body>
</html>
可以通过鼠标在各个单元格上显示颜色
作者 娄立军
上一篇： 作一个可以直接和浏览器进行交互的组件
下一篇： 李元嘉：李渊最宠爱的儿子，七十岁时被赐死