游戏开发。
作为移动互联网最火产业之一的——手游,越来越被大多数公司所青睐。而HTML5提供了一个非常伟大的,移动友好的方式去开发有趣互动的游戏。如果你之前使用Flash游戏,那么很快你就会喜欢上HTML5的游戏开发。
更好的互动体验。
HTML5的画图标签允许你做更多的互动和动画以及动态的web应用程序,就像我们使用Flash达到的效果,有助于增加更好的用户体验。
更聪明的存储。
HTML中最酷的特性就是本地存储,它拥有更好的安全性能以及不需要第三方插件就能轻松实现。
易用性 。
更加简单方便的创建网站。易懂的标签有助于我们更好的了解文档,创建更好的用户体验。
视频和音频的支持。
经常在网站上看视频的人一定不会陌生flash以及其它的第三方应用吧,而HTML5的到来正式宣告flash时代在此方面的结束。HTML5拥有更加强大的视频和音频的支持。
Doctype。
没错,就是doctype,没有更多内容了。是不是非常简答?不需要拷贝粘贴一堆无法理解的代码,也没有多余的head标签。最大的好消息在于,除了简单,它能在每一个浏览器中正常工作即使是名声狼藉的IE6。
更加清晰的代码。
HTML5拥有更加简答、优雅、容易阅读的代码。
遗留及其跨浏览器的支持。
现在社会主流的浏览器 (Chrome,Firefox,Safari,IE9和Opera)都支持HTML5,即便是非常老非常令人厌恶浏览器像IE6都可以使用。
未来HTML4将会更加的火。
HTML5不会往每个方向发展,但是更多的元素已经被很多公司采用,并且开始着手开发。HTML5其实更像HTML,它不是一个新的技术需要你重新学习!如果你开发XHTML strict的话你现在就已经在开发HTML5了。开始用HTML5代码编写web应用吧,说不定下一个移动应用或者游戏应用就是用HTML5开发的!
如今,HTML5的发展前景非常好,企业对HTML5建站需求很大,HTML5游戏领域研发热火朝天。HTML5技术能为我们带来炫酷的视觉体验,除了电脑浏览器上让人瞠目的效果,HTML5在移动端的表现同样令人惊喜,并且HTML还在不断的完善和发展。说到这大家是不是心动了,心动就行动吧?下面我给大家推荐几个学习HTML5非常好的网站。
1.W3School http://www.w3school.com.cn/
对于基础薄弱的人来说,这是一个不错的网站。每一节都有学生时代老师般的“板书”,丰富的实例展示,还有工具书、小测验等提升工具,犹如私人教练一般!
更丰富的实例,更详细的解读
2.H5之家。http://www.h5cn.com/
除了丰富且与时俱进的教程,这个网站还有很多关于HTML5业界的独特见解,闲暇时候看看,拓展知识又能在人前装X。这样的网站你值得拥有。
这么好的网站你早该知道的
3.360html5基地 http://html5.360.cn/
对于想学习HTML5游戏开发的人来说,这是一个不错的选择。350旗下的HTML5作品展示网站,大部分是HTML5游戏展示,可爱丰富有趣。
种类繁多的游戏
4.HTML5 Games http://html5games.com/
相对350来说更加丰富的HTML5游戏资源,品味更加原生的开发也是一种不错的选择,说不定玩着玩着技能激发设计灵感呢!
更加原味、更丰富的游戏体验
5.Dive into HTML5 http://diveintohtml5.info/
一个专门为HTML5而生的网站,这个网站几乎都是关于HTML5的文档,讲一些很基础的知识,简洁清新。如果想学习HTML5的同时提高英语阅读能力,这个网站是非常好的。
英语不好的人也可以尝试着学习啊
6.HTML5xCSS3 http://www.html5xcss3.com/
拥有超丰富的HTML5案例和模板,随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟!
勇敢的挑战自己
7.HTML5技术网 http://www.51html5.com/
一个充满干货的网站!你想要的不想要的,这里全都有!
没事的时候常来看看定会收获不小
8.HTMLDemos http://html5demos.com/
测试HTML5标签在各浏览器的兼容性,还能查看各种HTML5的标准Demo演示。
这是一个测试网站
9.The HTML5 test http://chrome.360.cn/test/html5/index.html
能为浏览器对HTML5的兼容性打分,可以知道你当前的浏览器对HTML5的支持情况如何,各种标签和组件的支持情况。
这也是一个测试网站
当然,光看网站有的小伙伴会觉得没有方向感,不知道该从那些地方下手。不妨结合教科书来个系统的学习。入门级必备两本教材《Head first HTML&CSS》和《JavaScript DOM编程艺术》,看书再结合网站学习,不断的练习、不断的学习相信不久你就会成为HTML5大神啦!
不积跬步,无以至千里。千里之行,始于足下。从现在开始,每天给自己20分钟了解HTML5技术,你会发现其实编程也挺有趣的。http://www.iisp.com/design/?s=yuqiuping。
当然上面的有些内容是借鉴有其他人的,好的东西拿出来大家一起学习、共同进步。其实做人做事都是一样,只有不断的学习、不断的借鉴好的、摈弃坏的,这样我们自己才能进步的更快。
着智能手机、平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长。H5开始火热起来,以文字、图片、动画、声音等相结合的自媒体出现,给用户带来了全新体验,技术本身带来的新奇感让人们心生向往。
下面我们就来聊一聊H5入门的一些知识吧!
什么是H5?
H5即HTML5,是指“HTML”的第5个版本,而“HTML”,则是指描述网页的标准语言。因此,HTML5,是第5个版本的“描述网页的标准语言”。
H5特性
H5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
H5 中的一些有趣的新特性:
H5的改进:
H5语义元素
<article> 定义页面独立的内容区域。<aside> 定义页面的侧边栏内容。<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。<command> 定义命令按钮,比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独立的流内容(图像、图表、照片、代码等等)。<figcaption> 定义 <figure> 元素的标题 <footer> 定义 section 或 document 的页脚。<header> 定义了文档的头部区域 <mark> 定义带有记号的文本。<meter> 定义度量衡。仅用于已知最大和最小值的度量。<nav> 定义导航链接的部分。<progress> 定义任何类型的任务的进度。<ruby> 定义 ruby 注释(中文注音或字符)。<rt> 定义字符(中文注音或字符)的解释或发音。<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。<section> 定义文档中的节(section、区段)。<time> 定义日期或时间。<wbr> 规定在文本中的何处适合添加换行符。
H5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法
<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
载入后,初始化新标签的CSS:
/*html5*/article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
H5代码规范
1. HTML5 元素名可以使用大写和小写字母。
但推荐你使用小写字母:
2. 在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素),但建议你每个元素都要添加关闭标签。
3. HTML5 属性值可以不用引号。
属性值我们推荐使用引号:
4. 图片通常使用 alt 属性。在图片不能显示时,它能替代图片显示。
5. 等号前后可以使用空格。
6. 使用 HTML 编辑器,左右滚动代码是不方便的。
每行代码尽量少于 80 个字符。
7. 不要无缘无故添加空行。
为每个逻辑功能块添加空行,这样更易于阅读。
缩进使用两个空格,不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
8. 样式表使用简洁的语法格式:
特性
1.语意特性,添加<header><header/><nav><nav>
等标签
2.多媒体, 用于媒介回放的 video 和 audio 元素
3.图像效果,用于绘画的 canvas 元素,svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性 ,HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,
6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性,HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作
新增标签
1.多媒体:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表单元素:<datalist> ,<output> , <keygen>
3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部
等
使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能,也可以将脚本文件下载到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>
localStorage.setItem(key,value)
如果key存在时,更新valuelocalStorage.getItem(key)
如果key不存在返回nulllocalStorage.removeItem(key)
一旦删除,key对应的数据将会全部删除localStorage.clear()
使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据*请认真填写需求信息,我们会在24小时内与您取得联系。