標籤:html5 css3 web svg canvas
1.為 HTML5 建立的一些規則:
新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
減少對外部外掛程式的需求(比如 Flash)
更優秀的錯誤處理
更多取代指令碼的標記
HTML5 應該獨立於裝置
開發進程應對公眾透明
2.HTML5 中的一些有趣的新特性:
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素,比如 article、footer、header、nav、section
新的表單控制項,比如 calendar、date、time、email、url、search
3.HTML5 <video> - 使用 DOM 進行控制
4.HTML5規定了一種通過audio元素來包含音訊標準方法。audio元素能夠播放音效檔或者音頻流。
5. 拖放(Drag 和 drop):
ondragstart,setData(),ondragover,ondrop
6.canvas元素用於在網頁上繪製圖形,擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法:線條、圓形、漸層、映像
7.HTML5 支援內嵌 SVG。什麼是SVG?
SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
SVG 用於定義用於網路的基於向量的圖形
SVG 使用 XML 格式定義圖形
SVG 映像在放大或改變尺寸的情況下其圖形品質不會有損失
SVG 是全球資訊網同盟標準
與其他映像格式相比(比如 JPEG 和 GIF),使用 SVG 的優勢在於:
SVG 映像可通過文字編輯器來建立和修改
SVG 映像可被搜尋、索引、指令碼化或壓縮
SVG 是可伸縮的
SVG 映像可在任何的解析度下被高品質地列印
SVG 可在映像品質不下降的情況下被放大
8.下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
依賴解析度
不支援事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式儲存結果映像
最適合映像密集型的遊戲,其中的許多個物件會被頻繁重繪
SVG
不依賴解析度
支援事件處理器
最適合帶有大型渲染地區的應用程式(比如Google地圖)
複雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快)
不適合遊戲應用
9.HTML5 提供了兩種在用戶端儲存資料的新方法:
localStorage - 沒有時間限制的資料存放區
sessionStorage - 針對一個 session 的資料存放區
之前,這些都是由 cookie 完成的。但是cookie不適合大量資料的儲存,因為它們由每個對伺服器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。
10.HTML5引入了應用程式緩衝,這意味著web應用可進行緩衝,並可在沒有網際網路串連時進行訪問。
應用程式緩衝為應用帶來三個優勢:
離線瀏覽 - 使用者可在應用離線時使用它們
速度 - 已緩衝資源載入得更快
減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源
如需啟用應用程式緩衝,請在文檔的<html>標籤中包含manifest屬性
manifest檔案需要配置正確的 MIME-type,即"text/cache-manifest"。必須在 網頁伺服器上進行配置
11.當在 HTML 頁面中執行指令碼時,頁面的狀態是不可響應的,直到指令碼已完成。
web worker 是運行在背景 JavaScript,獨立於其他指令碼,不會影響頁面的效能。您可以繼續做任何願意做的事情:點擊、選取內容等等,而此時 web worker 在後台運行。
12.HTML5 伺服器發送事件(server-sent event)允許網頁獲得來自伺服器的更新
Server-Sent 事件 - 單向訊息傳遞
Server-Sent 事件指的是網頁自動擷取來自伺服器的更新。
13.HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
14.HTML5 的新的表單元素
datalist:元素規定輸入欄位的選項列表
keygen:提供一種驗證使用者的可靠方法
output:用於不同類型的輸出,比如計算或指令碼輸出
15.HTML5 的新的表單屬性
新的 form 屬性:
autocomplete
novalidate
新的 input 屬性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required