1、html5
2、css剩下
HTML5
HTML5簡介
什么是HTML5
HTML5 是下一代的 HTML。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。HTML 的上一個版本誕生于 1999 年。自從那以后，Web 世界已經經歷了巨變。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 與 WHATWG 合作的結果。W3C 指 World Wide Web Consortium，萬維網聯盟。WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方決定進行合作，來創(chuàng)建一個新版本的 HTML。
為 HTML5 建立的一些規(guī)則：
新特性應該基于 HTML、CSS、DOM 以及 JavaScript。
減少對外部插件的需求（比如 Flash）
更優(yōu)秀的錯誤處理
更多取代腳本的標記
HTML5 應該獨立于設備
開發(fā)進程應對公眾透明
新特性
HTML5 中的一些有趣的新特性：
-用于繪畫的 canvas 元素
-用于媒介回放的 video 和 audio 元素
-對本地離線存儲的更好的支持
-新的特殊內容元素，比如 article、footer、header、nav、section
-新的表單控件，比如 calendar、date、time、email、url、search
HTML 5 視頻
Web 上的視頻
直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。
視頻格式
如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
<video src="movie.ogg" controls="controls"></video>
controls 屬性供添加播放、暫停和音量控件。包含寬度和高度屬性也是不錯的主意。
<video> 與</video>之間插入的內容是供不支持 video 元素的瀏覽器顯示的
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
實例
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
video標簽屬性
第一個如下圖所示
HTML 5 Video + DOM
HTML5 <video> 元素同樣擁有方法、屬性和事件。
其中的方法用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
下例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設置屬性，以及如何調用方法。
實例
為視頻創(chuàng)建簡單的播放/暫停以及調整尺寸控件
HTML 5 音頻
HTML5 提供了播放音頻的標準
Web 上的音頻
直到現在，仍然不存在一項旨在網頁上播放音頻的標準。今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 audio 元素來包含音頻的標準方法。
audio 元素能夠播放聲音文件或者音頻流。
音頻格式
如何工作
如需在 HTML5 中播放音頻，您所有需要的是：
<audio src="song.ogg" controls="controls">
</audio>
control屬性供添加播放、暫停和音量控件。
<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：
實例
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。要確保適用于 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。
audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：（這樣就是做多收準備 每個類型我都有 就可以做到都顯示）
實例
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
HTML拖放
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
拖放
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注釋：在 Safari 5.1.2 中不支持拖放。
親自試一試
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
1、設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true" />2、拖動什么** - ondragstart 和 setData()**
然后，規(guī)定當元素被拖動時，會發(fā)生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規(guī)定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}在這個例子中，數據類型是
"Text"，值是可拖動元素的 id ("drag1")。3、放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()，進行放置 - ondrop，當放置被拖數據時，會發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目標元素）中
HTML 5 Canvas
canvas 元素用于在網頁上繪制圖形。
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區(qū)域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
詳見w3c實例：把鼠標懸停在矩形上可以看到坐標
HTML5 內聯 SVG
HTML5 支持內聯 SVG。
什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用于定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
SVG 是萬維網聯盟的標準
SVG 的優(yōu)勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優(yōu)勢在于：
SVG 圖像可通過文本編輯器來創(chuàng)建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。
把 SVG 直接嵌入 HTML 頁面
在 HTML5 中，您能夠將 SVG 元素直接嵌入 HTML 頁面中：
實例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Canvas 與 SVG 的比較
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合游戲應用
