HTML 5 HTML 5 DOCTYPE HTML html head
![<HTML 5> <HTML 5>](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-1.jpg)
![简化的声明 HTML 5 <!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The 简化的声明 HTML 5 <!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-2.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-3.jpg)
![更加语义化的结构 HTML 4 HTML 5 <div id=“header”> <header> <div id=“nav”> <nav> <div id=“article”> <div 更加语义化的结构 HTML 4 HTML 5 <div id=“header”> <header> <div id=“nav”> <nav> <div id=“article”> <div](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-4.jpg)
![更加语义化的结构 <body> <h 1>网页的标题</h 1> <article> <section> <header> <h 1>页头</h 1> </header> </section> <hgroup> 更加语义化的结构 <body> <h 1>网页的标题</h 1> <article> <section> <header> <h 1>页头</h 1> </header> </section> <hgroup>](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-5.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-6.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-7.jpg)
![新的 form 属性 autocomplete – 自动完成 novalidate – 无需验证 新的 form 属性 autocomplete – 自动完成 novalidate – 无需验证](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-8.jpg)
![新input type email url number range Date pickers (date, month, week, time, datetime, datetime-local) 新input type email url number range Date pickers (date, month, week, time, datetime, datetime-local)](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-9.jpg)
![新的 input 属性 autocomplete – 自动完成 autofocus – 自动获得焦点 form – 加入到某form中 form overrides 新的 input 属性 autocomplete – 自动完成 autofocus – 自动获得焦点 form – 加入到某form中 form overrides](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-10.jpg)
![文件API File. List: <input type=“file”> Blob File. Reader URI scheme 文件API File. List: <input type=“file”> Blob File. Reader URI scheme](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-11.jpg)
![html 5的拖拽API 被拖拽元素上的事件:dragstart、 dragend 目标元素上的事件:dragenter、 dragover、 dragleave、 drop 元素属性 draggable=“true” event. data. Transfer对象 html 5的拖拽API 被拖拽元素上的事件:dragstart、 dragend 目标元素上的事件:dragenter、 dragover、 dragleave、 drop 元素属性 draggable=“true” event. data. Transfer对象](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-12.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-13.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-14.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-15.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-16.jpg)
![本地存储 DOM Storage session. Storage local. Storage Web SQL Database 本地存储 DOM Storage session. Storage local. Storage Web SQL Database](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-17.jpg)
![离线应用程序 Server 端设置 Add. Type text/cache-manifest appcache manifest文件 更新缓存 自动更新 手动更新: window. application. Cache. 离线应用程序 Server 端设置 Add. Type text/cache-manifest appcache manifest文件 更新缓存 自动更新 手动更新: window. application. Cache.](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-18.jpg)
![Web. Socket new Web. Socket('ws: //domain/path'); send(msg) onmessage, onerror, onopen, onclose Server:jetty 7/8, j. Web. Socket new Web. Socket('ws: //domain/path'); send(msg) onmessage, onerror, onopen, onclose Server:jetty 7/8, j.](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-19.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-20.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-21.jpg)
![资源 w 3 school. com. cn www. html 5 china. com http: //www. w 资源 w 3 school. com. cn www. html 5 china. com http: //www. w](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-22.jpg)
![END END](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-23.jpg)
- Slides: 23
![HTML 5 <HTML 5>](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-1.jpg)
<HTML 5>
![简化的声明 HTML 5 DOCTYPE HTML html head titleTitle of the documenttitle head body The 简化的声明 HTML 5 <!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-2.jpg)
简化的声明 HTML 5 <!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The content of the document. . . </body> </html> HTML 4有三种声明:Strict、 Transitional 以及 Frameset <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" " http: //www. w 3. org/TR/htm l 4/strict. dtd"> <html> … … </html>
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-3.jpg)
![更加语义化的结构 HTML 4 HTML 5 div idheader header div idnav nav div idarticle div 更加语义化的结构 HTML 4 HTML 5 <div id=“header”> <header> <div id=“nav”> <nav> <div id=“article”> <div](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-4.jpg)
更加语义化的结构 HTML 4 HTML 5 <div id=“header”> <header> <div id=“nav”> <nav> <div id=“article”> <div id=“section”> <div id=“footer”> <div id=“side Bar”> <article> <section> <footer> <aside>
![更加语义化的结构 body h 1网页的标题h 1 article section header h 1页头h 1 header section hgroup 更加语义化的结构 <body> <h 1>网页的标题</h 1> <article> <section> <header> <h 1>页头</h 1> </header> </section> <hgroup>](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-5.jpg)
更加语义化的结构 <body> <h 1>网页的标题</h 1> <article> <section> <header> <h 1>页头</h 1> </header> </section> <hgroup> <h 1>文章一级标题</h 1> <h 2>文章二级标题</h 2> </hgroup> <p>文章内容</p> </section> </article> </body>
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-6.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-7.jpg)
![新的 form 属性 autocomplete 自动完成 novalidate 无需验证 新的 form 属性 autocomplete – 自动完成 novalidate – 无需验证](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-8.jpg)
新的 form 属性 autocomplete – 自动完成 novalidate – 无需验证
![新input type email url number range Date pickers date month week time datetime datetimelocal 新input type email url number range Date pickers (date, month, week, time, datetime, datetime-local)](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-9.jpg)
新input type email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color tel
![新的 input 属性 autocomplete 自动完成 autofocus 自动获得焦点 form 加入到某form中 form overrides 新的 input 属性 autocomplete – 自动完成 autofocus – 自动获得焦点 form – 加入到某form中 form overrides](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-10.jpg)
新的 input 属性 autocomplete – 自动完成 autofocus – 自动获得焦点 form – 加入到某form中 form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) – 重写表单属性 height 和 width list – 关联datalist来限定输入值 min, max 和 step – 用在<input type=range>中 multiple - 规定输入域中可选择多个值 pattern (regexp) - 用于验证 input 域的模式(pattern) placeholder - 提示(hint),描述输入域所期待的值 required - 规定必须在提交之前填写输入域(不能为空)
![文件API File List input typefile Blob File Reader URI scheme 文件API File. List: <input type=“file”> Blob File. Reader URI scheme](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-11.jpg)
文件API File. List: <input type=“file”> Blob File. Reader URI scheme
![html 5的拖拽API 被拖拽元素上的事件dragstart dragend 目标元素上的事件dragenter dragover dragleave drop 元素属性 draggabletrue event data Transfer对象 html 5的拖拽API 被拖拽元素上的事件:dragstart、 dragend 目标元素上的事件:dragenter、 dragover、 dragleave、 drop 元素属性 draggable=“true” event. data. Transfer对象](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-12.jpg)
html 5的拖拽API 被拖拽元素上的事件:dragstart、 dragend 目标元素上的事件:dragenter、 dragover、 dragleave、 drop 元素属性 draggable=“true” event. data. Transfer对象
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-13.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-14.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-15.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-16.jpg)
![本地存储 DOM Storage session Storage local Storage Web SQL Database 本地存储 DOM Storage session. Storage local. Storage Web SQL Database](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-17.jpg)
本地存储 DOM Storage session. Storage local. Storage Web SQL Database
![离线应用程序 Server 端设置 Add Type textcachemanifest appcache manifest文件 更新缓存 自动更新 手动更新 window application Cache 离线应用程序 Server 端设置 Add. Type text/cache-manifest appcache manifest文件 更新缓存 自动更新 手动更新: window. application. Cache.](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-18.jpg)
离线应用程序 Server 端设置 Add. Type text/cache-manifest appcache manifest文件 更新缓存 自动更新 手动更新: window. application. Cache. update()
![Web Socket new Web Socketws domainpath sendmsg onmessage onerror onopen onclose Serverjetty 78 j Web. Socket new Web. Socket('ws: //domain/path'); send(msg) onmessage, onerror, onopen, onclose Server:jetty 7/8, j.](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-19.jpg)
Web. Socket new Web. Socket('ws: //domain/path'); send(msg) onmessage, onerror, onopen, onclose Server:jetty 7/8, j. Websocket
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-20.jpg)
![](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-21.jpg)
![资源 w 3 school com cn www html 5 china com http www w 资源 w 3 school. com. cn www. html 5 china. com http: //www. w](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-22.jpg)
资源 w 3 school. com. cn www. html 5 china. com http: //www. w 3. org/TR/html 5/
![END END](https://slidetodoc.com/presentation_image/cebb22552a5b2d645b3af7f158daf82a/image-23.jpg)
END
12.html?action=
Bhtml?title=
Canvas доска
12.html?title=
Doctype html html head
Php doctype
Doctype frameset
Html teksta noformēšana
Doctype html code
12.html?id=
Language
Xhtml
Simple indexing
Flood suction pump
The attacking firm goes head-to-head with its competitor.
Patientsite com
Parts of leg
The head of moving head disk
7 tones
Pre-head head tonic syllable tail
Moving head disk mechanism
Html 구구단 테이블
Head.php?str=
Html head body title