• 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>
    

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

  • 相关阅读:
    人工智能
    华盛顿邮报启用核查事实机器人,新闻行业路指何方
    被算法控制的网络
    新型机器人闯入职场:到底是工作缔造者还是工作终结者?华盛顿邮报
    有情感会说话,虚拟人脸Zoe诞生
    IBM Watson将最终适应智能机,可以进行疾病诊断
    我们用大数据创造没人能理解的人工智能
    在DNA中存储数据成为现实
    matlab 工具箱
    背后的原因——是时候让计算机理解我们的意图、而非表面意思
  • 原文地址:https://www.cnblogs.com/loulijun/p/2378758.html
Copyright © 2020-2023  润新知