HTML5最佳实践
HTML5正迅速称为web前端开发技术标准,作为一名前段开发人员,了解并正确的使用HTML5制作网站变得越来越重要。通过两年的HTML5开发经验,我总结出下面的这个列表,“HTML5最佳实践”,希望它们对你的HTML5开发有所帮助。
1.使用HTML5生成器
当你需要建立一个新的网站的时候,通常你会先根据网站的布局建立一个模板页,然后每个页面都使用这个结构。你可以完全自己去写这样的一个模板页,但 是,很庆幸的是现在网上有很多的在线HTML5模板生成工具,你只需要做一些选择,就会得到一个使用HTML5建立好的模板页。这里推荐一个非常不错的 HTML5模板在线生成网站SwitchToHTML5,填写一些基本信息之后选择你需要布局模块,点击Generate HTML5 Framework!一个自定义的HTML5模板页就出现了,使用起来非常的方便。
当然如果你想要可以直接使用的HTML5模板,那么你一定会喜欢HTML5 Boilerplate。
2.使用HTML5备忘录
备忘录提供了三个图片,分别是标签,事件和浏览器支持,你可以点击这里下载三张图片。
3.注意浏览器兼容问题
HTML5是一个新的技术,虽然现在可以使用它,但是很多浏览器还不支持一些特殊的HTML5标签和事件。
当你开发HTML5的时候Can I Use.com是一个你必须收藏的网站,你可以快速的知道某个元素的在各个浏览器的支持情况。同时网站还包含了CSS3 、SVG和Javascript兼容性图表。
4.如何使老版本IE支持HTML5
IE浏览器是前端开发者永远的痛,ie6/7/8对于html5没有任何的支持。好消息是你可以引用一个很小的js库,使得ie6/7/8支持HTML5,使用起来非常简单只需要在中引入下面的这段代码:
1 <!--[if lt IE 9]> 2 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 3 <![endif]-->
另外一个非常不错的工具Modernizr,这个js库可以使你的HTML5完美的运行在所有浏览器上。
使用Modernizr的是非常容易的,只需要到这个页面选中你打算用的HTML5元素和CSS3属性,然后下载定制后的js。最后在你的页面中引入这个js,剩下的就交给Modernizr去做吧。
5.正确的使用HTML5元素
在使用HTML5之前,我们通常会在页面使用很多的
元素。使用div最大的缺点就是html结构很不容易阅读。这就是为什么HTML5制定出新的标签来代替以前很不错的。HTML5新标签包含header, footer, article, section, aside, nav等。下面列出一个基础的并且语义正确的HTML5页面结构:
1 doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 head> 7 <body> 8 <header> 9 ... 10 header> 11 12 <div role="main"> 13 ... 14 div> 15 16 <footer> 17 ... 18 footer> 19 body> 20 html>
6.最后验证你的代码
在制作完成一个HTML5页面之后,为了确保代码符合标准,你需要使用W3C validator来验证你的网页,老的html验证依然可以使用在验证新的HTML5. 一个符合W3C标准的网页才是一个好的网页。
英文原文链接:http://www.catswhocode.com/blog/best-practices-for-efficient-html5-coding
【HTML5最佳实践】相关文章
1. HTML5最佳实践
本文来源:https://www.51html5.com/a3220.html
﹝HTML5最佳实践﹞相关内容
- JQ.Mobi:HTML5最终的jQuery框架
- HTML5最终战胜Flash 或引领新一轮科技革命
- HTML5最终战胜Flash
- Chrome奋战在HTML5最前线
- JQ.Mobi:HTML5最终的jQuery框架
- HTML5最终取代APP?移动互联网现“左右互搏”
- 全球HTML5最高分, 海豚极速内核浏览器
- HTML5最新漏洞:用户硬盘或被垃圾数据塞满
- 正益无线HTML5在移动开发领域的实践(PPT)
- AppCan:HTML5移动应用开发领域的实践