资讯频道 → Web前端
阅读更多

7顶
1踩

Web前端

原创新闻 高效 HTML5 代码开发最佳实践

2012-08-20 17:21 by 见习编辑 tyygming 评论(4) 有6789人浏览
HTML5 HTML5编码实践 HTML5高效编码

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

HTML5已经快速的成为新一代的web规范和趋势，作为一个web开发人员来说你绝对有必要了解一下如何使用HTML5来编写网站。

在今天这篇文章中，我们收集了一套能够帮助你高效使用HTML5开发的最佳实践，希望能够对大家开发HTML5网站有帮助！如果你有更多的建议和想法，请给我们留言！

1.  使用在线生成器

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




2.  使用Cheat Sheet

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

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



3.  兼容性问题

作为一个不完善的标准，你得时刻注意不同浏览器下的行为，使用一些工具帮助你了解兼容性还是非常有必要的，“when can i use”这个网站可以帮助你快速的了解浏览器是否支持某些特性，例如audio、video、SVG等等。



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



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

如果你考虑使用HTML5的话，对于老旧的浏览器的兼容性问题你也需要考虑。一般情况下，我们插入以下一段代码即可支持老的IE浏览器。 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

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



5.  正确场合使用正确的标签

在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>

6.  验证你的代码

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

来自: www.gbin1.com
7
顶
1
踩
评论 共 4 条 请登录后发表评论
4 楼 bigarden 2012-08-21 11:33
zhangdaiping 写道
javaeye的文章越来越烂了，以前平均停留阅读半小时，现在5分钟扫完


