2007 2004 AJAX HTML 5 HTML 5 HTML

2007 2004 AJAX HTML 5初体验 HTML 5 & HTML 5 Web 2. 0 Web

HTML 5初体验 DRAG &DR OP F 强增 M R O 语义化标记数据存储 CA

HTML 5初体验 <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>HTML

HTML 5初体验 ØTrident：又称为MSHTML，IE 其他：Maxthon遨游、世界之窗、腾讯TT、 Netcapter、Avant等等，但Trident只能应用于 Windows平台，且是不开源的 ØGecko：Mozilla Firefox Netscape 能在Microsoft Windows、Linux和Mac. OS X等主要操作系统上运行 ØWeb.

HTML 5初体验测试具 Ø 前期开发仅测试FF& IE 6 & IE 7 & IE 8

Canvas在网站设计中的应用 • CANVAS 绘图API Canvas标记由Apple在Safari 1. 3 Web浏览器中引入 <canvas id=”canvas” width=” 400″ height=”

Canvas在网站设计中的应用 Ø Java. Script在设计中的应用 Ø Java. Script与HTML 5 BOM Ø Java. Script应用思想

增强的表单Form • 放在页面任何位置，通过新增的form属性指向ID • <FORM id=myform> <INPUT> . . . </FORM> • <INPUT value=“

增强的表单Form 自动获取焦点 autofocus属性 <input type="text" id=“a" name=“a" autofocus /> 新版Chrome或Safari (FF也可)

增强的表单Form • 表单验证功能判断必填项 <input type="text" id="username" name="username" required autofocus /> 判断数据格式 email输入类型：<input type="email“

增强的表单Form • 滑动块输入 • <input type="range" min="1" max="100" step="10" name="s" /> Opera或Chrome或Safari

增强的表单Form • 数字输入框（ Opera或Chrome ） • <input type=”number”/> • <input type="number" id="count" name="count" min="0"

增强的表单Form • 日期选择框 • <input type="date" name="birthday" />

媒体支持：Video、Audio <audio controls> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“test. ogg" /> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="test. mp 3" /> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="test.

Slides: 80

Download presentation

2007 2004 AJAX HTML 5初体验 HTML 5 & HTML 5 Web 2. 0 Web Applications 1. 0 (WHATWG) DIV+CSS 2002 2000 XHTML 1 1999 HTML 4. 01 CSS 2. 0 1998 HTML 3. 2 -->HTML 4. 0 1997 1996 CSS 1. 0+Java. Script 1994 HTML 2. 0 1991 HTML

HTML 5初体验 DRAG &DR OP F 强增 M R O 语义化标记数据存储 CA S A NV VIDEO CONTENTEDITABLE &AUD IO

HTML 5初体验 <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>HTML 5 Demo</title> <body> <header><h 1></h 1><h 2></header> <nav><ul><li></li></ul></nav> <section> <article></article> </section> <aside></aside> <footer></footer> </body> </html> HTML 4 HTML 5

HTML 5初体验

HTML 5初体验 ØTrident：又称为MSHTML，IE 其他：Maxthon遨游、世界之窗、腾讯TT、 Netcapter、Avant等等，但Trident只能应用于 Windows平台，且是不开源的 ØGecko：Mozilla Firefox Netscape 能在Microsoft Windows、Linux和Mac. OS X等主要操作系统上运行 ØWeb. Kit：Safari、Chrome ØPresto： Opera

HTML 5初体验测试具 Ø 前期开发仅测试FF& IE 6 & IE 7 & IE 8 , 后期优化时加入Opera & Chrome & Safari; Ø 建议测试顺序: Fire. Fox–>IE 7–>IE 8–>IE 6–>Opera–>Chrome– >Safari, 建议安装firebug及IE Tab Plus插件.

Canvas在网站设计中的应用 • CANVAS 绘图API Canvas标记由Apple在Safari 1. 3 Web浏览器中引入 <canvas id=”canvas” width=” 400″ height=” 300″/> Java. Script脚本的支持

Canvas在网站设计中的应用 Java. Script?

Canvas在网站设计中的应用 Ø Java. Script在设计中的应用 Ø Java. Script与HTML 5 BOM Ø Java. Script应用思想

增强的表单Form • 放在页面任何位置，通过新增的form属性指向ID • <FORM id=myform> <INPUT> . . . </FORM> • <INPUT value=“ 2012” form=“myform">

增强的表单Form 自动获取焦点 autofocus属性 <input type="text" id=“a" name=“a" autofocus /> 新版Chrome或Safari (FF也可)

增强的表单Form • 表单验证功能判断必填项 <input type="text" id="username" name="username" required autofocus /> 判断数据格式 email输入类型：<input type="email“ id="uemail“ name="uemail" placeholder="example@domain. com" required /> url输入类型：<input type=url>

增强的表单Form • 滑动块输入 • <input type="range" min="1" max="100" step="10" name="s" /> Opera或Chrome或Safari