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、封闭、收费

三、简单的例子

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8"/>
        <title>Query Selector Demo</title>
       	<style type="text/css" >
			td{
				border-style:solid;
				border-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>
            
            <div>
            	Foucs the button, hover over the table cells, and hit Enter to identify them using querySelector('td:hover').
            </div>
            <button type="button" id="findHover" autofucus>Find 'td:hover'</button>
            <div id="hoverResult"></div>
            
            <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>

  可以通过鼠标在各个单元格上显示颜色

原文地址:https://www.cnblogs.com/loulijun/p/2378758.html