天天看點

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

  可以通過滑鼠在各個單元格上顯示顔色

HTML5開發--HTML5入門

繼續閱讀