HTML5 代码规范

HTML 代码商定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。

用 XHTML 开发人员逐步养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。

用正确的文档类型

文档类型公告位于HTML文档的第一行：

假如你想跟其余标签一样用小写，能用以下代码：

用小写元素名

HTML5 元素名能用大写和小写字母。

推荐用小写字母：

• 混合了大小写的风格是非常糟糕的。

• 开发人员通常用小写 (相似 XHTML)。

• 小写风格看起来更加清新。

• 小写字母容易编写。

不推荐:

非常糟糕:

推荐:

除此之外，中星小编还详情4款最受欢迎的HTML5/CSS3应使用及代码，一起来看看吧。

1、基于HTML5 Canvas的图表插件Chart.js

chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功可以非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清爽。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效，这也是HTML5 Canvas的一大功劳。

柱形图折线图饼状图环形图雷达图极线图

2、HTML5 3D动画柱状图表

这次我们要分享一款很酷的HTML5 3D图表应使用，它是一款柱状图表，呈3D的外观样式，并且我们能改变图表的颜色主题，让其更加符合你的需求。这款HTML5图表能切换需要查看的图表数据，在切换的时候有不错的动画效果，而且，我们还能切换图表的大小，以适应不同大小的浏览窗口。

3、CSS3 3D环形进度条 带进度百分比

这是一款基于纯CSS3的环形进度条，而且，从外观上看，这款进度条很有3D立体的感觉，尤其是在进度条上有立体的投影，显得非常小巧迷人。另外，进度条的环形中央带有进度百分比，能实时根据进度来升级百分比的数值，和之前分享的HTML5/CSS3扇形进度条动画相比有肯定优势。

4、纯CSS3垂直Tab菜单 Tab样式可自己设置

Tab菜单在网页上用起来非常方便，也比较节省空间，所以很多门户网站很喜欢使用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单，它是使用纯CSS3实现的，加载和切换特别灵活。另外，Tab菜单的样式你能用CSS重新定义，扩展很方便。

、编码格式：用UTF-8

请确保您的编辑器用的字符编码为UTF-8，没有字节顺序标记。在html模板或者文档中通过meta来定义编码格式。

6、注释

根据需要解释代码，这个就不多说了，团队开发这个非常重要，虽然很多时候大家不愿意遵守，但的确重要！

7、TODO待定项

尚未实现的或者待定的内容肯定要标识强调出来，利使用TODO辨识，而非其余诸如@@来强调。在todo项中假如有必要列明联络人，比方负责人。在TODO后追加一个冒号作为行动内容，例如TODO：为网站添加html5模板。