• 1. 浅谈HTML5陈广华 2011.05.30
  • 2. 浅谈HTML5简介 发展历史 特性 在线演示 浏览器分析 结论
  • 3. 简介-浅谈HTML5HTML5是一个新的网络标准。 目标在于取代现有的HTML 4.01,XHTML 1.0 and DOM Level 2 HTML标准。 它希望能够减少浏览器对于需要插件的富互联网应用(plug-in-based rich internet application,RIA),如Adobe Flash,Microsoft Silverlight与Sun JavaFX等等的需求。
  • 4. 发展历史-浅谈HTML5前身是Web Applications 1.0,于2004年由WHATWG(Web Hypertext(网络超文本) Application Technology(应用技术) Working Group(工作组)。2004年由Opera、Mozilla基金会和苹果等浏览器厂商组成)提出; 2007年获W3C接纳,并成立了新的HTML工作团队; 2008年1月22日,第一份正式草案发布; HTML5的标准草案已进入W3C制定标准5大程序的第1步,预期2012年推出建议候选版(W3C Candidate Recommendation)。
  • 5. 特性-浅谈HTML5HTML 5 技术概览
  • 6. 特性-浅谈HTML51 取消了一些过时的HTML 4标签,其中包括已被CSS取代的纯粹用作显示效果的标签,如
    ,以及一些透过DOM的网络行为。 被取消的标签列表:
    、、 、 <frameset> 、 <strike>、<tt>、<u>和<xmp></li><li data-id="7">7. 特性-浅谈HTML52 新增了新的标签用来更加细致的描述页面、文档结构,使用这些元素,作者可以让文档页面更加具有语义,更加易读,也可以让搜索引擎更好的理解页面的内容和各个部分之间的关系,应用API也能更容易、更准确细微的访问文档对象。新增的标签列表: <article>、<section>、<aside>、<hgroup>、<header>、<footer>、<nav>、<time>、<mark>、<figure>和<figcaption></li><li data-id="8">8. 特性-浅谈HTML53 新增<audio>和<video>标签使得浏览器不需要插件即可播放视频和音频</li><li data-id="9">9. 特性-浅谈HTML54 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。4.1 新的input 类型color email date month week time datetime datetime-local number range search tel url颜色选择 邮件地址校验 年月日选择 月日选择 年周选择 时间(小时和分钟)选择 UTC年月日时间选择 本地年月日时间选择 数字选择并校验 包含在一定范围内的数字值选择,显示为滑动条 用于搜索域,比如站点搜索或google搜索等 电话校验 网址URL校验</li><li data-id="10">10. 特性-浅谈HTML54 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。4.2 新的属性required autofocus pattern list autocomplete Placeholder form规定必须在提交之前填写输入域(即不能为空) 规定在页面加载时,域自动地获得焦点 规定用于验证input域的正则表达式 规定输入域的 datalist 规定 form 或 input 域应该拥有自动完成功能 提供一种提示(hint) 规定输入域所属的一个或多个表单还有: formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 等等 </li><li data-id="11">11. 特性-浅谈HTML54 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。4.3 新的标签<datalist> <keygen> <output> <meter> <progress>定义输入域的选项列表 密钥生成器 用于不同类型的输出,比如计算或脚本输出 定义度量衡 定义运行中的进度或进程</li><li data-id="12">12. 特性-浅谈HTML54 表单增强。HTML5为表单提供了几个新的属性、input 类型和标签。注意:范例请点击此处 Opera能支持该范例的大多数特性,少部分可以在Chrome和Safari上运行</li><li data-id="13">13. 特性-浅谈HTML55 WEB绘图——<canvas> 5.1 基于javascript的2D绘图</li><li data-id="14">14. 特性-浅谈HTML55 WEB绘图——<canvas> 5.2 基于WebGL的3D绘图WebGL完美地解决了现有的Web交互式三维动画的两个问题: 第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持; 第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。 可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等</li><li data-id="15">15. 特性-浅谈HTML56 让内容可编辑——contenteditable=“true”该属性仅仅允许用户编辑、删除、插入内容,而并不会自动提供其他类似于所见即所得编辑器的保存或应用样式的功能,需要自己用Javascript来添加这些功能。</li><li data-id="16">16. 特性-浅谈HTML57 简单快速的实现拖放控制图片和超链接默认是可拖放的。对于所有的元素,HTML5引进了一个新的属性“draggable”,这将用来设置元素是否接受拖放; 下列事件对应HTML5的拖放:dragstart,drag,dragenter,dragover,dragleave,drop和dragend。当你要fire掉事件的时候,将需要写 function(事件处理器)来处理你需要的,也可能需要给元素绑定事件或做事件指派来简化你的代码; 拖放事件还让你可以通过被拖放元素来传递数据,使用事件属性“dataTransfer” 的 getData 和 setData 方法。 可以在不同的浏览器或程序中进行拖放。</li><li data-id="17">17. 特性-浅谈HTML58 WEB数据存储Web 存储规范提供了与 HTTP session cookies 相似的稳健的Web存储属性。他们是“sessionStorage” 和“localStorage”:sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab 的或窗口持续打开周期内的数据。 localStorage 用以存储周期较长、多页面,以及多浏览器session的内数据。甚至持续到你重起浏览器或者电脑。</li><li data-id="18">18. 特性-浅谈HTML59 离线数据存储HTML5规范还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。你可以通过提供一个manifest文件来定义哪些文件需要被缓存,哪些需要在离线的时候有折衷方案替代。当用户访问这个页面,支持的浏览器将会猎取一个manifest版本。它将下载并缓存所有的涉及到的文件,并且当manifest相对于用户上次的浏览的版本有变化,它将会再次下载并缓存所有的文件。通常该特性用于创建网页离线版应用程序。</li><li data-id="19">19. 特性-浅谈HTML510 更多postMessage——实现跨文档跨域的消息传输 facebook中已经采用该特性实现web实时消息传递 webSocket——代表Web通信的下一个演变:通过一个单一的Socket实现一个全双工,双向通信的信道。HTML 5 Web Socket提供了一个真正的标准,你可以使用它构建可扩展的实时Web应用程序。此外,由于它提供了一个浏览器自带的套接字,Web Socket显著降低了系统开销和复杂性。 geolocation——用于获取浏览器所处地理位置相关信息 更多请参考:http://dev.w3.org/html5/ </li><li data-id="20">20. 在线演示-浅谈HTML5请根据下列网址不同demo中提出的浏览器要求进行测试: http://html5demos.com/ http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/ </li><li data-id="21">21. 浏览器分析-浅谈HTML5</li><li data-id="22">22. 结论-浅谈HTML5HTML5极大的解放了Web开发人员的工作量; HTML5能提高富互联网应用程序的开发效率; 由于浏览器支持程度并不一致,可以预见的是HTML5在互联网站上的普及还需要相当长的时间(IE9也将全面支持HTML5),但是这并不妨碍HTML5在新鲜出炉的各类移动终端设备上进行推广,譬如iPad等; 在一些内部应用上可以考虑指定浏览器并使用HTML5进行开发</li><li data-id="23">23. 感谢以下为参考网址: http://www.happinesz.cn/archives/1389/ 解读HTML5 http://www.w3school.com.cn/html5/ 教程 http://www.findmebyip.com/litmus#target-selector </li> </ul> </div> <div role="tabpanel" class="tab-pane active" id="profile"> <img class="detail-img" src="https://sppt.open-open.com/image/5ab77cd2dc333c3ecb7f4a2bc0564f70_all"> </div> </div> </div> </div> <div class="col-md-4"> <div class="box side-box "> <div class="title"> <h3><i class="fa fa-tags" aria-hidden="true"></i> 关键词</h3> </div> <p class="tags mt10"> <a class="" href="/ppt/tag/html5.html">HTML5</a> <a class="" href="/ppt/tag/qianduan-jishu.html">前端技术</a> <a class="" href="/ppt/tag/fangan.html">方案</a> <a class="" href="/ppt/tag/css.html">CSS</a> <a class="" href="/ppt/tag/http.html">HTTP</a> </p> </div> <div class="box side-box "> <div class="title"> <h3>相关PPT</h3> </div> <div class="items"> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/e619cf14a4c2465bab2c063cf8649e9b.html" target="_blank"><img src="https://sppt.open-open.com/img_w/5ab77cd2dc333c3ecb7f4a2bc0564f70_0_100"></a></div><div class="content"><a href="/ppt/e619cf14a4c2465bab2c063cf8649e9b.html">&nbsp;浅谈 HTML5</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/0b16f77a2c9d454e9cbbebccfde7bda1.html" target="_blank"><img src="https://sppt.open-open.com/img_w/6e15c7233ac81be7592c718a4e40d86f_0_100"></a></div><div class="content"><a href="/ppt/0b16f77a2c9d454e9cbbebccfde7bda1.html">&nbsp;HTML5 Mobile Web App 浅谈</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/565e85e924a048eca0a176c288358216.html" target="_blank"><img src="https://sppt.open-open.com/img_w/849245c68f138987b151f756283d6165_0_100"></a></div><div class="content"><a href="/ppt/565e85e924a048eca0a176c288358216.html">&nbsp;浅谈云计算</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/bb2c8c1c25c94c2c9e48f23cd6fd5405.html" target="_blank"><img src="https://sppt.open-open.com/img_w/7c681017ea518f06736a1d94c57b7b6e_0_100"></a></div><div class="content"><a href="/ppt/bb2c8c1c25c94c2c9e48f23cd6fd5405.html">&nbsp;IOS 软件开发浅谈</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/5c22d817546440cdb80ebf645cf41e9d.html" target="_blank"><img src="https://sppt.open-open.com/img_w/089ebd97bb6dbd4bfe0dad2168724c50_0_100"></a></div><div class="content"><a href="/ppt/5c22d817546440cdb80ebf645cf41e9d.html">&nbsp;Oracle RAC原理浅谈</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/f00c07cc1dc04c81830c247a04cdb7de.html" target="_blank"><img src="https://sppt.open-open.com/img_w/2140038cfcfe9cc3a40c397c958548a9_0_100"></a></div><div class="content"><a href="/ppt/f00c07cc1dc04c81830c247a04cdb7de.html">&nbsp;即通CS系统、CS协议和测试浅谈</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/8b7a3da6867c4d9586e2b77ee6312cda.html" target="_blank"><img src="https://sppt.open-open.com/img_w/cec21ea67ab992928d1c1f021e44e334_0_100"></a></div><div class="content"><a href="/ppt/8b7a3da6867c4d9586e2b77ee6312cda.html">&nbsp;缓存技术浅谈</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/a55d632fae7547fda5f8f910794070e3.html" target="_blank"><img src="https://sppt.open-open.com/img_w/682b7cc4d6c2f4e95cccebac9f39c031_0_100"></a></div><div class="content"><a href="/ppt/a55d632fae7547fda5f8f910794070e3.html">&nbsp;浅谈容器集群管理-从Mesos到Kubernetes</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/c1b2d2668edd4142816b7193230357da.html" target="_blank"><img src="https://sppt.open-open.com/img_w/_0_100"></a></div><div class="content"><a href="/ppt/c1b2d2668edd4142816b7193230357da.html">&nbsp;移动Web开发与 HTML5 经验分享</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/6ddf6c6a0b5b41a3868a5f39aeae5cb3.html" target="_blank"><img src="https://sppt.open-open.com/img_w/f015777232c07d8e5d932bfce49934e4_0_100"></a></div><div class="content"><a href="/ppt/6ddf6c6a0b5b41a3868a5f39aeae5cb3.html">&nbsp;移动Web开发与Html5经验分享</a></div></div> </div> </div> </div> </div> </div> </div> <footer > <div class="container py-5"> <div class="row"> <div class="col-md-3"> <h5>社区</h5> <div class="row"><div class="col-md-6"><a class="text-muted" href="/project/">项目</a></div><div class="col-md-6"><a class="text-muted" href="/solution/">问答</a></div><div class="col-md-6"><a class="text-muted" href="/wenku/">文库</a></div><div class="col-md-6"><a class="text-muted" href="/code/">代码</a></div><div class="col-md-6"><a class="text-muted" href="/lib/">经验</a></div><div class="col-md-6"><a class="text-muted" href="/news/">资讯</a></div></div> <ul class="list-unstyled text-small ut-mt20"><li><a class="text-muted" title=" 安卓开发专栏" target="_blank" href="http://www.open-open.com/lib/list/177">安卓开发专栏</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/tag/开发者周刊" target="_blank" rel="tag">开发者周刊</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497562965.html" target="_blank" rel="tag">Android Studio 使用推荐</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497355674.html" target="_blank" rel="tag">Android开发推荐</a></li></ul> </div> <div class="col-md-3"> <h5>帮助中心</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/upload.html">文档上传须知</a></li></ul> <h5>关于我们</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/about.html">关于深度开源</a></li><li><a class="text-muted" href="/duty.html">免责声明</a></li><li><a class="text-muted" href="/contact.html">联系我们</a></li></ul> </div> <div class="col-md-6 text-center"><img class=center-block src="https://static.open-open.com/img/logo01.svg" width=190px alt="深度开源"><small class="d-block mb-3 text-muted ut-mt40">&copy; 2006-2019 深度开源 —— 开源项目,开源代码,开源文档,开源新闻,开源社区&nbsp;&nbsp;杭州精创信息技术有限公司&nbsp;&nbsp;<br/><br/><img src="https://static.open-open.com/img/beian.png"/><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602002439">&nbsp;&nbsp;浙公网安备 33010602002439号</a>&nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn">浙ICP备09019653号-31</a></small></div> </div> </div> </footer> <div id="fTools"><span id="gotop"> <i class="fa fa-arrow-up" aria-hidden="true"></i> </span><span id="feedback" title="建议反馈"> <i class="fa fa-inbox" aria-hidden="true"></i></span></div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="https://static.open-open.com/js/lib.js"></script> <script type="text/javascript" src="https://static.open-open.com/assets/jquery-confirm/jquery-confirm.js?v=4.7.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://static.open-open.com/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://static.open-open.com/js/base.js?v=2.002"></script> <script type="text/javascript" src="https://static.open-open.com/js/jq-plug.js?v=2.002"></script> <script> $(function () { JC.reminderPop();//弹出用户信息 $(".link-login").click(function(){ JC.lORr('login'); }); $("#topSearch").searchInit(); //用户登录状态 JC.setLogin(false); }); </script> <!-- JavaScript at the bottom for fast page loading --> <script type="text/javascript" src="https://static.open-open.com/js/playslides.js?v=2.001"></script> <script> JC.init("", "9284", "ppt", 6,false); var consume_gold_cost = 6, uId = "", cId = "9284", slug = "e619cf14a4c2465bab2c063cf8649e9b", title = "浅谈 HTML5", summary = ""; var category_name = ""; var tagList = [{id:32, name: "HTML5"}, {id:1437, name: "前端技术"}, {id:11116, name: "方案"}, {id:94, name: "CSS"}, {id:466, name: "HTTP"}]; var num_page = "1"; var jc = {}, fav = []; $(function () { window._bd_share_config = {"common": {"bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32"}, "share": {}};with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://static.open-open.com/assets/baidushare/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; var images = {thumb: [], big: []}; var pages =23; var img = 'https://sppt.open-open.com/image/5ab77cd2dc333c3ecb7f4a2bc0564f70_'; for (var i = 0; i < pages; i++) { images.thumb.push(img + i + "_98_54"); images.big.push(img + i); } var slide = $('.slide-box').pss({autoSlide: false, scale: [16, 9], images: images, maxHeight: 405}); $("#article_content li").click(function () {slide.slide_goto($(this).data("id"));$('body,html').animate({scrollTop:0}, 500);}); }); </script> <script src="https://static.open-open.com/js/docshow.js?v=2.001"></script> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); (function () {var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?40291de101d60af5180c55eb7057c18e";document.write('<script src="' + src + '" id="sozz"><\/script>');})(); </script> <!-- end scripts --> </body> </html>