内容相比以前确实差了很多，一扫而过
3 楼 zhangdaiping 2012-08-21 09:22
javaeye的文章越来越烂了，以前平均停留阅读半小时，现在5分钟扫完
2 楼 free0007 2012-08-21 08:09
板凳    
1 楼 fireaap 2012-08-20 21:10
沙发？传说中的沙发

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 高效HTML5代码开发最佳实践

    在今天这篇文章中，我们收集了一套能够帮助你高效使用HTML5开发的最佳实践，希望能够对于大家开发HTML5网站有帮助！如果你有更多的建议和想法，请给我们留言！ 使用在线生成器 如果你的所有web代码都是手写

  • 《Web前端开发最佳实践》学习笔记

    一、Web前端开发概述 Web前端：前端UI+后端数据交互 ...二、高效Web前端开发 文件结构： js: lib custom.js(业务js) css: lib images(样式中的背景图) reset.css(统一元素默认样式css) cu...

  • Web前端高效开发最佳实践总结一：前端开发综述

    论文件命名的重要性在开发项目中，良好的命名规范和规整的格式可以让代码看起来更整洁，它同样也体现了开发者良好的职业素养。对于文件的命名和代码的组织并没有绝对的形式，但是无论是什么代码，它都要遵循一个原则...

  • 【代码实践】编码精粹：打造高效与可维护的代码艺术

    高效代码（Efficient Code）在我的职业生涯中扮演着至关重要的角色。在嵌入式系统中，资源通常是有限的，因此编写能够快速执行且占用最少资源的代码至关重要。高效的代码不仅提高了应用的性能，还能在硬件资源受限的...

  • HTML5 高效编码的 8 个最佳实践

    HTML5已经日益成为目前Web开发的主流技术之一，并逐步向移动应用开发领域渗透。HTML5的优势在于无需插件即可实现各种绚丽的效果，并且可以跨平台。但是目前HTML5技术还处于尴尬发展阶段，标准迟迟无法成型，浏览器...

  • Android开发最佳实践---Futurice之见

    使用Gradle和推荐的工程结构 ...使用Jackson或者Gson库来解析JSON数据 ...避免使用Guava, 使用少量的函数库从而避免超出65k方法数限制. 使用Fragments来表示UI界面 Activities只用来管理...布局XML文件是代码，要组织好它们

  • web性能优化与最佳实践

    在这里我总结了如何高效的进行web前段的开发。 2. Web前端开发的范畴： Web前端开发设计网站开发的方方面面，从前端UI到后端的数据交互都属于前端开发的范畴。Web前端既要考虑页面的美感和操作体验，又要关注前端...

  • 前端代码规范 及 最佳实践

    本文作者： 伯乐在线 - 老码农 。未经许可，禁止转载！ 欢迎分享原创到伯乐头条。 ...现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。 编写本文档的主要驱动力是两方面： 1

  • 《Web前端开发最佳实践》读书笔记

    总的来说，这本书给我感觉帮助不大，...第二章 高效Web前端开发 前端代码重构过程 删除无用代码，精简代码，主要是已经不起作用的CSS样式和废弃的JS函数 前端代码规范化 整理基础类库 前端代码模块化 提高页面加...

  • 前端代码规范及最佳实践

    本文来自 Isobar公司 的 github repo中文版 翻译： ...编写本文档的主要驱动力是两方面： 1) 代码一致性 以及 2) 最佳实践。 通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统

  • Web前端开发最佳实践 (党建著) 完整pdf扫描版

    很多开发人员介绍*技术时头头是道，却无法制作出一个符合W3C规范的HTML页面。国内Web前端开发者普遍不重视代码规范以及网站前端性能，很多网站甚至连最基本的前端代码压缩和合并都没有。本书立足于Web前端开发的基础...

  • WEB前端开发最佳实践（4）

    加快JS文件加载速度 ...最佳实践提高性能： 少用for-in循环 谨慎使用eval 正确使用数组 尽量不使用全局变量 确保解除已经不需要的事件监听，如要那些要移除的DOM对象上绑定的事件 不要在闭包中返回外部不需要的对

  • Java API 最佳开发实践

    Java API 最佳实践 最近在做接口对接的工作，发现要写出一个双方都满意的api并不是一件容易的事，刚好在DZone 上看到微软工程师 Jonathan Giles 写的一篇文章，学到了一些经验，便做了翻译或许可以帮助到更多的...

  • Android开发最佳实践

    本文是Futurice公司的Android开发人员总结的最佳实践，遵循这些准则可以避免重复制造轮子。如果你对iOS或者Windows Phone开发感兴趣，那么也请看看iOS最佳实践（https://github.com/futurice/ios-good-practices）...

  • Android最佳实践之高效的应用导航

    设计（一）- 规划Screens和他们之间的关系 原文地址：...设计和开发Android应用程序的第一个步骤是确定用户能够查看和处理应用。一旦你知道用户与之交互的应用程序之间交互什么数据,下一步就

  • WEB前端开发最佳实践（3）

    兼容旧浏览器的代码，被称为hack代码 熟悉IE浏览器中常见的兼容样式 分离样式兼容代码 em，px，% px：相对尺寸，但由于同环境，又是绝对尺寸 em：应用元素上字体大小的两倍，%：相对于父元素的百分比 尽量设置相对...

  • Unity单例模式最佳实践（附代码）

    总之，4=6&gt;5&gt;2&gt;3=1 我的推荐——在Unity中使用哪种实现 Unity开发还是有Unity开发的特点的。 Unity中你不使用多线程的话，Mono代码本来就是单线程的,官方也是建议用协程而不是用多线程。 而且延迟初始化对于游戏...

  • MATLAB-四连杆机构的仿真+项目源码+文档说明

    <项目介绍> - 四连杆机构的仿真 --m3_1.m: 位置问题求解 --m2_1.m: 速度问题求解 --FourLinkSim.slx: Simlink基于加速度方程的仿真 --FourLinkSim2.slx: Simscape简化模型仿真 --FourLinkSim3.slx: Simscape CAD模型仿真 - 不懂运行，下载完可以私聊问，可远程教学 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------

  • ridge_regression:用于岭回归的python代码（已实现以预测下个月的CO2浓度）

    ridge_regression 用于岭回归的python代码（已实现以预测下个月的CO2浓度） 资料可用性 文件 Ridge.py ：标准函数和Ridge回归函数window_make.py ：使用滑动窗口方法制作大小为p（窗口大小）的时间序列列表。 Final_version.ipynb ：使用Co2数据对代码进行实验

Global site tag (gtag.js) - Google Analytics