HTML5开发--HTML5入门

@H_512_2@ 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>

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

 

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>

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

 

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！