`

高效HTML5代码开发最佳实践

阅读更多

日期:2012-8-10  来源:GBin1.com

HTML5 已经快速的成为新一代的web规范和趋势,作为一个web开发人员来说你绝对有必要了解一下如何使用HTML5 来编写网站。在今天这篇文章中,我们收集了一套能够帮助你高效使用HTML5 开发的最佳实践,希望能够对于大家开发HTML5 网站有帮助!如果你有更多的建议和想法,请给我们留言!

使用在线生成器

如果你的所有web代码都是手写输入的话,我个人非常佩服,但是如果你想有效的提高HTML5 代码生成速度的话,使用模板,或者使用在线代码生成工具绝对是一个非常理智的选择。这里有很多的HTML5 模板和在线工具你可以使用,比如:

以上俩个生成器拥有更多的选项可供你选择。

使用Cheat Sheet

cheet sheet

随着HTML5 的变化和内容添加,你会觉得记住所有的不同特性非常困难,所以你需要cheat sheet来帮助你关注各种标签变化。

你可以在这里下载完整的cheat sheets

兼容性问题

高效HTML5代码开发最佳实践

作为一个不完善的标准,你得时刻注意不同浏览器下的行为,使用一些工具帮助你了解兼容性还是非常有必要的,记得我们曾经发布的帮助你了解HTML5各类特性及其推荐应用的网站 中提到的when can i use ,这个网站可以帮助你快速的了解浏览器是否支持某些特性,例如,html audio/video,SVG等等。

高效HTML5代码开发最佳实践

另外一个就是html5 please ,这个网站可以推荐给你如何正确的应用HTML5 。绝对也是一个不可错过的工具网站。

HTML5 针对老一代浏览器的兼容性

Modernizr

如果你考虑使用HTML5 的话,对于老旧的浏览器的兼容性问题你也需要考虑。一般情况下,我们插入以下一段代码即可支持老的IE浏览器:

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

如果你需要更好的处理的话,推荐你使用Modernizr,如果你不了解Modernizr的话,这参考这篇文章: 浏览器html5/css3兼容性检测的javascript类库- Modernizr简单介绍

正确场合使用正确的标签

在HTML5中,我们可以看到添加了很多新的标签,如何正确的使用这些标签是一个富有挑战的问题。一个普遍的代码架构如下:

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

  <div role="main">
	...
  </div>

  <footer>
	...
  </footer>
</body>
</html>

如果你查看过gbin1.com 的源代码,你也可以看到类似标签结构。

验证你的代码

高效HTML5代码开发最佳实践

为了保证你的代码的正确性,你需要使用一些工具来验证你的代码,我们可以使用w3c validator 来验证你的HTML5 页面。

来源:高效HTML5代码开发最佳实践

分享到:
评论

相关推荐

    Ruby on Rails敏捷开发最佳实践源代码

    这个压缩包包含了“Ruby on Rails敏捷开发最佳实践”一书中的所有源代码示例,这些代码实例深入浅出地展示了如何运用Rails框架进行高效、灵活的Web应用开发。 在Ruby on Rails中,"敏捷开发"意味着快速响应变化,...

    Web前端开发最佳实践.pdf

    标题《Web前端开发最佳实践.pdf》所指的知识点涵盖了前端开发领域中的高效开发方法和一些指导原则。虽然提供的【部分内容】并没有实际内容,但根据标题,我们可以展开关于Web前端开发最佳实践的详细讨论。 Web前端...

    web前端开发最佳实践

    ### Web前端开发最佳实践 #### 一、高效Web前端开发概览 - **Web前端开发概述**:在这一章节中,作者首先介绍了Web前端开发的基本概念和发展历程,强调了前端开发的重要性和它在现代互联网应用中的核心地位。通过...

    现代Web开发的最佳实践

    以上是现代Web开发的一些核心知识点,通过学习和应用这些最佳实践,开发者能够构建出高效、响应、安全且易于维护的Web应用。"google-WebFundamentals-45bcd61"这个压缩包很可能是对这些概念的详细讲解和实例演示,...

    django最佳实践 html

    在Django框架中进行开发时,遵循最佳实践和标准至关重要,这不仅能提高代码质量,还能增强项目的可维护性和团队协作效率。"django最佳实践 html"的主题涵盖了如何建立一个高效的Django项目结构,以及遵循的流行标准...

    WEB前端开发最佳实践.docx

    WEB前端开发最佳实践涉及到的技术广泛且深入,从基础的HTML5和CSS3布局,到JavaScript的高级应用,再到Vue.js等现代框架的实战,都需要开发者持续学习和实践。通过系统的培训,学员不仅可以掌握前沿的开发技能,还能...

    Android和PHP开发最佳实践

    在Android和PHP开发最佳实践中,我们探讨的是如何高效地结合这两种技术来构建强大的移动应用程序。Android作为Google主导的开源移动操作系统,广泛应用于智能手机和平板电脑,而PHP则是一种流行的服务器端脚本语言,...

    张西涛 -HTML5移动应用多端开发架构实践

    成熟阶段中,AngularJS、MVVM框架和Ionic框架的出现标志着HTML5 Hybrid App开发的最佳实践。到了创新阶段,React.js和ReactNative等新技术的出现,使得“Write once, run anywhere”的理念进一步得到实现,同时...

    HTML5快速开发模板生成器

    HTML5模板是预先设计和编写的HTML代码结构,包含了网页的基本框架,如头部信息、导航栏、主体内容区和页脚等。它们遵循最佳实践,确保页面在不同设备和浏览器上表现良好,同时支持响应式布局,适应移动设备。 HTML5...

    PHP+核心技术与最佳实践.pdf

    不过,根据标题“PHP+核心技术与最佳实践.pdf”可以推测文档内容与PHP语言的核心技术以及在实际开发中的最佳实践有关。在进行这部分内容的生成时,我可以依照这些推测来介绍PHP的核心技术和最佳实践的相关知识点。 ...

    Spring核心技术与最佳实践

    《Spring核心技术与最佳实践》一书深入探讨了Java EE Web开发中的关键技术和Spring框架的应用。Spring作为一款强大的IoC容器,不仅提供了卓越的依赖注入功能,还具备完整的Web MVC框架,使得开发高效、可扩展的Web...

    Oracle HTML DB最佳实践

    Oracle HTML DB最佳实践是关于如何高效且安全地利用Oracle的HTML数据库进行应用程序开发的一系列指导原则。这些实践旨在提升开发效率、确保应用易用性、优化性能、强化安全性,并简化维护工作。以下是一些关键点的...

    HTML与CSS开发实践指南

    内容概要:本文提供了丰富的 HTML 和 CSS 开发技巧,涵盖渐进...使用场景及目标:提升HTML和CSS编码效率,掌握高效的设计规范和最佳实践,确保跨平台一致性。此外,本文亦强调了团队协作环境下的代码整洁性和复用性。

    廖雪峰 Spring 2.0 核心技术与最佳实践 高清扫描版

    最后,最佳实践部分将分享一些在实际项目中如何有效地运用Spring 2.0的建议,包括设计模式的应用、性能优化以及代码组织等。 通过阅读《Spring 2.0 核心技术与最佳实践》,读者不仅能够掌握Spring框架的核心功能,...

    Struts_开发的最佳实践

    遵循以下最佳实践,可以提高Struts开发的效率和代码质量: 1. **跨ActionForm重用数据**:创建一个公共的JavaBean,包含多个ActionForm共享的属性。这样可以减少代码重复,提高代码复用性。例如,创建一个BP1BForm...

    淘宝首页网触屏版html5代码

    淘宝首页网触屏版的HTML5代码是一份用于学习和参考的开源资源,它展示了如何构建适应移动设备的电商网站。...通过对这份代码的学习,开发者可以深入了解现代网页开发的最佳实践,提升构建移动端网页的能力。

Global site tag (gtag.js) - Google Analytics