精通HTML5代码的最佳实践

2016-02-17 01:51 5 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享精通HTML5代码的最佳实践教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - 平面设计 】

种种迹象表明,2012年绝对是HTML 5爆发之年。 就前端编码而言,HTML以它独有的方式席卷整个Web开发行业,它已经成为一门最IN的技术,作为一名前端开发人员,如果不学习也不懂HTML5网站编码,那么你就OUT啦!

2012年绝对是HTML5爆发之年,HTML5给开发人员/设计师带来了许多方便。它不但很容易理解而且效果也是令人兴奋的。

就前端编码而言,HTML以它独有的方式席卷整个Web开发行业,它已经成为一门最IN的技术,作为一名前端开发人员,如果不学习或者不懂HTML5网站编码,那么你就OUT啦!在开始学习之前,你必须搞清楚CSS3与HTML5之间的区别。今天,我们主要来讨论一下精通HTML5代码的最佳实践,看完这篇后,绝对会让你收获满满,不枉此行!

精通HTML5代码的最佳实践,PS教程,图老师教程网

1.HTML5(代码/编码)生成器

开发人员/设计师在开发一个新网站之前,往往都会从头做起。他们会根据每个需求,创建一个基本的模板,显然,这样做会花费大量的时间。使用HTML5(代码/编码)生成器将会帮你节省很多时间,无需为每个页面编写新的代码。对于HTML5(代码/编码)生成器来说,最棒的地方就是简单并且很容易上手。确切地说,你只需要根据需求来填写表单、创建HTML5模板,从而无需为每个页面重新编写代码。

显然,你会发现有各种各样的HTML5(代码/编码)生成器,你可以根据需求选择一个适合你的。当然,你也可以选择一些现成的模板直接应用。

推荐几款Generators

Shikiryu HTML5 GeneratorSwitch to HTML5 GeneratorQuackit HTML5 Generator

2.正确认识文档类型声明

如果你对自动编码不满意,打算亲自为网站编写代码,那么理解HTML5的doctype(文档类型声明)是非常重要的。请记住,修改doctype标签是不可取的,所以在做出决定和改变之前,要保证你已经很好的理解了doctype,最终不会以惨剧收场。

3.使用Cheat Sheet

众所周知,科技发展是日新月异的。所以无需恐慌,如果你不能记住不断变化的HTML5所有特征。你可以使用HTML5的Cheat Sheets。

精通HTML5代码的最佳实践,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

点击查看大图

文章推荐:This Ultimate HTML5 Cheatsheat [Infographic]

4.向后兼容性计划

目前,所有的Webkit(内核)浏览器都在支持HTML5。即使没能支持所有的(HTML5)新特性,也能支持大部分。对于HTML5来说,另一个积极的方面是backwards compatibility(向后兼容),意味着HTML5的新功能对于开发者来说是没什么学习负担,即可无师自通。

5.尽量避免兼容性问题

在日常开发中,你可能会面临一些兼容性问题,虽然HTML5是一门新技术,但有些新特性和功能可能不被支持。然而,这算不上是个问题,你可以在Can I Use.com网站上轻易发现你所使用的浏览器支持哪些元素。不仅如此,你还可以在上面找到其他重要的技术术语,例如CSS3和JavaScript兼容性图标。所以,如果你正在使用HTML5开发,最好把Can I Use.com网站添加到书签中。

6.负责任的使用每个元素

精通HTML5代码的最佳实践,PS教程,图老师教程网

话说,知己知彼,百战百胜。在使用元素之前,必须理解每个元素的用途以及效果,挑选适合你的元素。下面让我们来看一下HTML5的基本组成元素并且理解每个元素的用途。

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

精通HTML5代码的最佳实践,PS教程,图老师教程网

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

7.在老版本的IE里面启动HTML5

精通HTML5代码的最佳实践,PS教程,图老师教程网

诚实讲,对于开发者和设计师来说,IE一直是让人头疼的浏览器。IE8和以前版本的浏览器根本不支持HTML5。然而,你可以在这些版本的IE浏览器里面使用如下脚本,帮助你启动支持HTML5:

精通HTML5代码的最佳实践,PS教程,图老师教程网

8.编码验证

精通HTML5代码的最佳实践,PS教程,图老师教程网

使用HTML5进行网站开发,代码验证是非常重要的,最好的方式是使用W3C 验证器。这确实是个验证代码质量和检查代码错误优秀工具。

最后,希望上面提到的这些方法可以帮助你更有效地使用HTML5。

来源:http://www.tulaoshi.com/n/20160217/1577384.html

延伸阅读
标签: Web开发
这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服务端语言。让我们看面这个片断的HTML: 复制代码代码如下: @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"})) { div class="row" label for="file" Upload Image:/label input type="file" name="fileToUploa...
标签: Web开发
翻开的2张牌如果配对就会消除,否则2张牌都会返回背面。 需求分析 怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面 怎么生成牌组并且确定每张牌的位置和对应的图片 怎么洗牌 怎么记录牌组的配对信息 怎么确定点击事件是第一次点击还是第二次点击 作弊事件的处理:两次点击同一张牌 点击已经消除的牌面 点击牌面之外的区域...
标签: Web开发
效果图: 注:下面的代码运行效果,请在支持html5浏览下执行,才能看到效果。 !doctype html html head titlecanvas简单画板/title style type="text/css" #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;} /style /head body h2 style="padding-left:20px"canvas简单画板/h2 canvas id="can...
标签: Web开发
淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。 其实实现只需一句代码即可: x-webkit-speech 一看到这句代码,想到了什么?对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢? 代码如...
标签: Web开发
今天我突发其想,想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。 当然,要开发出一个操作系统,等我再归山修练一百年再说吧。今天就先娱乐一下,先搞一个开机界面。 完工后的图片:   担心图片是被我PS后的同学可以直接进入下面的地址测试: http://www.cnblogs.com/yorhom/articles/3163078.html 由于lufylegend封...

经验教程

688

收藏

61
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部