HTML5最佳实践

时间 2019-11-11

标签 html5 html 最佳实践栏目 HTML5 繁體版

原文原文链接

首先先给你们推荐个不错的前端网站：http://www.tystudio.netjavascript

HTML5正迅速称为web前端开发技术标准，做为一名前段开发人员，了解并正确的使用HTML5制做网站变得愈来愈重要。经过两年的HTML5开发经验，我总结出下面的这个列表，“HTML5最佳实践”，但愿它们对你的HTML5开发有所帮助。html

1.使用HTML5生成器

当你须要创建一个新的网站的时候，一般你会先根据网站的布局创建一个模板页，而后每一个页面都使用这个结构。你能够彻底本身去写这样的一个模板页，可是，很庆幸的是如今网上有不少的在线HTML5模板生成工具，你只须要作一些选择，就会获得一个使用HTML5创建好的模板页。这里推荐一个很是不错的HTML5模板在线生成网站SwitchToHTML5，填写一些基本信息以后选择你须要布局模块，点击Generate HTML5 Framework！一个自定义的HTML5模板页就出现了，使用起来很是的方便。前端

固然若是你想要能够直接使用的HTML5模板，那么你必定会喜欢HTML5 Boilerplate。html5

2.使用HTML5备忘录

HTML5具备不少的新标签和事件以及不一样浏览器支持程度，而且会随着时间不短的新增或更新一些，显然把他们所有记住是有很大的难度的。InMotion Hosting提供了这样的一个备忘录，能够帮助你解决这个问题，而且上面的信息始终是最新的。java

备忘录提供了三个图片，分别是标签，事件和浏览器支持，你能够点击这里下载三张图片。web

3.注意浏览器兼容问题

HTML5是一个新的技术，虽然如今可使用它，可是不少浏览器还不支持一些特殊的HTML5标签和事件。浏览器

当你开发HTML5的时候Can I Use.com是一个你必须收藏的网站，你能够快速的知道某个元素的在各个浏览器的支持状况。同时网站还包含了CSS3 、SVG和Javascript兼容性图表。ide

4.如何使老版本IE支持HTML5

IE浏览器是前端开发者永远的痛，ie6/7/8对于html5没有任何的支持。好消息是你能够引用一个很小的js库，使得ie6/7/8支持HTML5，使用起来很是简单只须要在<head>中引入下面的这段代码：svn

查看代码

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

另一个很是不错的工具Modernizr，这个js库可使你的HTML5完美的运行在全部浏览器上。工具

使用Modernizr的是很是容易的，只须要到这个页面选中你打算用的HTML5元素和CSS3属性，而后下载定制后的js。最后在你的页面中引入这个js，剩下的就交给Modernizr去作吧。

5.正确的使用HTML5元素

在使用HTML5以前，咱们一般会在页面使用不少的<div>元素。使用div最大的缺点就是html结构很不容易阅读。这就是为何HTML5制定出新的标签来代替之前很不错的<div>。

HTML5新标签包含header, footer, article, section, aside, nav等。下面列出一个基础的而且语义正确的HTML5页面结构：

查看代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
...
</header>
<div role="main">
...
</div>
<footer>
...
</footer>
</body>
</html>

6.最后验证你的代码

在制做完成一个HTML5页面以后，为了确保代码符合标准，你须要使用W3C validator来验证你的网页，老的html验证依然可使用在验证新的HTML5. 一个符合W3C标准的网页才是一个好的网页。

英文文章连接：http://www.catswhocode.com/blog/best-practices-for-efficient-html5-coding