zoukankan      html  css  js  c++  java
  • 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>
    

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

  • 相关阅读:
    [转]给嵌入式系统工程师的十个建议
    About Career Links
    Oh My, JAVA?!
    All Maling-Lists
    ALSA Links
    [Music Links]
    [Android-Building]/usr/bin/ld: skipping incompatible /usr/lib/gcc/x86_64-linux-gnu/4.6.1/../../../liblzo2.so when searching for -llzo2
    Debugging for Unfortunately, the process android.process.media has stopped
    [Quote] How To Change, Customize & Create Android Boot Animation [Guide]
    Share folders on your local Windows PC to remote Linux PC
  • 原文地址:https://www.cnblogs.com/loulijun/p/2378758.html
Copyright © 2011-2022 走看看