HTML5技术分析

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTMl5结构元素 <nav>
• <nav>元素用构建一个页面或一个站点内的链接， <nav>
并不是链接的每一个集合都是一个<nav>，比如：赞助商的链接列表及搜索结果页面就不是，因为他们是当前页面的主内容。
<nav> <p><a href=“/”>Home</a></p> <p><a href=“/about”>About</a></p> </nav>
– Canvas – Video/Audio – Drag&Drop – Geolocation – Application Cache – Database Storage – X-Document Messaging
HTML5新增的元素
• • 结构元素
– header, footer, section, article, nav...
• 文件上传控件
– <input type="file" accept = "image/png" />
• •
ቤተ መጻሕፍቲ ባይዱ
重复的模型
– add, remove, move-up, move-down
内建表单验证
– <input type=“email” required /> – <input type="number" min=10 max=100 step=3/>
支持HTML5的浏览器
• FireFox 3.1+
–offline storage and canvas –Geolocation/Web Workers/ ContentEditable –Gecko(more HTML5 APIS)
• Internet Explorer 8.0+
–embed element and contentEditable attribute –cross-document messaging
HTML5对表单的支持
• 新的控件类型
– <input type="url|email|date|tel|search|datetime|date|month|week|datet ime-local|number|range|color"> – <select data="http://domain/getoptions"></select>
HTMl5结构元素 <article> <article>
• 表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专用于独立地分类或复用。（例如：一个博客的帖子，一篇文章，一个视频文件等。）和<nav>一样，标题位于这一元素内部，如：实例一：
•
<h1>My article</h1> <article> <p>Blah blah</p> </article> 这样的写法在规定上是不正确的，应该如下写法： <article> <h1>My article</h1> <p>Blah blah</p> </article>
HTML5新增的属性
– contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template, placeholder, autofocus, required, async, manifest...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
多媒体及交互式元素
– video, audio... – details, menu, command...
•
块级语义及行内元素
– aside, figure, dialog... – time, meter, mark, progress...
• •
表单控件
– email, url, datetime, number, range, color...
<!doctype html> <html lang=en> <head> <title>………</title> </head> <body> <header> <h2>……</h2> <nav>……</nav> </header> <nav> <h2>………</h2> <ul> <li><a href=“#”>………</a></li> <li><a href=“#”>………</a></li> </ul> </nav> <article> <h1>………</h1> <p>………</p> </article> <article> <h1>………</h1> <p>………</p> </article> <footer> <p> <small>………</small> </p> </footer> </body>
支持HTML5的浏览器
• Opera 9.5+
– Cross-document messaging – Server-sent events – Web Forms 2.0 – Canvas and video
• Safari 3.1+
– <video> and <audio> tags – Offline data storage API – Webkit(Iphone/Chrome/Android/ Nokia s60/Palm's WebOS)
HTML5概述
HTML5优点及新特性：
新特性应该基于HTML、CSS、DOM和JavaScript。减少了对外部插件的需求（如：Flash）。更优秀的错误处理。更多取代脚本的标记。 HTML5应该独立于设备。用于绘画的canvas元素。用于媒介回放的video和audio元素。对本地离线存储的更好的支持。新元素和表单控件。
HTMl5结构元素 <nav>
• <nav>可以和其他元素组合到边栏中，边栏是指：主 <nav> 内容以为的导航及非导航内容。
<aside> <nav> <h2>Pages</h2> <ul> <li><a href=“/”>Home</a></li> <li><a href=“/contacts”>About</a></li> </ul> </nav> <section> <h2>blah blah</h2> <a href=“LovelyHost”>Web hosting by LovelyHost</a> <img src=“/logo.jpg”/> <p>Powered by <a href=“...”>WordPress</a></p> <p><a href=“/RSS”>Entries (RSS)</a></p> </section> </aside>
• <nav> <nav>元素是一个包装器，它不会代替<ol>或
<ul>，但是会包围它。
<nav> <h2>Main navigation</h2> <ul> <li><a href=”/about”>About me</a></li> <li><a href=”/news”>News</a></li> </ul> </nav>
HTML5与HTML4区别
• • • • • • • • • • 新应用程序接口（API）即时二维绘图定时媒体播放储存离线编辑拖放通讯／网络后退按钮管理 MIME 和协议处理程序时表头登记
HTML5技术概览
• • • • • HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs
0embedelementandcontenteditableattributecrossdocumentmessaginghtml5与html4区别?新应用程序接口api?即时二维绘图?定时媒体播放?储存?离线?编辑?编辑?拖放?通讯网络?后退按钮管理?mime和协议处理程序时表头登记html5技术概览?????html5新增和移除的元素html5基本布局html5对表单的支持html5dom变化html5的javascriptapiscanvasvideoaudiodragdropgeolocationapplicationcachedatabasestoragexdocumentmessaginghtml5新增的元素?结构元素headerfootersectionarticlenav
•
HTML5新增的事件
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
•
XML Submission
– application / x-www-form+xml
enctype="application/x-www<form action='/register' enctype="application/x-www-form+xml" method="post"> <p> <label for='name'>ID(请使用Email注册)</label> for='name'>ID(请使用Email注册)</label> 请使用Email注册 <input name='name' required type='email' /> <p> for='password'>密码密码</label> <label for='password'>密码</label> <input name='password' required type='password' /> <p> for='birthday'>出生日期出生日期</label> <label for='birthday'>出生日期</label> <input type='date' name='birthday' /> <p> for='gender'>国籍国籍</label> <label for='gender'>国籍</label> <select name='country' data='countries.xml'></select> data='countries.xml'></select> <p> for='photo'>个性头像个性头像</label> <label for='photo'>个性头像</label> <input type='file' name='photo' accept='image/*' /> <table> <thead> template="questionId">+</button> 保密问题</td> <td><button type="add" template="questionId">+</button> 保密问题</td> <td>答案答案</td> <td>答案</td> <td></td> </thead> <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3"> repeatrepeatrepeat-max="3"> <td><input type="text" name="questions[questionId].q" /></td> <td><input type="text" name="questions[questionId].a" /></td> type="remove">删除删除</button></td> <td><button type="remove">删除</button></td> </tr> </table> <p><input type='submit' value='send' class='submit' /></p> </form>